HN Explorer

27 comments

[ 3.0 ms ] story [ 58.2 ms ] thread
wonger_
Note that Safari still does not support SVG favicons.

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

josephscott
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.

brysonreece
Hey, that’s my site! Thanks for checking it out!
codetrotter
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
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
Where does Safari even show Emojis?
a1o
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.
youssefabdelm
Hm I wonder if it's possible to animate those svg favicons...
lifthrasiir
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.
[deleted]
(comment deleted)
asb
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...
royal_ts
at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't
asb
Oh that's interesting, I wonder what's different about your SVG favicon vs mine.
lloydatkinson
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]
(comment deleted)
[deleted]
(comment deleted)