I agree they are great, especially for simple icons that work as SVG. Support for SVG favicons, however, keeps me from using them: https://caniuse.com/link-icon-svg
SVG favicons have some cool benefits
11–20 of 75 posts
Re: SVG favicons have some cool benefits
#12Was wondering if you could use this to run a version of your site in the favicon directly using `foreignObject`, but it looks like Chromium browsers at least render the SVGs in static mode [1][2]. Maybe it'll work in others though?
[1] https://www.chromestatus.com/feature/5180316371124224
[2] https://svgwg.org/svg2-draft/conform.html#secure-static-mode
Re: SVG favicons have some cool benefits
#13Vector graphics rendered at very low resolutions like 16x16 or whatever favicons are rarely look as good as hand-crafted bitmaps. Is it possible to make them look good?
At retina resolution it shouldn't matter.
Re: SVG favicons have some cool benefits
#14Complex SVG Favicons will usually be larger in term of bytes than highly compressed PNG icons. We did an extensive study of Favicons served on the top 500 websites [1].
If you want to stick with the old-school PNG icons, we open-sourced `icopack` - our internal tool for efficient packing of individual PNGs into a highly-optimised ICO files [2].
[1] https://optidash.ai/blog/optimizing-favicons-for-the-worlds-...
Re: SVG favicons have some cool benefits
#15There's a few things to be aware of with svg favicons.
1. If a favicon is missing or in a format that's not compatible with the browser. The browser will look for a /favicon.ico file at the root of the site. It's worth having that as a backup or you end up with no favicon and 404 errors in the console.
2. Google now shows a favicon in some search results. I'm pretty sure it works fine with SVG. But, if you use an emoji you end up with a missing glyph character as your favicon. it looks bad.
3. If it's inline it won't be cached
I went a bit overboard optimizing the favicon of my site, and found that:
If you design your favicon as colored squares on a 16x16 grid, and save it as a 32x32 .ico file at https://example.com/favicon.ico
You end up with a smaller file size icon, that can be cached, doesn't have any markup on your site, and scales up perfectly on all the icon sizes.
here's an example: https://doodad.dev/favicon.ico
it's just 625 bytes (261 minified)
Re: SVG favicons have some cool benefits
#16Related: If you're looking for a favicon generator, check out https://realfavicongenerator.net (I am not affiliated, just a satisfied user).
Re: SVG favicons have some cool benefits
#17Vector graphics rendered at very low resolutions like 16x16 or whatever favicons are rarely look as good as hand-crafted bitmaps. Is it possible to make them look good?
At retina resolution it shouldn't matter.
Great news for users that weren't going to have the problem anyways, horrible news for the 16x16 rendering issues otherwise.
Re: SVG favicons have some cool benefits
#18Vector graphics rendered at very low resolutions like 16x16 or whatever favicons are rarely look as good as hand-crafted bitmaps. Is it possible to make them look good?
Have to greatly simplify them. Don’t Hidef displays use 32x32 these days?
Yes, 32x32 is typically used by higher density displays (more pixels in the same space, relatively speaking).
Re: SVG favicons have some cool benefits
#19Re: SVG favicons have some cool benefits
#20People keep on talking about (prefers-color-scheme: dark), but it isn’t what they want it to be—never has been, and probably never will be (though I will admit that prefers-color-scheme could theoretically be special-cased for favicon rendering).
For example, in Firefox, I use the dark theme for the UI, but that’s completely unrelated to the content, and prefers-color-scheme matches the content, not the chrome. Content I keep normal, light.
It’s quite possible (not uncommon, even) for the active tab to have a light background and inactive tabs to have a darker background. (A decade ago, this is what would happen by default on the default Windows XP theme, though it was the XP blue rather than anything dark dark.)
Or Chromium: like Firefox, it has themes; but beyond that, incognito window chrome gets a dark background.
Admittedly, (prefers-color-scheme: dark) matching makes it almost certain that you’re rendering against a dark background of some form, but it not matching tells you absolutely nothing about the background.
The fact of the matter is that your favicon could be rendered against absolutely any colour, and you need to make sure your icon will work on very light colours and very dark colours, and not be too bad on anything in between.