Favicon (иконка сайта) в 2020 году
9 июня 2020 г. ≈ 47 секунд

Для чего чаще всего используется 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 пикселей.
К сожалению, вы ничего не заполнили, ввели неправильный email, либо адрес уже подписан на рассылку.
Попробуйте ещё раз и если не получается, напишите нам.
Адрес успешно подписан на рассылку!
Подписывайтесь на рассылку
и получите в подарок концепт одного элемента дизайна для своего сайта!
Подписываясь на рассылку, вы подтверждаете согласие с условиями акции и политикой конфиденциальности