31–40 of 75 posts
Complex 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-... [2] h…
Vector 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?
I think there are fancier ways of doing this, and of getting GPU support, but I can’t think of the terms now. Hopefully someone else will chip in.
But if you’re aware of the ways in which most renderers do an inferior job, you can work around them and craft your SVG so that it won’t be affected: things like making sure that objects align with pixel boundaries and that each pixel never has more than one object partially covering it.
Was 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
See https://news.ycombinator.com/item?id=26922244#26923436 for an example. It works in Chromium.
This raises to almost 1.2 MB with a 100mbit/100ms connection.
People 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. Conte…
Example: https://i.imgur.com/PTPJ3Fm.png
I find the most interesting part how < and especially “ don’t need to be escaped inside the href attribute. How does the HTML parser know when the attribute stops?
Edit: Yeah, you at least need to change the `"` to `'` in the inline SVG before it will parse correctly (tested in Firefox)
Vector 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?
Yes, but it requires some graphics techniques that browsers mostly don’t implement, or implement in all environments, yet. I can’t remember the full range of techniques to do it properly, but it starts at least conceptually with supersampling: not rendering at 16×16, since that causes real problems with aliasing when you have overlapping objects, but rather rendering at a higher resolution (where the aliasing effects…
There'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 emo…
Your favicon.ico can be compressed further to a 171 byte PNG. I confess I find this 271-byte incantation compelling despite increasing each response by that much, since it’ll load faster in the first place and avoid the overhead of another request:
