6 ms·

Emoji as a Favicon Using SVG (2022)

103 points by andrei-akopian 2y ago

deleted 2y ago
[deleted]
wonger_ 2y ago
Note that Safari still does not support SVG favicons. This site has a nice one-click copy button for each "emojicon": https://emojicon.dev/ https://emojicon.dev/
- josephscott 2y ago
  This has been on my wish list for so long. I think Safari is the last hold out on SVG favicons - https://caniuse.com/link-icon-svg https://caniuse.com/link-icon-svg I'd love to only have to specify a single SVG image for a site and have it used for all sizes and scales.
- brysonreece 2y ago
  Hey, that’s my site! Thanks for checking it out!
  - codetrotter 2y ago
    This is superb! I have a small tool with a web frontend, that I use a specific emoji to represent but I didn’t have a favicon yet, because if I used a PNG of an emoji that Apple made I’d be infringing on their copyright. Using SVG and having the browser and OS provide the rendering of the emoji is perfect for the favicon of my tool!
    - netsharc 2y ago
      A quick search says it's possible to get the PNG data URL from a canvas. I wonder if it's viable to draw an emoji to a canvas, and extract the PNG out of it for the favicon. Would a lawyer go after "client-side copyright infringement"?
- rasso 2y ago
  Where does Safari even show Emojis?
  - a1o 2y ago
    Emoji, anywhere with text. If you mean favicon, you can see them in different places, but one example is top left of the tabs if you are using the device in landscape. If you mean desktop Safari then I don't remember as I don't use it on desktop.
skeoh 2y ago
See also: https://fav.farm/ https://fav.farm/
- _puk 2y ago
  Direct inspiration for https://favmeup.com/ https://favmeup.com/ Used it as a nice intro project to try out cloudflare hosting.
- wesbos 2y ago
  This is my site! It does some decent traffic for a joke website
jer0me 2y ago
Or if you'd like a PNG of a specific style: https://emojicdn.elk.sh/ https://emojicdn.elk.sh/
- miyuru 2y ago
  pretty similar to project i did in 2016 https://news.ycombinator.com/item?id=11420350 https://news.ycombinator.com/item?id=11420350
rtcode_io 2y ago
I have https://fav.rt.ht https://fav.rt.ht for you too! Let's you pick formats and customize layout/size.
- est 2y ago
  Now support animations!
youssefabdelm 2y ago
Hm I wonder if it's possible to animate those svg favicons...
- lifthrasiir 2y ago
  In principle, yes: data:text/html;charset=utf-8,<link rel="icon" href=" data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <g> <text x='0,0,100,0,200,0,300,0,400,0,500,0,600,0,700,0,800,0,900,0,1000,0,1100,0,1200,0, 1300,0,1400,0,1500,0,1600,0,1700,0,1800,0,1900,0,2000,0,2100,0,2200,0,2300' y='.9em' font-size='90'></text> <animateTransform attributeName='transform' values='0,0;-200,0;-400,0;-600,0;-800,0;-1000,0; -1200,0;-1400,0;-1600,0;-1800,0;-2000,0;-2200,0' calcMode='discrete' dur='1s' repeatCount='indefinite'/> </g> </svg> "> However it doesn't seem to work on Chrome, even though it does handle the animated SVG correctly.
- tripflag 2y ago
  Yes; i use this trick to display an upload progressbar (progress-donut?) using a bit of JavaScript: https://github.com/9001/copyparty/blob/c5988a04f/copyparty/web/up2k.js#L643-L656 https://github.com/9001/copyparty/blob/c5988a04f/copyparty/w... but note that browsers rate-limit you to approx. 1 update per sec
  - sensanaty 2y ago
    Extremely cursed, I love it
deleted 2y ago
[deleted]
asb 2y ago
I used this trick for a quick favicon on my site https://muxup.com/ https://muxup.com/ - though unfortunately Google/Bing/DuckDuckGo doesn't like svg favicons and so it's not displayed in search results. I should really add a proper favicon...
- royal_ts 2y ago
  at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't
  - asb 2y ago
    Oh that's interesting, I wonder what's different about your SVG favicon vs mine.
- lloydatkinson 2y ago
  Favicons have always been weirdly special. I don’t know why. SVG support feels like it should be pretty straightforward to implement. Last time I looked at how to implement favicons “correctly” I had to make some weird XML file with the word apple in it and it lists all the size of icons I have, and then use a favicon generator to create all the “correct” sizes. What a mess.
- deleted 2y ago
  [deleted]
sodimel 2y ago
Neat! I learned a few years back that you can use an emoji as a cursor using svg too, here's an example: https://codepen.io/lmmm/pen/LYpxzgV https://codepen.io/lmmm/pen/LYpxzgV
jsheard 2y ago
OTOH if you want a quick favicon that renders consistently everywhere, Googles emoji set is available as SVGs (and fallback PNGs for Safari) under a permissive license. https://github.com/googlefonts/noto-emoji https://github.com/googlefonts/noto-emoji

deleted 2y ago

[deleted]

Note that Safari still does not support SVG favicons. This site has a nice one-click copy button for each "emojicon": https://emojicon.dev/ https://emojicon.dev/

josephscott 2y ago
This has been on my wish list for so long. I think Safari is the last hold out on SVG favicons - https://caniuse.com/link-icon-svg https://caniuse.com/link-icon-svg I'd love to only have to specify a single SVG image for a site and have it used for all sizes and scales.
brysonreece 2y ago
Hey, that’s my site! Thanks for checking it out!
- codetrotter 2y ago
  This is superb! I have a small tool with a web frontend, that I use a specific emoji to represent but I didn’t have a favicon yet, because if I used a PNG of an emoji that Apple made I’d be infringing on their copyright. Using SVG and having the browser and OS provide the rendering of the emoji is perfect for the favicon of my tool!
  - netsharc 2y ago
    A quick search says it's possible to get the PNG data URL from a canvas. I wonder if it's viable to draw an emoji to a canvas, and extract the PNG out of it for the favicon. Would a lawyer go after "client-side copyright infringement"?
rasso 2y ago
Where does Safari even show Emojis?
- a1o 2y ago
  Emoji, anywhere with text. If you mean favicon, you can see them in different places, but one example is top left of the tabs if you are using the device in landscape. If you mean desktop Safari then I don't remember as I don't use it on desktop.

skeoh 2y ago

See also: https://fav.farm/ https://fav.farm/

_puk 2y ago
Direct inspiration for https://favmeup.com/ https://favmeup.com/ Used it as a nice intro project to try out cloudflare hosting.
wesbos 2y ago
This is my site! It does some decent traffic for a joke website

jer0me 2y ago

Or if you'd like a PNG of a specific style: https://emojicdn.elk.sh/ https://emojicdn.elk.sh/

miyuru 2y ago
pretty similar to project i did in 2016 https://news.ycombinator.com/item?id=11420350 https://news.ycombinator.com/item?id=11420350

rtcode_io 2y ago

I have https://fav.rt.ht https://fav.rt.ht for you too! Let's you pick formats and customize layout/size.

est 2y ago
Now support animations!

youssefabdelm 2y ago

Hm I wonder if it's possible to animate those svg favicons...

lifthrasiir 2y ago
In principle, yes: data:text/html;charset=utf-8,<link rel="icon" href=" data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <g> <text x='0,0,100,0,200,0,300,0,400,0,500,0,600,0,700,0,800,0,900,0,1000,0,1100,0,1200,0, 1300,0,1400,0,1500,0,1600,0,1700,0,1800,0,1900,0,2000,0,2100,0,2200,0,2300' y='.9em' font-size='90'></text> <animateTransform attributeName='transform' values='0,0;-200,0;-400,0;-600,0;-800,0;-1000,0; -1200,0;-1400,0;-1600,0;-1800,0;-2000,0;-2200,0' calcMode='discrete' dur='1s' repeatCount='indefinite'/> </g> </svg> "> However it doesn't seem to work on Chrome, even though it does handle the animated SVG correctly.
tripflag 2y ago
Yes; i use this trick to display an upload progressbar (progress-donut?) using a bit of JavaScript: https://github.com/9001/copyparty/blob/c5988a04f/copyparty/web/up2k.js#L643-L656 https://github.com/9001/copyparty/blob/c5988a04f/copyparty/w... but note that browsers rate-limit you to approx. 1 update per sec
- sensanaty 2y ago
  Extremely cursed, I love it

deleted 2y ago

[deleted]

asb 2y ago

I used this trick for a quick favicon on my site https://muxup.com/ https://muxup.com/ - though unfortunately Google/Bing/DuckDuckGo doesn't like svg favicons and so it's not displayed in search results. I should really add a proper favicon...

royal_ts 2y ago
at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't
- asb 2y ago
  Oh that's interesting, I wonder what's different about your SVG favicon vs mine.
lloydatkinson 2y ago
Favicons have always been weirdly special. I don’t know why. SVG support feels like it should be pretty straightforward to implement. Last time I looked at how to implement favicons “correctly” I had to make some weird XML file with the word apple in it and it lists all the size of icons I have, and then use a favicon generator to create all the “correct” sizes. What a mess.
deleted 2y ago
[deleted]

sodimel 2y ago

Neat! I learned a few years back that you can use an emoji as a cursor using svg too, here's an example: https://codepen.io/lmmm/pen/LYpxzgV https://codepen.io/lmmm/pen/LYpxzgV

jsheard 2y ago

OTOH if you want a quick favicon that renders consistently everywhere, Googles emoji set is available as SVGs (and fallback PNGs for Safari) under a permissive license. https://github.com/googlefonts/noto-emoji https://github.com/googlefonts/noto-emoji