Набор Favicon, Который Работает Везде в 2026
Шесть размеров, один .ico, один манифест — всё, что вам действительно нужно, чтобы выпустить favicon, который правильно выглядит в каждом браузере, на главном экране iOS и панели задач Windows в 2026.
Favicon кажутся простыми. Добавьте один — и появляются сотни граничных случаев: иконка на главном экране iOS размыта, вкладка Android Chrome неправильного цвета, Windows показывает размытый 16×16. Это руководство разбирается в сложностях и охватывает ровно то, что вам нужно в 2026 — ни больше, ни меньше.
Минимально Необходимый Набор
Шесть ресурсов охватывают все поверхности, на которых будет отображаться иконка вашего сайта:
favicon.ico— контейнер с несколькими размерами: 16×16, 32×32, 48×48 внутри (старые браузеры, Проводник Windows, закреплённые вкладки).favicon-16x16.png,favicon-32x32.png— вкладки современных браузеров.apple-touch-icon.png(180×180) — главный экран iOS, список для чтения Safari.android-chrome-192x192.png,android-chrome-512x512.png— главный экран Android, приглашения установки PWA.site.webmanifest— конфиг PWA, который указывает на иконки Android и определяет цвет темы.
Вот и всё. Всё остальное (SVG для закреплённой вкладки Safari, старые варианты Apple touch, плитки Windows) — это наследие. Современные браузеры корректно переходят на PNG 192 или 512.
Почему .ico Всё Ещё Используется в 2026
Файл .ico — это двоичный контейнер, который может содержать несколько PNG-изображений разных размеров. Когда браузер запрашивает /favicon.ico (что некоторые делают по умолчанию), он получает все три размера в одном запросе. Рендеринг выбирает тот, который подходит для текущей поверхности — 48×48 для Проводника Windows, 16×16 для вкладки браузера.
PNG, переименованный в .ico, содержит только один размер. В основном это работает, потому что браузеры снисходительны, но Проводник Windows и некоторые почтовые клиенты либо отобразят его размытым, либо откажутся его показывать. Используйте реальный .ico, если вам нужна согласованность.
Что Делает site.webmanifest
Когда пользователь добавляет ваш сайт на главный экран Android или устанавливает его как PWA, браузер читает site.webmanifest, чтобы узнать, как должно выглядеть установленное приложение. Он определяет:
name/short_name— метка под иконкой.icons— какие PNG использовать при каком размере.theme_color— цвет строки состояния когда приложение открыто.background_color— фон заставки при запуске.display— обычноstandalone, чтобы приложение открывалось без интерфейса браузера.
Без манифеста Android возвращается к apple-touch-icon и показывает ваш сайт внутри окна браузера. С ним он выглядит как нативное приложение.
Фрагмент HTML
Каждый файл находится в корне вашего веб-сайта. Каждому сайту нужен этот блок в <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">
<meta name="theme-color" content="#YOUR_HEX">Дизайн для 16×16
Ваш красивый подробный логотип погибает на 16 пикселях. Правила для создания favicon, который ясно читается в таком размере:
- Одна форма. Круг, квадрат или сильный монограмм. Избегайте сложных форм.
- Высокий контраст. Переднее и заднее должны быть разделены как минимум на уровне WCAG AA. Тонкие градиенты исчезают.
- Безопасный отступ. Оставьте 10–20% выравнивания. Браузеры часто добавляют свой собственный 1px край.
- Текст? Одна жирная буква лучше работает, чем полное слово при 16px.
Генератор Favicon от aukimi создаёт все шесть файлов и фрагмент HTML из одного изображения или буквы менее чем за 30 секунд. Он генерирует реальный многоразмерный .ico (согласно спецификации Microsoft ICONDIR), а не переименованный PNG. Загрузите, выберите размеры, скачайте набор без zip-архива, вставьте фрагмент — готово.
Типичные Ошибки
- Раздача
.icoс CDN без заголовков кэша. Браузеры агрессивно кэшируют favicon. Используйте версионированный URL (?v=2), чтобы принудить обновление после редизайна. - Разные иконки для каждого поддомена. Один
favicon.icoна вершине — это обычно то, что ожидают пользователи — не разделяйте вашу идентичность. - Забывают мета-тег
theme-color. Mobile Chrome окрашивает интерфейс браузера в соответствии с этим значением. Его отсутствие оставляет вас с серым цветом по умолчанию.
Хороший favicon скучен в лучшем смысле — пользователи замечают когда его нет или он неправильный, никогда когда он правильный. Выпустите шесть файлов и двигайтесь дальше.
Понравилась эта статья?
Похожие статьи
Творческий стек только что рухнул: одна неделя AI-инструментов, конец апреля 2026
С 27 апреля по 4 мая 2026 года Adobe, Luma, Novi, fal, Figma, Canva, HeyGen и Anthropic все пересекли один и тот же порог за восемь дней. Вот что вышло, что это означает и где это оставило браузерные творческие наборы, пытающиеся всё консолидировать.
AI-музыка и звуковые эффекты в 2026: что на самом деле работает в звуке инди-игр
Три года назад звук в инди-играх был либо лицензионными royalty-free библиотеками (дёшево, generics, все игры звучат одинаково), либо нанятым композитором (хорошо, дорого). В 2026 году AI генерирует музыку, которая отправляется в производство. Вот какие инструменты действительно работают — и где человеческий композитор всё ещё побеждает.
Генерация AI-мешей в 2026: Что на самом деле поставляется в игровые конвейеры
Image-to-3D превратилась из «жуткой демки» в «поставка в инди-проекты» за восемнадцать месяцев. Вот что на самом деле делают Tripo, Meshy, Rodin и Hyper3D в продакшене — и где 3D-художник по-прежнему побеждает модель каждый раз.