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 for a bug Chromium: when not present, Chromium will use the .ico file instead of the defined .svg file.

You can test this buggy behavior on these pages by subzey:

How to Favicon in 2022 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.