Что такое favicon на самом деле
Favicon, сокращение от английского favorite icon, это маленькая квадратная картинка, которая представляет сайт. Появился он в конце 1990-х как один файл размером 16x16 пикселей с именем favicon.ico, и долгое время этим всё и ограничивалось. Сейчас уже нет. Сегодня тот же логотип должен чётко рисоваться во вкладке браузера на ноутбуке с высоким разрешением, в закладке, на домашнем экране iPhone при 180 пикселях, на устройстве с Android, внутри устанавливаемого веб-приложения и иногда рядом с вашей строкой в поисковой выдаче. Каждому из этих мест нужен свой размер, а некоторым ещё и конкретное имя файла.
Именно поэтому старый совет из разряда "просто загрузи 16x16" сегодня даёт мыльное месиво. Крохотная картинка, растянутая до иконки 180 пикселей на домашнем экране, выглядит нерезкой и в пикселях. Правильный подход другой: начать с одного большого и чистого изображения и сделать из него небольшой набор файлов нужных размеров.
Почему одного размера больше не хватает
Разные поверхности тянут разные иконки. Если понять, куда идёт каждая, список размеров ниже покажется логичным, а не взятым с потолка:
- Вкладки браузера и закладки используют классический favicon, обычно 16x16 или 32x32, причём на современных экранах с высокой плотностью пикселей предпочтительнее 32.
- Домашние экраны iPhone и iPad используют apple-touch-icon 180x180, когда пользователь добавляет вашу страницу на домашний экран.
- Android и устанавливаемые веб-приложения (PWA) используют иконки 192x192 и 512x512, описанные в небольшом файле-манифесте.
- Windows и дисплеи с высоким разрешением выигрывают от промежуточных размеров вроде 48, 64, 96, 128 и 256, чтобы иконку никогда не приходилось сильно масштабировать от исходного размера.
- Результаты поиска могут показывать ваш favicon рядом с заголовком страницы, и это ненавязчиво укрепляет бренд в каждой строке выдачи.
Какие размеры favicon реально нужны в 2026 году
Гадать и генерировать сотни файлов не нужно. Вот практичный набор, который закрывает все массовые браузеры и устройства и точно совпадает с тем, что выдаёт хороший генератор:
| Файл | Размер | Где появляется |
|---|---|---|
| favicon.ico | 16, 32, 48 (несколько размеров) | Универсальный запасной вариант: вкладки, адресная строка, закладки, старые браузеры |
| favicon-16x16.png | 16x16 | Мелкая отрисовка во вкладке и закладке |
| favicon-32x32.png | 32x32 | Стандартная иконка вкладки в современных десктопных браузерах |
| apple-touch-icon.png | 180x180 | Ярлык на домашнем экране iPhone и iPad |
| android-chrome-192x192.png | 192x192 | Домашний экран Android и установка PWA |
| android-chrome-512x512.png | 512x512 | Экран запуска Android и PWA высокого разрешения |
| PNG на 48, 64, 96, 128, 256 px | разные | Дисплеи с высокой плотностью и Windows, чтобы иконка почти не масштабировалась |
Итого одиннадцать файлов: один ICO, десять PNG, плюс небольшой манифест и фрагмент HTML. Делать всё это руками в графическом редакторе занудно и легко ошибиться. Собрать за один шаг и есть весь смысл следующего раздела.
Самый быстрый способ: собрать весь комплект сразу
Вместо того чтобы экспортировать размеры по одному, начните с одного качественного изображения и дайте генератору собрать весь набор. Вот как это работает в генераторе favicon:
- Откройте генератор favicon и загрузите исходное изображение. Подойдёт PNG, JPG, WebP или SVG, причём SVG или крупный PNG дают самый чёткий результат.
- Инструмент обрезает картинку по центру до квадрата и рисует за вас каждый размер: многоразмерный favicon.ico, весь диапазон PNG-иконок от 16 до 512, apple-touch-icon на 180 пикселей и иконки Android на 192 и 512.
- Скачайте ZIP. Внутри все иконки, готовый site.webmanifest для поддержки PWA и Android и небольшой блок HTML, который нужно вставить на сайт.
Загруженное изображение удаляется с сервера после обработки, поэтому логотип, который вы ещё не выпустили, нигде не задерживается. На выходе полный, корректный по стандартам набор иконок из одной загрузки, без графического редактора.
HTML, который вы вставляете, разбираем построчно
Favicon работает только тогда, когда браузер знает, где его искать. Генератор выдаёт вот такой фрагмент, который нужно поместить внутрь <head> ваших страниц:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">Что делает каждая строка:
- Первая строка указывает на favicon.ico, универсальный запасной вариант, который понимает любой браузер, включая старые.
- Две строки с PNG дают современным браузерам более чёткие иконки 32x32 и 16x16 и позволяют выбрать подходящую под конкретный экран.
- Строка apple-touch-icon отвечает за то, что используют iPhone и iPad, когда пользователь сохраняет страницу на домашний экран, чтобы иконка выглядела как у настоящего приложения, а не как размытый скриншот.
- Строка manifest указывает на веб-манифест, откуда Android и устанавливаемые веб-приложения берут свои иконки и данные о приложении.
Загрузите файлы иконок и манифест в корень сайта, чтобы пути выше срабатывали, и дальше браузер всё сделает сам.
Зачем нужен веб-манифест
site.webmanifest это маленький текстовый файл, который описывает ваш сайт как устанавливаемое приложение. Его главная задача применительно к favicon: перечислить иконки 192x192 и 512x512, которые Android и прогрессивные веб-приложения используют для домашнего экрана и экрана запуска. Если вы не собираетесь делать сайт устанавливаемым, манифест всё равно не мешает и держит Android довольным. А если собираетесь, эти две иконки именно то, что ему нужно, и генератор заполняет их за вас.
Как выбрать и подготовить исходное изображение
Самый сильный рычаг качества это то, с какой картинки вы стартуете. Несколько привычек делают каждый сгенерированный размер лучше:
- Начинайте с большого и квадратного. Картинка 512x512 или SVG уменьшаются аккуратно. Крохотный исходник всегда останется крохотным.
- Держите проще. Favicon часто показывают при 16 пикселях. Мелкие детали, тонкие линии и маленький текст на таком размере исчезают. Одна жирная буква, символ или упрощённый знак логотипа читаются куда лучше, чем полный логотип со слоганом.
- Ставьте на контраст. Иконка должна выделяться и на светлой, и на тёмной теме браузера. Высокий контраст между знаком и фоном сохраняет её читаемой везде.
- Следите за полями. Оставьте немного воздуха вокруг знака, чтобы его не обрезало, когда платформа скругляет углы иконки приложения.
Если вы прикидываете, с какого формата стартовать, гайд про WebP против JPEG против PNG разбирает компромиссы, а если вам интересно, что происходит с загруженным логотипом, наша заметка о том, как Convertica обращается с вашими файлами, объясняет сторону приватности.
Типичные ошибки, из-за которых favicon ломается
- Заливать только favicon.ico. Он закрывает вкладки, но не домашние экраны iPhone и не установку PWA. Эти пробелы закрывают apple-touch-icon и иконки из манифеста.
- Неправильные пути к файлам. Если
hrefв тегах не совпадает с тем, куда вы на самом деле загрузили файлы, браузер не покажет ничего. Держите иконки в корне сайта или поправьте пути под фактическое расположение. - Валить всё на кеш браузера. Favicon кешируются очень агрессивно. После добавления или замены иконки жёсткое обновление или заход в приватном окне обычно показывают новую иконку, которую обычная перезагрузка ещё прятала.
- Стартовать с крохотной картинки. Растягивание маленького логотипа до 180 или 512 пикселей даёт мягкую иконку в пикселях. Всегда начинайте с самой большой чистой версии, что у вас есть.
Частые вопросы
Нужен ли ещё favicon.ico или хватит PNG?
Оставьте оба. Современные браузеры спокойно используют PNG-иконки, но favicon.ico остаётся безопасным универсальным запасным вариантом, и некоторые браузеры и инструменты до сих пор ищут его по имени в корне сайта. Полный набор включает оба, поэтому генератор и выдаёт ICO рядом с PNG.
В чём разница между ICO и PNG здесь?
ICO это более старый формат, который может упаковать несколько размеров (16, 32 и 48) внутри одного файла, поэтому он так хорошо работает как единый запасной favicon. PNG хранит один размер на файл, зато поддерживает чёткие качественные изображения и прозрачность, поэтому крупные иконки идут в PNG. Нужны оба, каждый делает то, в чём хорош.
Можно ли использовать прозрачный фон?
Да, и PNG его поддерживает. Прозрачный фон позволяет иконке естественно ложиться на светлую и тёмную темы браузера. Только убедитесь, что у самого знака достаточно контраста, чтобы оставаться видимым на обеих.
Почему мой новый favicon не отображается?
Почти всегда дело в кеше. Браузеры держат favicon дольше большинства ресурсов. Сделайте жёсткое обновление, откройте сайт в приватном окне или проверьте файл иконки напрямую по его URL, чтобы убедиться, что он загрузился. Как только кеш очистится, новая иконка появится.
Нужен ли favicon для SEO?
Это не фактор ранжирования, но favicon может появиться рядом с заголовком страницы в результатах поиска, а это укрепляет бренд и способно поднять кликабельность. Задача маленькая и разовая, а визуальный эффект остаётся надолго, так что пропускать её нет смысла.
Сделайте свой прямо сейчас
Если ваш сайт работает без favicon или с размытым наследием многолетней давности, поправьте это за пару минут. Загрузите логотип в генератор favicon, скачайте ZIP, положите файлы в корень сайта и вставьте фрагмент HTML. Если вам нужен только один файл иконки, а не весь комплект, конвертеры PNG в ICO и SVG в ICO делают эту одну задачу, а оптимизатор изображений поможет сначала подрезать исходную картинку.
