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:

• with sizes="any"
• without sizes="any"

How to Favicon in 2022 →