Как создать фавиконку
Современный favicon — это больше, чем изображение размером 16×16. В этом руководстве описывается подготовка исходного кода, генерация нескольких размеров, настройка HTML, примеры из реальной жизни и исправления проблем, с которыми сталкивается большинство команд.
Что такое favicon?
favicon — это небольшие значки браузеров, отображаемые на вкладках, панелях закладок, списках истории и адресных строках. На телефонах он становится значком на главном экране, когда кто-то сохраняет ваш сайт. На Windows он отображается на значках панели задач и ярлыках на рабочем столе.
Слово происходит от значка «Избранное», но работа вышла далеко за рамки одного GIF-файла размером 16×16. Сегодняшний favicon представляет собой небольшое семейство активов: favicon.ico корневого уровня, дополнительные варианты SVG и PNG, сенсорный значок яблока для iOS и значки манифеста для устанавливаемых PWA.
Пользователи редко комментируют хороший favicon, но мгновенно замечают его отсутствие или размытость. Четкий значок сигнализирует о безупречности и делает вашу вкладку заметной среди двадцати открытых страниц.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Подготовьте исходное изображение
Начните с квадратного изображения размером не менее 512×512 пикселей. SVG с квадратом viewBox идеален, поскольку он легко масштабируется до любого размера растра, который вы экспортируете.
Избегайте тонких штрихов, мелкой типографики и сложных градиентов. В размере 16×16 мелкие детали сливаются в серую кашу. Упростите знак: меньше фигур, выше контраст, больше отступов вокруг глифа.
Если ваш логотип горизонтальный, создайте квадратную обрезку, которая центрирует символ без словесного знака. Буквенные формы высотой менее 8 пикселей редко выдерживают уменьшение масштаба.
Экспортируйте PNG-32 с прозрачностью, если растр — ваш единственный вариант. Запеченный белый фон будет выглядеть неправильно в темном браузере Chrome и на тонированных мобильных программах запуска.
Создайте .ico нескольких размеров.
Объедините кадры размером 16, 32, 48, 64, 128 и 256 пикселей в одном файле favicon.ico. Браузеры и Windows читают заголовок каталога и декодируют только тот размер, который им нужен.
Поместите favicon.ico в корень вашего сайта (/favicon.ico). Даже если вы объявите современные теги <link>, сканеры и старые клиенты по-прежнему будут проверять этот путь по соглашению.
Наш генератор favicon растрирует изображения любого размера на стороне клиента менее чем за секунду. Ваше исходное изображение никогда не покидает браузер, что имеет значение, если знак представляет собой невыпущенный логотип продукта.
Добавьте теги HTML.
Перетащите эти теги в <head> для полной настройки 2026 года:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
В строке SVG четко выделяются Chromium и Firefox. Строка .ico охватывает резервные варианты Safari, ярлыки Windows и программы чтения RSS, игнорирующие SVG.
Реальные примеры
Статический маркетинговый сайт: загрузите PNG вашего логотипа размером 512×512, создайте favicon.ico плюс значок Apple Touch размером 180×180, добавьте четыре строки <link>, разверните его в /public или в корневом каталоге сети. Общее время: менее пяти минут.
React / Приложение Vite: размещайте значки в /public, ссылайтесь на них с помощью корневых путей в index.html. Vite копирует /public без изменений во время сборки, поэтому /favicon.ico корректно разрешается в рабочей среде.
WordPress: пропустите руководство HTML — используйте «Внешний вид» → «Настройка» → «Удостоверение сайта» → Иконка сайта. Загрузите исходник размером 512×512; WordPress автоматически генерирует нужные теги. Советы по очистке кеша смотрите в нашем руководстве WordPress.
Бренд темного режима: экспортируйте SVG, заливка которого переключается внутри @media (prefers-color-scheme: темный). Соедините его с нейтральным резервным вариантом .ico для клиентов, которые никогда не загружают SVG.
Подтверждайте в каждом браузере
Выполните принудительное обновление (Ctrl+Shift+R или Cmd+Shift+R) в Chrome, Safari, Firefox и Edge. Обычные перезагрузки часто сохраняют кэшированный favicon в течение нескольких дней.
Проверьте четыре поверхности: вкладку браузера, панель закладок, «Добавить на главный экран» на iOS и закрепленный значок Windows на панели задач. Каждая поверхность может запрашивать разное разрешение из вашего пакета.
Откройте DevTools → Сеть, отфильтруйте по ico или png, перезагрузите и подтвердите 200 ответов для каждого объявленного вами URL-адреса значка. Одиночная ошибка 404 на apple-touch-icon.png — частая ошибка.
Часто задаваемые вопросы
Нужен ли мне favicon.ico, если у меня есть SVG? Да. Оставьте .ico в качестве универсального запасного варианта. SVG — это усовершенствование, а не замена.
Каков минимально жизнеспособный favicon? favicon.ico нескольких размеров по адресу /favicon.ico. Все остальное улучшает четкость на экранах с высоким разрешением и домашних экранах мобильных устройств.
Могу ли я использовать JPG? Можно, но вы потеряете прозрачность. PNG или SVG почти всегда лучше подходят для значков интерфейса.
Как часто мне следует обновлять favicon? Всякий раз, когда меняется ваша торговая марка. Выполните запрос ?v=2 к тегам <link> один раз, чтобы победить агрессивный кеш браузера.
Поиск неисправностей
Значок не обновляется после развертывания: браузеры кэшируют favicon независимо от HTML. Выполните принудительное обновление, очистку данных сайта или временное добавление ?v=2 к URL-адресам значков.
Размытый значок вкладки: ваш источник был слишком маленьким или неквадратным. Восстановить из 512×512 или SVG; убедитесь, что .ico действительно содержит кадр 32×32.
Белая рамка вокруг логотипа: у источника был непрозрачный фон. Повторно экспортируйте с прозрачностью и заново создайте .ico, используя записи, сжатые с помощью PNG.
Работает локально, но не в рабочей среде: файлы подтверждения находятся в корне общедоступной сети, а не только в src/. Проверьте кеши CDN и пути с учетом регистра на серверах Linux.
Пошаговый контрольный список
Экспортируйте или найдите образец квадрата размером 512×512 или больше. Убедитесь в прозрачности, цветовом профиле sRGB и отсутствии скрытого фонового слоя в вашем файле дизайна.
Запустите мастер через генератор favicon на стороне клиента. Загрузите favicon.ico, favicon.svg, если применимо, apple-touch-icon.png и манифест PNG за один проход.
Загрузите все файлы в общедоступный корневой каталог. На статических хостах это означает ту же папку, что и index.html; в платформах используйте каталог /public или /static, который соответствует /.
Вставьте рекомендуемый блок <link> в <head> перед любыми скриптами, блокирующими рендеринг. Раннее размещение помогает браузерам обнаруживать значки при первой отрисовке.
Выполните принудительное обновление для Chrome, Safari и Firefox. Закрепите вкладку, добавьте страницу в закладки и протестируйте «Добавить на главный экран» на реальном iPhone, если для вас важен трафик iOS.
Задокументируйте набор значков в своем README или системе дизайна, чтобы следующий ребрендинг не начинался с единственного PNG размером 32×32, который кто-то нашел в электронном письме.
Распространенные ошибки, которых следует избегать
При использовании полностью горизонтального логотипа, масштабированного в слот 16х16, текст становится нечитаемым шумом. Обрезать до символа.
Поставляется только PNG размером 16×16, переименованный в .ico, без надлежащего каталога с разными размерами — Windows и вкладки Retina увеличиваются и размываются.
Забудьте о значке Apple Touch и зациклитесь на вкладках на рабочем столе — пользователи iOS составляют значительную долю мобильного веб-трафика.
Указание <link href> на путь CDN, который различается между промежуточной и рабочей средой без сборок с учетом среды.
Предполагается, что WordPress, Shopify или Webflow волшебным образом исправят загрузку источника с низким разрешением. Мусор на входе, мусор на выходе любого размера.