Тег link rel="icon": объяснение
Тег <link rel="icon"> в <head> страницы говорит браузеру, какой файл использовать как favicon. href указывает на изображение, type задаёт его MIME-тип, а sizes перечисляет пиксельные размеры, которые содержит файл, чтобы браузер мог выбрать лучшее совпадение. Можно включить несколько тегов link с иконкой (по одному на размер или формат), и браузер выберет наиболее подходящий.
Четыре вещи, которые несёт тег
rel="icon" объявляет отношение: этот файл — иконка для документа. href — это путь к изображению. type — это MIME-тип (image/x-icon, image/png, image/svg+xml), который позволяет браузеру пропустить формат, который он не может использовать. sizes перечисляет размеры, содержащиеся в файле, например "32x32", или "any" для масштабируемого SVG.
Браузер читает каждую ссылку на иконку в <head>, затем выбирает ту, что лучше всего подходит под отрисовываемую поверхность: вкладку, закладку, более крупную плитку. Поэтому реальный <head> несёт несколько таких тегов, а не один, и поэтому все они относятся в <head>, до <body>.
Современный набор ссылок на иконки
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Пять тегов, каждый нацелен на своего потребителя. Браузер игнорирует те, что не понимает, и выбирает лучший из остальных.
Что делает каждый атрибут
| Атрибут | Назначение |
|---|---|
| rel | Отношение: "icon" для favicon, "apple-touch-icon" для iOS |
| href | Путь к файлу изображения |
| type | MIME-тип, чтобы браузер мог пропустить форматы, которые не может отрисовать |
| sizes | Размеры, содержащиеся в файле, например "32x32", или "any" для SVG |
Частые вопросы о rel="icon"
Нужен ли атрибут type на ссылке иконки?
Он необязателен, но полезен. type позволяет браузеру пропустить формат, который он не может использовать, не скачивая его сначала. Стоит включать на ссылках PNG и SVG и безвреден везде.
Можно ли иметь больше одного тега link с иконкой?
Да, и обычно так и нужно. Объявление нескольких размеров и форматов позволяет каждой поверхности выбрать ближайшее совпадение вместо уменьшения одного большого изображения для вкладки и увеличения его для домашнего экрана.
Где размещается тег link?
В <head> документа. Браузер запрашивает favicon во время разбора <head>, так что тег, помещённый в <body>, приходит слишком поздно, чтобы быть использованным при первой загрузке.