41–50 of 75 posts
Awkward ad intermission Tired of all the "404 Not Found: /favicon.ico" log messages from your local test server? Fret no more! Just add this minor incantation to your HTML and you're set!
touch favicon.ico
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…
The post you linked to doesn't include the word "SVG". Is there a separate article that compares using one SVG file vs. using multiple images?
It's hard to imagine that using a typical suite of PNG images at different sizes is going to be more efficient (and future-proof) than a single SVG file run through svgo.
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:
re: cacheability of favicons, this is basically a non-issue as the bandwidth-delay product of even a 10mbit/50ms connection is already 62 kB. Anything below this size on such a connection is likely to render faster than a separate request round-trip. This raises to almost 1.2 MB with a 100mbit/100ms connection.
It's way better to put it as a separate image, maybe their browser will delay loading it because they're mostly useless. But, you can actually make a favicon useful! If you serve http-strict-transport-security headers with includeSubdomains from your top level domain and you serve your favicon from there, you can push browsers to load them. Ex: your website at www.example.org loads https://example.org/f as its favicon with content expiration about the same as HSTS expiration, and you've now set or refreshed that.
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
Oh wow, Safari still doesn’t do regular SVG favicons? Huh. Somehow I thought that got sorted out a couple of years back in 12 or something.
Basically the only thing I really want out of all the anti-trust heading there way, is to force them to allow alternative renderers.
Earlier quoted context omitted.
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…
I wonder if it is possible to have an ML filter that can downsample in a way that is aesthetically pleasing, even if things are not aligned at pixel-boundaries.
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…
Earlier quoted context omitted.
Oh wow, Safari still doesn’t do regular SVG favicons? Huh. Somehow I thought that got sorted out a couple of years back in 12 or something.
The webdev community needs to figure out a way to give Safari the IE6 treatment, and shame Apple enough to stop holding back progress. Apple gets coddled so much everyone seems shocked when you try to tell them how awful Safari is. Basically the only thing I really want out of all the anti-trust heading there way, is to force them to allow alternative renderers.
IE6 was borderline abandonware with hideously broken implementations of many core features. Implying that Safari is comparable to IE6 is just factually wrong. No, it doesn't live on the bleeding edge like Firefox and Chrome, but it has excellent support for non-bleeding edge features. And where there are notable gaps in feature support (e.g. webp images) there are clean, formal mechanisms for fallback.
Usually when people complain about Safari, it's because they care about some bleeding edge feature (which they probably don't need anyway) or one of a few specific absent features such as web notifications. (For which I'll controversially retort with good! It's an anti-feature. Pleased that Safari is holding the line on that one.)
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…
Earlier this year I created my own ICO editor for fun [1]. I learned a lot about reading and writing binary files, and decoding BMP data. While testing the editor on existing site favicons I kept finding that they were all uncompressed BMP data, and came to a similar conclusion to your article after checking the icons used on the Alexa top 100 sites.
I guess this is a combination of the ICO format being somewhat opaque (it's hard to tell if it's using BMP or PNG without using a hex editor), and that there aren't many applications available that create PNG-based ICO files in the first place (especially ones that are used in web development pipelines).
1. https://ico-editor.lach.app/ - Client-side ICO viewer/editor, can open and convert BMP to PNG.
PS. I noticed that your own site's favicon is uncompressed.