Emoji as a Favicon Using SVG (2022) | Hacker News Reader

Emoji as a Favicon Using SVG (2022)

css-tricks.com

103 pointsandrei-akopian24 comments

Note that Safari still does not support SVG favicons.

This site has a nice one-click copy button for each "emojicon": https://emojicon.dev/

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

I'd love to only have to specify a single SVG image for a site and have it used for all sizes and scales.

Hey, that’s my site! Thanks for checking it out!

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!

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"?

Where does Safari even show Emojis?

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.

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

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

I used this trick for a quick favicon on my site 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...

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.

at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't

Oh that's interesting, I wonder what's different about your SVG favicon vs mine.

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

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/w...

but note that browsers rate-limit you to approx. 1 update per sec

Extremely cursed, I love it

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.

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

Now support animations!

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

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