3 ms·

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

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 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 https://doodad.dev/favicon.ico it's just 625 bytes (261 minified)

TheRealPomax 5y ago
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?
- reaperducer 5y ago
  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.
- shadowfaxRodeo 5y ago
  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.
- mro_name 5y ago
  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.
chrismorgan 5y ago
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>
- soheil 5y ago
  There won't be any overhead once the file is cached. Your method requires the favicon to keep getting downloaded on every page load.
  - tyingq 5y ago
    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.
    - soheil 5y ago
      How would a data uri exactly get cached? It’s served inline with every page request.
      - tyingq 5y ago
        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.
- playpause 5y ago
  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.
asddubs 5y ago
using favicon.ico also has the advantage that it will show up on e.g. some rss readers
tonyjstark 5y ago
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 https://loqbooq.app/blog/add-favicon-modern-browser-guide

TheRealPomax 5y ago

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?

reaperducer 5y ago
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.
shadowfaxRodeo 5y ago
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.
mro_name 5y ago
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.

chrismorgan 5y ago

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>

soheil 5y ago
There won't be any overhead once the file is cached. Your method requires the favicon to keep getting downloaded on every page load.
- tyingq 5y ago
  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.
  - soheil 5y ago
    How would a data uri exactly get cached? It’s served inline with every page request.
    - tyingq 5y ago
      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.
playpause 5y ago
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.

asddubs 5y ago

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

tonyjstark 5y ago

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 https://loqbooq.app/blog/add-favicon-modern-browser-guide