Генератор favicon

Q: Чем .ico отличается от PNG?

.ico — контейнер, внутри которого лежит сразу несколько размеров, и браузер берёт подходящий. PNG — одна картинка одного размера. На сайте нужны оба: .ico в корне для совместимости и PNG для современных браузеров и мобильных ярлыков.

Q: Почему на iPhone иконка с чёрным фоном?

iOS не поддерживает прозрачность в apple touch icon и заливает её чёрным. Генератор автоматически подкладывает под этот файл непрозрачный фон, поэтому проблема не возникает.

Q: Мои файлы загружаются на ваш сервер?

Нет. Картинка обрабатывается в браузере: и предпросмотр, и .ico , и ZIP архив собираются на вашем устройстве. После загрузки страницы генератор работает даже без интернета.

Favicon — это не один файл на 16 пикселей, как было десять лет назад. Современному сайту нужен комплект: .ico для старых браузеров, PNG нескольких размеров, отдельная иконка для iPhone, ещё одна для Android с запасом под обрезку, манифест и правильные строки в <head>. Соберите всё это за минуту: загрузите логотип, наберите букву или выберите эмодзи — а генератор сразу покажет, как иконка будет выглядеть во вкладке, на телефоне и в поиске.

Перетащите логотип сюда PNG, SVG, JPG или WebP · лучше квадратный и от 512 px

Оформление

Форма

Фон

Цвет Градиент Прозрачный

Поля вокруг 12% Скругление 22% Сдвиг по вертикали 0

Отдельная иконка для тёмной темы браузера

Браузер сам переключит иконку по системной теме — в архиве будет второй файл и готовый код.

Вкладка браузера

NixLife — Linux и домаш…

Экран телефона

NixLife NixLife

Выдача поиска

NixLifenixlife.ru

В архиве: favicon.ico (16/32/48), PNG всех размеров, иконки для iOS и Android, maskable-версия, site.webmanifest и готовый код для <head>.

Что попадает в архив

Файл	Размер	Для чего
`favicon.ico`	16, 32, 48 в одном файле	вкладки, закладки, старые браузеры, Windows
`favicon-16x16.png`	16×16	вкладка браузера
`favicon-32x32.png`	32×32	вкладка на экранах Retina, панель закладок
`favicon-96x96.png`	96×96	ярлыки на рабочем столе
`apple-touch-icon.png`	180×180	«На экран Домой» на iPhone и iPad
`android-chrome-192x192.png`	192×192	ярлык и переключатель приложений в Android
`android-chrome-512x512.png`	512×512	экран запуска установленного приложения
`maskable-512x512.png`	512×512	Android-иконка с запасом под любую форму обрезки
`site.webmanifest`	—	описание приложения: имя, иконки, цвет темы
`head.html`	—	готовые строки для вставки в `<head>`

Чем этот генератор отличается

Три источника. Не только загрузка картинки: можно набрать одну-три буквы (выбрав шрифт, насыщенность и цвет) или взять эмодзи — удобно для пет-проекта или страницы-визитки, когда логотипа ещё нет.
Честный предпросмотр. Иконка сразу показывается во вкладке светлого и тёмного браузера, на экране телефона в двух формах обрезки и в выдаче поиска. Это ровно те места, где favicon и видят.
Форма и поля. Квадрат, скругление, сквиркл (как у iOS) или круг; поля вокруг знака и сдвиг по вертикали — чтобы логотип не упирался в края и не «падал» вниз.
Отдельная иконка для тёмной темы. Тёмный логотип исчезает на тёмной панели браузера. Включите переключатель — в архив добавится второй комплект и строки с prefers-color-scheme.
Maskable для Android. Android обрезает иконку под форму, принятую в оболочке: круг, скруглённый квадрат, каплю. Отдельный файл с безопасной зоной 72 % гарантирует, что ничего важного не срежется.
Ничего не уходит на сервер. Логотип обрабатывается прямо в браузере: и .ico, и ZIP-архив собираются на вашем устройстве.

Куда класть файлы и что писать в head

Положите содержимое архива в корень сайта — туда же, где index.html. Затем вставьте в <head> строки из head.html:

<head> вашего сайта

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#00dd11">

Пара тонкостей, из-за которых иконки часто «не подхватываются»:

favicon.ico должен лежать именно в корне. Браузеры и поисковые роботы запрашивают /favicon.ico напрямую, даже если в разметке указан другой путь.
Пути начинаются со слеша. Относительный путь вида favicon.ico сломается на вложенных страницах.
apple-touch-icon не должен быть прозрачным. iOS подставит под прозрачность чёрный фон — генератор сам заливает этот файл цветом.
theme-color красит адресную строку на Android и панель установленного приложения. Обычно берут основной цвет бренда.

Почему иконка не меняется после замены

Самая частая жалоба: файл заменили, а в браузере старая картинка. Причина в том, что favicon кэшируется агрессивнее любого другого ресурса — иногда на недели.

Что делать по порядку:

Обновите страницу с очисткой кэша — Ctrl + F5 (на Mac Cmd + Shift + R).
Откройте файл напрямую — ваш-сайт.ру/favicon.ico. Если там старая иконка, значит дело не в браузере, а в кэше сервера или CDN.
Добавьте версию в путь: href="/favicon-32x32.png?v=2". Для браузера это новый адрес, и он скачает файл заново.
Проверьте в приватном окне — там кэш чистый.
Подождите поисковики. Яндекс и Google обновляют иконку в выдаче при следующем обходе сайта, это занимает от нескольких дней до пары недель.

Как нарисовать иконку, которая читается на 16 пикселях

Один знак. Буква, простая фигура, силуэт. Всё, что сложнее, превратится в пятно.
Контраст с фоном. Иконка живёт и на белой панели, и на тёмной. Нейтральный плотный фон под знаком решает проблему сразу.
Толстые линии. Тонкие штрихи в 1–2 пикселя исчезают. Если логотип линейный, увеличьте толщину специально для иконки.
Никакого текста мелким кеглем. Название сайта в иконке не читается — оно и так есть рядом, в заголовке вкладки.
Проверяйте в уменьшении. Смотрите на превью 16×16 в правой колонке, а не на большую картинку: именно так иконку увидят.

Нужен ли ещё формат SVG

Firefox и Chrome умеют показывать favicon.svg: вектор остаётся чётким на любом экране и может менять цвета по системной теме прямо внутри файла. Но Safari и поисковые роботы по-прежнему надёжнее работают с растром, поэтому SVG добавляют в дополнение, а не вместо. Если у вас есть исходный SVG-логотип, положите его в корень как favicon.svg и добавьте строку:

HTML

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Браузер выберет формат сам: поддерживает SVG — возьмёт его, нет — вернётся к .ico.

Оформляете сайт целиком? Подберите фирменный цвет в конвертере HEX ↔ RGB, сожмите картинки конвертером в WebP, а для офлайн-материалов сделайте QR-код со своим логотипом.

Частые вопросы

Какого размера должен быть favicon?

Нужен не один размер, а комплект: 16 и 32 пикселя для вкладок, 48 внутри .ico, 180 для iPhone, 192 и 512 для Android. Генератор собирает все размеры сразу из одного исходника.

Чем .ico отличается от PNG?

.ico — контейнер, внутри которого лежит сразу несколько размеров, и браузер берёт подходящий. PNG — одна картинка одного размера. На сайте нужны оба: .ico в корне для совместимости и PNG для современных браузеров и мобильных ярлыков.

Можно ли сделать favicon из фотографии?

Технически да, но на 16 пикселях фотография превращается в цветное пятно. Лучше вырезать из неё один узнаваемый элемент или взять букву названия на контрастном фоне.

Почему на iPhone иконка с чёрным фоном?

iOS не поддерживает прозрачность в apple-touch-icon и заливает её чёрным. Генератор автоматически подкладывает под этот файл непрозрачный фон, поэтому проблема не возникает.

Что такое maskable-иконка?

Это версия для Android, где важное содержимое помещается в центральные 72 % изображения. Оболочка телефона обрезает иконку под свою форму — круг, скруглённый квадрат или каплю, — и без запаса края логотипа срезаются.

Мои файлы загружаются на ваш сервер?

Нет. Картинка обрабатывается в браузере: и предпросмотр, и .ico, и ZIP-архив собираются на вашем устройстве. После загрузки страницы генератор работает даже без интернета.

Как сделать разные иконки для светлой и тёмной темы?

Включите переключатель «Отдельная иконка для тёмной темы» — в архив добавятся файлы favicon-dark-*.png и строки с media="(prefers-color-scheme: dark)". Браузер переключит иконку сам, когда пользователь сменит тему системы.

Влияет ли favicon на SEO?

Прямо на позиции — нет, но иконка показывается рядом со ссылкой в выдаче Яндекса и Google и заметно влияет на кликабельность. Для мобильной выдачи Яндекса это один из немногих визуальных элементов сниппета.