Favicon (иконка сайта) в 2020 году

Раньше всё было просто — favicon.ico в корне сайта было достаточно. С ростом количества популярных операционных систем, браузеров, устройств с экранами разной плотности пикселей, иконок для сайта тоже стало больше.


Для чего чаще всего используется favicon?
— Поисковики используют иконку сайта в отображении результатов выдачи
— Браузеры показывают в заголовках вкладок и в избранном
— Операционные системы — в ярлыке на рабочем столе

Наличие каких файлов проверить?

favicon.ico

Тег не обязателен, достаточно разместить файл в корне сайта.
Для обратной совместимости и случаев, когда не удалось применить другой вариант.

favicon.svg

Тег: <link href="/favicon.svg" rel="icon" type="image/svg+xml">
На будущее.

favicon.png, 16х16px

Тег: <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
Классический favicon.

favicon.png, 32х32px

Тег: <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
Safari favicon.

safari-pinned-tab.svg, монохромный

Тег: <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#000000">
Прикреплённая вкладка Safari.

apple-touch-icon.png

Тег: <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
Домашний экран iOS.

site.webmanifest

Тег: <link rel="manifest" href="/images/favicon/site.webmanifest">
В данный момент используется в Android Chrome, для добавления на домашний экран. В файле JSON формата, адреса двух png, размерами 192x192 и 512x512 пикселей.

browserconfig.xml

Тег: <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
Тайлы в Windows. В файле адреса четырёх png, размерами 70x70, 150x150, 310x150 и 310x310 пикселей.