Фавикон помогает найти ваш сайт среди открытых вкладок. Рассказываем, какие размеры нужны и как добавить их на страницы.
Фавикон — это маленький значок на вкладках браузера, в закладках и результатах поиска. Деталь небольшая, но сайт становится легче узнать и он выглядит более законченным.
Начните с простого квадратного изображения
Фавиконы показываются даже в размере 16 × 16 пикселей, поэтому мелкие детали исчезают. Лучше всего работают жирная буква, простой символ или упрощённая версия логотипа. Начните с квадратного изображения не меньше 512 × 512 пикселей.
Какие файлы нужны
- favicon.ico с размерами 16, 32 и 48 пикселей для старых браузеров и Windows.
- favicon-32x32.png и favicon-16x16.png для современных браузеров.
- apple-touch-icon.png размером 180 × 180 пикселей для главного экрана iPhone и iPad.
- android-chrome-192x192.png и 512x512.png, указанные в файле site.webmanifest, для Android.
Добавьте теги на страницы
Загрузите файлы в корневую папку сайта и добавьте эти строки внутрь <head> каждой страницы:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Создайте всё сразу
Делать каждый размер вручную утомительно. Наш инструмент «Генератор фавиконов» создаёт все перечисленные файлы из одного изображения, упаковывает их в ZIP и даёт HTML для копирования.
Браузеры подолгу хранят фавиконы в кэше, поэтому если вы заменили значок и не видите изменений, попробуйте приватное окно или очистите кэш браузера.