Comment by shadowfaxRodeo | Hacker News Reader

Comment by shadowfaxRodeo | Hacker News Reader

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 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)

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:

  <link rel=icon href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAG1BMVEU5PT85PT///7X22GDtiUvVOkKxOF5qMk////9bF0DJAAAAAXRSTlMAQObYZgAAAD5JREFUeNq906UBwEAUwNBy95+4cOA+09OxWSKsCE2wAQKCRhrsiMrgQFQGJ6IyuBCVwQ1YG1+wTHgQdpbTC3XuCmFsTKU6AAAAAElFTkSuQmCC>

There won't be any overhead once the file is cached. Your method requires the favicon to keep getting downloaded on every page load.

Both Chrome and Firefox (maybe others) have a separate cache for favicons that acts differently than the regular browser cache. I don't know if it caches data uris but it does cache more aggressively. I know some places like Stackoverflow add a cache-busting parameter to favicon.ico to get past it.

How would a data uri exactly get cached? It’s served inline with every page request.

I know it sounds funny, but they want a favicon cache for things like the bookmarks page and the default "blank" Chrome page, where there's no "page" present. So it's possible they extract the uri data into that cache.

It will load faster but at the expense of other things that matter more. On every page load, too. I don’t think it matters if a favicon download takes one extra round trip on the first page load. In fact I would prefer the request for the favicon to be deferred till after all my content and other assets have loaded, which I would guess browsers do by default.

using favicon.ico also has the advantage that it will show up on e.g. some rss readers

2: Why? Are there even any systems left on the planet that aren't past EOL but don't have emoji fonts preinstalled at the OS level?

Maybe because you can't guarantee that even if an OS has emoji support that it supports the latest version of emojis.

I run into this every time my wife updates her phone. She sends me text messages with "Lookit the cool new emojis!" But since I haven't updated mine, they came through as missing icon glyphs.

I think google renders them in a raster format. Whatever they use to do that doesn't support emojis.

It could be by design, by rendering any text in the svg icon google is making a design decision for you. They're choosing a font, or a specific emoji type. Maybe they want to avoid the problems that would ensue.

EOL doesn't matter - in use and in standard matters. Also the look depends on local conditions – the font. That's not what designers are keen on.

I hope SVGs as favicons gets supported by all browsers soon. Until then (shameless plug) a colleague of mine wrote a guide what is really needed in terms of favicons: https://loqbooq.app/blog/add-favicon-modern-browser-guide

Reply on news.ycombinator.com