Fun with SVG favicons

This is a demonstration of various features SVG favicons offer. There’s no scripting nor server-side code involved. So long as the web browser supports SVG favicons, the effects described below apply. Otherwise, the favicon is an X mark.

If the user prefers light colour scheme or the web browser does not support prefers-color-scheme CSS media query, the favicon is a dark blue text on a light blue background. Otherwise, if the user prefers dark colour scheme, the favicon is a light blue text on a dark blue background.

The text on the favicon is user’s system language code or a question mark if the system language is not one of the 133 hard-coded common languages. This behaviour depends on browser supporting SVG switch element.

Lastly, if the browser supports animated SVG favicons (e.g. Firefox), the background on the favicon rotates clockwise. Otherwise, it is static.

To view the favicon directly, see the fun-with-svg-favicons.svg file. For more information see the Having fun with SVG favicons article.