How to Favicon in 2021

Andrey Sitnik:

It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen.

Having only this in your markup will do nowadays:

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

Along with this in your linked manifest.webmanifest

{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

How to Favicon in 2021 →

SVG favicons in Chrome

A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. πŸŽ‰

🦊 Firefox already has support for SVG favicons, ever since version 41

Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME Type – As per tip by Mathias

Above that it’s also possible to use prefers-color-scheme in your SVG icon, thus supporting Light/Dark Mode:

πŸ› There’s on small bug though: you need to refresh the page after changing to/from Dark Mode for the favicon to change.

Dark Mode Favicon Demo →

Tiny Mirror – Mirror your Webcam into the Favicon

Fun little experiment that mirrors your webcam into your favicon.

Tiny Mirror →

πŸ”₯ The aforementioned favico.js (from 2013!) also comes with a β€œWebcam video to icon” option. Next to mirroring the webcam into your favicon it also supports badges, videos, etc.

🍰 Looking to display (pie)charts in your favicon? Piecon can do that for you!

favico.js

favico-js

Make a use of your favicon with badges, images or videos

Also comes with a neat Webcam video to icon option πŸ˜€

favico.js →

UPDATE 2019-04-05: Do note that the webcam demo no longer works in modern browsers, due to browsers blocking access to the webcam for sites that are not served over HTTPS. If the demo site were to be served over HTTPS, it’d work fine πŸ˜‰

Related: The aforementioned Piecon and Tinycon