Building an Adaptive SVG favicon that responds to Dark Mode

Speaking of favicons: In the latest episode of GUI Challenges, Adam details how to create an adaptive favicon that responds to Dark Mode. SVG Favicons were introduced in Chromium 80 (2019) and Firefox 41 (2015). No support in Safari. Building an adaptive favicon → 🤔 On the WebKit Issue tracker I can find this RESOLVED …

How to Favicon in 2022

Updated version of to the How to Favicon in 2021. <link rel="icon" href="/favicon.ico" sizes="any"><!– 32×32 –> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!– 180×180 –> <link rel="manifest" href="/manifest.webmanifest"> The markup (and manifest) are essentially the same as the 2021 version, with one exception: sizes=”any” has been added to the favicon.ico reference. This is a workaround …

The Mystery of the Changing Favicon

Alvaro Montoro recently had a weird issue where the favicon shown in Firefox differed from that in other browers, even though it was the same favicon.ico file. It was puzzling: the favicon worked differently depending on the browser. Chrome and Safari showed the correct favicon (with the corporate logo) while Firefox showed a completely different …

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 …

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 …

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 …