Генератор фавиконок

Что лежит в favicons.zip

Загрузите одно изображение — генератор прямо в браузере создаст все файлы, которые нужны современному сайту:

Файл	Размер	Где используется
favicon.ico	16, 32 и 48 px в одном файле	Вкладки, закладки, Windows и любой сервис, который запрашивает /favicon.ico
favicon-16x16.png	16×16	Вкладки на обычных экранах
favicon-32x32.png	32×32	Вкладки на экранах высокой плотности, ярлыки
favicon-48x48.png	48×48	Выдача Google, ярлыки на рабочем столе
apple-touch-icon.png	180×180	«На экран Домой» на iPhone и iPad
android-chrome-192x192.png	192×192	Главный экран Android
android-chrome-512x512.png	512×512	Сайты, установленные как приложение (PWA), и заставка
site.webmanifest	—	Сообщает Android/Chrome, где лежат две большие иконки
README-favicon.html	—	HTML-теги, которые нужно вставить

Какое исходное изображение подходит лучше всего

• Квадратное, простое, контрастное. При 16 px у вас всего 256 пикселей. Полный логотип со слоганом превращается в пятно, а одна буква или знак остаются читаемыми. Многие бренды делают для фавиконки упрощённый знак.
• Не меньше 512×512. Самая большая иконка — 512 px, поэтому исходник меньшего размера будет растянут и получится мыльным. Идеален логотип в SVG: он отрисовывается в высоком разрешении до уменьшения.
• Прозрачный PNG или SVG. Прозрачность сохраняется в .ico и маленьких PNG, так что иконка хорошо смотрится и на светлой, и на тёмной теме браузера.
• Картинка не квадратная? Она вписывается в квадрат без обрезки, по бокам остаются прозрачные поля. Если нужно заполнить квадрат целиком, сначала обрежьте изображение или сделайте круглую версию через обрезку по кругу.

Фон иконки Apple touch

iOS не поддерживает прозрачность у иконок на экране «Домой» — прозрачные места становятся чёрными. Поэтому apple-touch-icon.png (180×180) всегда получает сплошной фон. По умолчанию он белый; в поле выбора цвета рядом с зоной загрузки можно задать фирменный цвет (пипетка подскажет его по логотипу). Остальные размеры остаются прозрачными.

Куда положить файлы

1. Распакуйте архив и загрузите все файлы в корень сайта, чтобы адрес https://vash-sait.ru/favicon.ico открывал иконку.
2. Вставьте теги из README-favicon.html в <head> каждой страницы (или в шаблон шапки темы):

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

3. Если сайт лежит в подпапке, поправьте пути.

В WordPress это делает Внешний вид → Настроить → Свойства сайта → Иконка сайта — достаточно одного изображения 512×512, возьмите android-chrome-512x512.png. У Tilda, Shopify, Wix и Squarespace есть похожее поле «Favicon».

Входящий в архив site.webmanifest содержит только список иконок. Если хотите, чтобы сайт можно было установить как приложение, добавьте name, short_name, theme_color, background_color и "display": "standalone".

«Поменял фавиконку, а вижу старую»

Фавиконки кешируются упорнее почти всего остального на сайте.

• Откройте https://vash-sait.ru/favicon.ico напрямую и обновите без кеша (Ctrl + F5, на Mac — Cmd + Shift + R).
• Добавьте к ссылкам версию, например href="/favicon.ico?v=2", — браузер воспримет её как новый файл.
• Сбросьте кеш CDN или плагина кеширования, если они есть.
• Закладки и ярлыки на главном экране сохраняют старую иконку, пока их не пересоздать.
• Поисковики обновляют иконку в выдаче только после повторного обхода главной страницы — это может занять дни и недели. Google требует квадратную иконку со стороной, кратной 48 px, — PNG 48×48 и .ico этому соответствуют.

Похожие инструменты

• Уберите фон с фото, прежде чем делать из него иконку: удаление фона.
• Логотип только в WebP? Переведите его в PNG, если редактор его не открывает.
• Нужна просто картинка 512×512 для магазина или профиля? Изменить размер до 512×512.