This article is quite boring; it doesn't cover much new.
Its 2020, “favico” aren't very new; they are branding items. I ~ like everyone else ~ have been using them for over a decade. Current common supported formats are: ico (a wrapper format by MSFT), gif, png 1; there are some rarer versions, to deliver animation on the favicon. There are a variety of meta data for formats etc, pls read the wiki page; most of the rel attributes are irrelevant. Early versions of MSIE have poor support for the range of things that people may wish to do; including better quality favicon.
You can use specific variants for iphones 2 and Android 3 4.

Some tools

If you have a proper copy of indesign or maybe photoshop; you are a designer, and can skip this section. Otherwise, here are some tools, so you don't need to pay or setup a bulky image editor (regardless of how well I draw; I don't have image tools setup quite often).

  • 5 ~ includes several tools (emoti, png, text), creates all the files that you would want for favicon. The text version supports 256 colours, and a wide variety of fonts. It supplies sample HTML to use the files.
  • 6 ~ identical features as above. I guess its opensource.
  • favicon 7 ~ supports PNG upload, import from their library, or online editing. Range of colours seemed smaller (but I didn't count them).

Caching/ performance

  • Obviously you need to use technology to match your userbase; however, dropping MSIE simplifies everything (and the lack of a favico shouldn't break a site/app). OTOH, the basic MSIE spec is used by every other browser as a backup option so supporting it adds resilience.
  • Your favico isn't likely to change, so set HTTP caching on it (probably wont be there by default). reference for apache 8 and compress it in-flight 9.
  • Other than old versions of MSIE, your favico is cached by browsers, when its used in bookmarks.
  • If you intentionally don't have a favico (for example test machines), they can be tuned off with an empty icon declaration 10.
  • I prefer PNG 32x32 pixel favico as they are normally less than 1KB on disk (that is probably 1 TCP packet, depending on HTTP headers). If your favico is just text, using a SVG should be smaller than that (test code here would be good). I am unable to find any references to support for WEBP favico. The actual MSFT ICO format is frequently 15KB.
  • If the image data is 1KB, you can inline into the HTML (see data URLs and basse64 data 11 ), to save an extra HTTP request. Unfortunately this breaks cachability. If I need to add a seasonal favico; using the inline version allows instant change/updates.
  • When using a PNG or GIF, use smallest colour space that works with your design; as this makes the files smaller.
  • Knowing what “cool features” to support, because “your audience thinks its cool”, is hard analysis, and will change. I expect that sales/marketing/directors will have a different opinion to actual users. Having an animated favico may be cool tech, or may not be. If animation isn't a feature that adds to your brand, don't add it for performance reasons.

Animated favicon

Animated favico can be used as a good way to communicate about your service status, when the browser isn't the front-most/top one. As someone who improves UX, pls use this to communicate rather than “look, look; look! I can anim8 !!!!!!111”.

  • Obviously GIF supports animation, and may be used for a favico (easiest approach).
  • The image can be manipulated via JS; see examples 12 13 14.
  • There are animation galleries 15 (I assume more than 1).

Some similar articles in research

Some similar articles in images