Статья

Создание favicon из PNG

Favicon, небольшая графика, которую браузеры отображают во вкладках, закладках и списках истории. Правильное создание favicon, это больше, чем просто изменение размера логотипа: формат .ico упаковывает несколько разрешений в один файл, современные браузеры предпочитают PNG, мобильные устройства имеют свой apple-touch-icon, а манифестам веб-приложений нужен собственный набор иконок. Эта статья охватывает каждую часть и объясняет, как создать весь набор из одного исходного PNG.

Автор: Bastien Sulyan · Опубликовано: 29 июня 2026 г.

Что такое favicon и где браузеры его используют

Слово favicon, это сокращение от "favorite icon" (любимая иконка). Браузеры впервые отображали его в адресной строке в Internet Explorer 5 (1999), затем приняли для закладок. Сегодня он появляется во вкладках браузера, на панели инструментов закладок, в истории просмотра, на странице новой вкладки в некоторых браузерах и на панелях задач операционных систем, когда сайт закреплён. На мобильных устройствах, если пользователь добавляет сайт на главный экран, устройство использует связанное, но отдельное изображение, называемое apple-touch-icon, а не стандартный favicon. Поисковые системы иногда показывают favicon рядом с результатами в своём интерфейсе. Графика намеренно маленькая, что делает её удобной для быстрой визуальной идентификации, но также требовательной к качественному исполнению: при 16x16 пикселях детальный логотип превращается в неразличимое пятно. Сам файл favicon прошёл через несколько форматов за десятилетия, при этом .ico остаётся наиболее широко совместимым, а PNG теперь является современным стандартом для большинства браузеров.

Контейнер .ico: несколько разрешений в одном файле

Формат .ico, это контейнер, а не отдельное изображение. Один файл .ico может содержать несколько растровых изображений с разными разрешениями, каждое из которых хранится как отдельная запись в индексе в начале файла. Три наиболее распространённых размера: 16x16, 32x32 и 48x48 пикселей. Когда Windows отображает favicon в Проводнике или на панели задач, она выбирает запись, наилучшим образом соответствующую контексту отображения. Более старым версиям Windows требовалась запись 48x48 для слотов панели задач с высокой плотностью. Браузеры запрашивают favicon размером 16x16 для вкладок, но могут использовать более крупную запись при обнаружении дисплея с более высокой плотностью пикселей. Упаковка всех трёх размеров в один файл .ico означает, что один HTTP-запрос охватывает все варианты использования. Распространение их как отдельных PNG также допустимо, но требует дополнительных тегов link и добавляет HTTP-запросы. Внутренние изображения в файле .ico, это стандартные данные BMP или PNG, поэтому контейнер добавляет лишь небольшой заголовок для каждой записи.

Дизайн для маленьких размеров: упрощайте знак

При размере 16x16 пикселей у вас всего 256 пикселей. Типичный логотип с текстом или мелкими деталями становится нечитаемым при таком размере. Стандартный подход, создать упрощённый знак: одну букву, абстрактную форму или иконку, представляющую бренд без опоры на детали. Несколько конкретных проблем, которые стоит предвидеть: тонкие линии полностью исчезают при маленьких размерах, особенно на экранах без Retina. Пары букв и детали негативного пространства сливаются в серый шум. Градиенты становятся едва заметными. Высокий контраст между знаком и его фоном, единственный наиболее важный фактор читаемости. Сплошная форма на простом фоне почти всегда читается лучше, чем детальная иллюстрация при 16x16. Размеры 32x32 и 48x48 более снисходительны и могут поддерживать чуть больше деталей, но версия 16x16 должна рассматриваться как обязательное ограничение. Если знак всё ещё плохо читается при 16x16, дизайн требует дальнейшего упрощения.

Современный набор: .ico, PNG-иконки, apple-touch-icon, манифест и теги HTML link

Полная настройка favicon для публичного сайта в настоящее время требует пяти вещей. Во-первых, файл favicon.ico в корне сайта (браузеры напрямую запрашивают /favicon.ico без тега link в качестве запасного варианта). Во-вторых, PNG 32x32 для современных настольных браузеров, объявленный с тегом link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. В-третьих, PNG 16x16 для размера вкладки: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. В-четвёртых, apple-touch-icon размером 180x180 пикселей для закладок главного экрана iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. В-пятых, манифест веб-приложения (site.webmanifest) с PNG 192x192 и 512x512 для Android и прогрессивных веб-приложений. Прозрачность поддерживается в PNG и в PNG-закодированных записях внутри .ico, хотя apple-touch-icon должен иметь непрозрачный фон, поскольку iOS игнорирует альфа-канал и заполняет прозрачные области чёрным.

Работа локально: favicon-generator сохраняет ваше изображение на вашем устройстве

Генератор favicon на этом сайте берёт PNG и создаёт полный набор: многоразрешённый favicon.ico с записями 16x16, 32x32 и 48x48, отдельные размеры PNG для прямого использования с тегами link и apple-touch-icon 180x180. Всё это происходит в вашем браузере с использованием Canvas API и JavaScript-энкодера .ico. Ваше исходное изображение нигде не загружается, оно остаётся на вашем устройстве. Это важно, когда исходный файл является логотипом компании или любым активом, который не должен покидать ваш компьютер до того, как вы определите, куда он отправится. Результат: каждый созданный файл предлагается как отдельная загрузка под стандартным именем. Вы копируете их в корень своего сайта и добавляете соответствующие теги link в заголовок HTML. Если ваш исходный логотип имеет мелкие детали, которые не сохраняются при рендере 16x16, вы можете обрезать или упростить его перед добавлением в генератор или предоставить другое исходное изображение, специально подготовленное для favicon.

Инструменты из этой статьи

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

Нужен ли мне favicon.ico, если я объявляю теги link для PNG?

Да, по двум причинам. Во-первых, браузеры, которые не читают ваш HTML (веб-краулеры, RSS-ридеры, некоторые старые мобильные браузеры), ищут /favicon.ico непосредственно в корне домена. Если этот файл отсутствует, они генерируют 404-запрос при каждой загрузке страницы, что добавляет шум в журналы сервера и небольшой ненужный круговой рейс. Во-вторых, старые версии Internet Explorer распознают только формат .ico и игнорируют теги link для PNG. Предоставление обоих вариантов охватывает все случаи.

Можно ли использовать SVG в качестве favicon?

Chrome и Firefox поддерживают SVG-favicon через `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari не поддерживает SVG-favicon. Поскольку SVG-favicon не зависят от разрешения, они выглядят чёткими на любой плотности экрана, включая дисплеи Retina, без необходимости в нескольких вариантах размеров. Практическая рекомендация: объявите тег link SVG для браузеров, которые его поддерживают, и всё равно включите запасной вариант .ico для полного охвата. SVG-favicon также могут содержать медиа-запрос `prefers-color-scheme` для автоматического переключения между светлой и тёмной версиями.

С какого изображения лучше начать для достижения наилучшего результата?

Квадратный PNG размером 512x512 или больше с прозрачным фоном даёт наибольшую гибкость. Начало с большого размера и масштабирование вниз сохраняет больше деталей, чем начало с маленького изображения. Если ваш основной логотип включает текстовую часть, рассмотрите возможность подготовки отдельной упрощённой версии, показывающей только иконку или знак, поскольку текст не будет читаться при 16x16 независимо от исходного разрешения. Высокий контраст между знаком и его фоном, наиболее надёжный предиктор того, будут ли маленькие размеры читаться чётко.