Как добавить значок в HTML
Три тега охватывают большинство сайтов; пять тегов дают вам настройку уровня PWA. В этом руководстве объясняется каждый атрибут, показаны фрагменты копирования и вставки для распространенных стеков, ответы на часто задаваемые вопросы и исправлены проблемы с кэшированием, из-за которых значки кажутся зависающими.
Минимальный тег
Наименьшее допустимое объявление — это одна строка в <head>:
<link rel="icon" href="/favicon.ico">
Браузеры воспринимают rel="icon" как подсказку для получения этого URL-адреса для отображения на вкладках. Относительно корневого пути, начинающиеся с /, сохраняются независимо от пути к текущей странице.
Даже с этим тегом многие клиенты по-прежнему автоматически проверяют /favicon.ico. Храните файл в корне сайта для неявных запросов.
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.
Современный рекомендуемый набор
Для четкого рендеринга на рабочем столе, iOS и вкладках темного режима используйте:
<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">
Порядок имеет меньшее значение, чем полнота. Браузеры выбирают наиболее поддерживаемый тип: SVG, если он доступен, в противном случае — соответствующий кадр PNG или ICO.
Добавьте type="image/svg+xml" в строку SVG, чтобы прослушивание MIME никогда не помечало файл неправильно.
PWA подсказки по установке
Свяжите свой манифест: <link rel="manifest" href="/site.webmanifest">.
Внутри site.webmanifest объявите значки с указанием источника, размеров, типа и назначения. Минимальные полезные записи — файлы PNG размером 192×192 и 512×512.
Дополнительная обработка темы: <meta name="theme-color" content="#0f172a"> выравнивает строку состояния Android с вашим брендом во время установки.
Примеры копирования-вставки
Обычный сайт HTML — вставьте внутрь <head>:
<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">
Next.js App Router — добавьте те же строки в app/layout.tsx внутри метаданных или в блоке <head> вручную. Файлы находятся в папке /public.
Create React App — разместите значки в /public и отредактируйте public/index.html. CRA обслуживает /public в корне домена в производственных сборках.
Понимание каждого атрибута
rel="icon" отмечает кандидата favicon. rel="apple-touch-icon" — это значок главного экрана, предназначенный для iOS. rel="manifest" указывает на JSON с метаданными PWA.
Размеры сообщают браузеру, какое разрешение представляет PNG. Это необходимо для значков PNG, когда вы явно указываете несколько размеров.
href должен быть доступен в рабочей среде. Избегайте прямых ссылок на сторонние CDN для favicon — вам нужен полный контроль во время ребрендинга.
Часто задаваемые вопросы
Могу ли я использовать абсолютные URL-адреса в href? Да, но относительно корневого /favicon.ico проще в промежуточных и рабочих доменах.
Нужны ли мне как rel="значок ярлыка", так и rel="icon"? Нет. rel="icon" является стандартным; ярлык устарел.
Где именно находится <head>? Прямой дочерний элемент <html> перед <body>. Некоторые фреймворки внедряют его через компоненты макета.
Должны ли favicon жить в CDN? Могут, но при миграции обновите все URL-адреса <link> вместе. Пути относительно корня позволяют избежать этой проблемы.
Поиск неисправностей
Значок работает на домашней странице, но не в /blog/slug: вы использовали относительную ссылку, например favicon.ico, без косой черты. Вместо этого используйте /favicon.ico.
Safari показывает старый значок: очистите данные веб-сайта или один раз переименуйте файл. Safari кэширует favicon дольше, чем HTML.
Действителен HTML, но 404 на вкладке «Сеть»: файл не развернут в корне сервера или неправильный регистр (Favicon.ico или favicon.ico в Linux).
SVG игнорируется: отсутствует type="image/svg+xml" или сервер отправляет неверный тип контента. Исправьте сопоставление MIME в nginx или Apache.
Размещение в зависимости от платформы
Vite/Vue/React SPA: поместите значки в /public и укажите /favicon.ico в index.html. Сервер разработки и производственная сборка обслуживают /public в корне домена.
Next.js App Router: добавьте значки в /app через API метаданных или поместите статические файлы в /public. Избегайте дублирования тегов в обоих местах.
Nuxt: используйте /public или настройте app.head.link в nuxt.config.ts для централизованного управления тегами по маршрутам.
SvelteKit: статические ресурсы в папке static/ отображаются в /. Обновите app.html <head> один раз для всего приложения.
Astro: каталог public/ плюс общий компонент Head в вашем макете гарантирует, что каждая страница будет содержать одинаковые теги значков без дрейфа копирования и вставки.
WordPress и другим пользователям CMS могут вообще не нуждаться в ручных тегах — см. наше руководство WordPress, если ядро генерирует для вас разметку Иконка сайта.
Проверка настройки HTML
Просмотрите исходный код страницы на рабочем сервере, а не на локальном хосте, чтобы убедиться, что развернутый HTML соответствует вашему репозиторию. Конвейеры CI иногда внедряют разные макеты в каждую среду.
Используйте Curl для получения каждого URL-адреса значка, возвращенного в <link href>. Статус 200 с правильной длиной содержимого означает, что путь реальный, а не просто объявленный.
Проверка разметки W3C не является обязательной для favicon, но недопустимое вложение <head> (теги внутри <body>) может привести к тому, что браузеры полностью проигнорируют ваши значки.
Запустите аудит Lighthouse PWA, если установка имеет значение — он отмечает отсутствие значков манифеста, даже если вкладки выглядят нормально.
Добавьте страницу в закладки, полностью закройте браузер, откройте его снова и убедитесь, что на панели закладок все еще отображается ваша отметка. Это проверяет поведение постоянного кэша favicon.
Заголовки безопасности и пути к значкам
Content-Security-Policy default-src не блокирует загрузки favicon из того же источника. Для URL-адресов значков из разных источников требуются явные разрешения img-src или default-src.
Целостность подресурса редко применяется к favicon. Хостинг того же происхождения остается самым простым безопасным вариантом по умолчанию.
Если значки находятся в субдомене CDN, используйте абсолютные URL-адреса https:// в href и убедитесь, что CORS не имеет значения — favicon загружаются как изображения, а не извлекаются.
Избегайте данных: URI favicon в производстве HTML. Они раздувают кэш HTML, обходят кэширование CDN и усложняют CSP.
Порядок тегов и дубликаты
Дублирующиеся теги rel=icon с одинаковыми ненужными байтами href, но редко нарушающие рендеринг. Дублирующиеся конфликтующие ссылки href затрудняют отладку — удаляйте устаревшие теги.
Некоторые темы WordPress печатают теги Иконка сайта, а плагины добавляют еще один набор. Используйте «Просмотр исходного кода» для обнаружения дубликатов после установки плагина.
Размещайте ссылки-значки перед большими блоками скриптов в голове. Раннее обнаружение помогает сначала нарисовать, даже если значки загружаются с низким приоритетом.
HTML5 не требует закрывающих косых черт на пустых элементах. И <link ...>, и <link ... /> проверяются.
Унаследованные и крайние случаи
Условные комментарии IE мертвы. Не переносите теги значков устаревших браузеров.
Базовый тег в заголовке меняет относительное разрешение href. Пути значков, начинающиеся с /, невосприимчивы; относительный favicon.ico прерывается на вложенных маршрутах, если установлена база.
Теневой DOM и веб-компоненты не наследуют страницу favicon в теневых корнях — значок уровня документа по-прежнему применяется к вкладке.
Встраивания iframe показывают внедренный документ favicon, а не родительский. Каждому кадру нужны свои теги, если вы управляете обоими.
Локальное тестирование file:// может не разрешить /favicon.ico. Используйте локальный сервер разработки для реалистичного поведения значков.
Букмарклеты и расширения браузера не могут изменить ваш сайт favicon для других пользователей — только ваш локальный Chrome. Используйте правильные теги на стороне сервера.