Favicon — иконка вкладки

Добавляем сайту маленькую иконку, которая видна на вкладке браузера и в закладках.

Favicon — маленькая иконка сайта, которую браузер показывает на вкладке, рядом с заголовком и в закладках.

Зачем он нужен

Откройте десяток вкладок — и без иконок вы запутаетесь, где какой сайт. Favicon делает ваш сайт узнаваемым: пользователь находит нужную вкладку по картинке, а закладка с иконкой выглядит профессионально. Это маленькая деталь, которая отличает законченный сайт от «странички на коленке».

Как добавить favicon

Иконку подключают в <head> с помощью тега <link>. Положите файл иконки рядом со страницей и пропишите путь:

<head>
  <meta charset="UTF-8">
  <title>Мой сайт</title>
  <link rel="icon" href="favicon.ico">
</head>

Разберём атрибуты тега <link>:

rel="icon" — сообщает, что это иконка сайта;
href — путь к файлу иконки.

Тег <link> одиночный — закрывать его не нужно. Кстати, этим же тегом позже вы будете подключать файлы CSS.

Форматы иконки

Формат	Особенности
`.ico`	классический формат иконок, поддерживается везде
`.png`	удобен, хорошее качество; популярный размер 32×32
`.svg`	векторная иконка, чёткая на любом экране

Для PNG-иконки тегу обычно добавляют тип:

<link rel="icon" type="image/png" href="favicon.png">

Маленький секрет

Если просто положить файл favicon.ico в корень сайта, многие браузеры найдут и покажут его сами, даже без тега <link>. Но явное указание надёжнее и работает с любыми именами файлов.

Где взять иконку

Рисовать иконку с нуля не обязательно. Есть удобные бесплатные генераторы favicon: вы загружаете картинку или логотип, а сервис выдаёт готовый набор файлов нужных размеров и даже подсказывает, какие теги вставить в <head>. Для учебных проектов подойдёт и простая картинка 32×32 пикселя.

Маленький практический момент: браузеры любят кешировать favicon, то есть запоминать его надолго. Если вы поменяли иконку, а на вкладке всё ещё старая — это нормально. Откройте страницу в новой вкладке или очистите кеш, и появится новая. Не пугайтесь, что «иконка не обновляется» — обычно дело именно в кеше.

Маленькая деталь, которая выдаёт класс

Favicon кажется мелочью, и технически это всего одна строчка в <head>. Но именно из таких мелочей складывается ощущение «сайт сделан аккуратно». Сравните две вкладки: у одной — фирменная иконка, у другой — серый лист бумаги, который браузер ставит по умолчанию. Первая выглядит как настоящий продукт, вторая — как недоделанная заготовка.

Поэтому, заканчивая любой проект, не забывайте про иконку — это один из последних штрихов, который отличает завершённую работу. Заодно повторим, что вы уже знаете про <head>: там собрана вся служебная «обвязка» страницы — кодировка, заголовок вкладки, а теперь и иконка. В следующих разделах этот набор пополнится ещё и мета-тегами, и тогда картина <head> сложится полностью.

Итог

Favicon — иконка сайта на вкладке, в адресной строке и в закладках; делает сайт узнаваемым.
Подключается в <head> тегом <link rel="icon" href="...">.
Подходят форматы .ico, .png, .svg; тем же тегом <link> позже подключают CSS.