Как сделать favicon
Чтобы сделать favicon, добавьте выше логотип или введите букву или эмодзи, настройте внешний вид и скачайте ZIP-архив. В предпросмотре значок показан в каждом реальном размере и во вкладке браузера, в светлой и тёмной теме.
- Выберите источник. Лучше всего подходит логотип в PNG или SVG; любая другая картинка вписывается в квадрат. Нет логотипа? Используйте букву или эмодзи на цветном фоне.
- Настройте внешний вид. Цвет фона или прозрачность, форму (квадрат со скруглёнными углами, квадрат или круг) и отступы вокруг изображения.
- Скачайте. Скачать все значки — полный набор; Только favicon.ico — один этот файл.
Что входит в набор favicon
| Файл | Размер | Где используется |
|---|---|---|
favicon.ico | 16, 32 и 48 px | Все браузеры, Windows, результаты поиска |
favicon-16x16.png, favicon-32x32.png | 16 и 32 px | Вкладки браузера и закладки |
apple-touch-icon.png | 180 px | Главный экран iPhone и iPad |
android-chrome-192x192.png, -512x512.png | 192 и 512 px | Главный экран Android, установленные веб-приложения |
site.webmanifest | - | Задаёт названия значков и цвета для Android и веб-приложений |
favicon-html.txt | - | Теги для вставки на ваши страницы |
У значка Apple всегда сплошной фон и прямые углы: iPhone сам скругляет углы, а прозрачные области показывает чёрными.
Добавьте favicon на сайт
- Распакуйте архив и загрузите файлы в корневую папку сайта, рядом с главной страницей, чтобы
значок открывался по адресу
yoursite.com/favicon.ico. - Вставьте HTML-теги (они показаны выше и лежат в
favicon-html.txt) в<head>ваших страниц. - Обновите страницу с очисткой кеша. Браузеры долго хранят старые favicon, поэтому быстрее всего проверить в приватном окне.
В WordPress можно вместо этого задать значок 512 px как «Значок сайта» в настройщике — остальные размеры WordPress создаст сам.
Советы для чёткого favicon
- Упростите. В 16 пикселей детальный логотип превращается в размытое пятно. Берите символ из логотипа или его первую букву, а не весь логотип с текстом.
- Добавьте контраст. Вкладки бывают светлыми и тёмными в зависимости от темы браузера — проверьте оба варианта предпросмотра.
- Следите за отступами. Чем меньше отступ, тем крупнее значок во вкладке; чуть больший отступ лучше смотрится на главном экране телефона.
Нужен отдельный файл .ico другого размера? Конвертер изображений сохранит любую картинку в ICO.
Частые вопросы
Как сделать favicon?
Добавьте логотип или любую квадратную картинку в поле на этой странице либо введите букву или эмодзи. Настройте фон, отступы и форму, затем скачайте ZIP-архив со всеми размерами значков и HTML-кодом для вашего сайта.
Какие размеры нужны для favicon?
Файл favicon.ico с версиями 16, 32 и 48 пикселей подходит для браузеров и Windows; apple-touch-icon размером 180 пикселей нужен для iPhone и iPad; значки 192 и 512 пикселей нужны для Android и установленных веб-приложений. В архив входят все эти файлы.
Как добавить favicon на сайт?
Загрузите файлы из ZIP-архива в корневую папку сайта, чтобы favicon.ico открывался по адресу yoursite.com/favicon.ico. Затем вставьте HTML-теги в раздел head ваших страниц.
Почему новый favicon не отображается?
Браузеры надолго сохраняют favicon в кеше. Откройте адрес значка напрямую, обновите страницу или попробуйте приватное окно. В результатах поиска значок может обновляться несколько недель.
Можно ли сделать favicon из текста или эмодзи?
Да. Выберите «Буква или эмодзи», введите один-два символа и подберите цвета. Это быстрый способ получить аккуратный значок без логотипа.
Моё изображение загружается на сервер?
Нет. Все значки создаются в вашем браузере, а изображение не покидает ваше устройство.