Иконка сайта (Favicon)

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

Также данная иконка показывается в мобильных устройствах, когда пользователь сохраняет её на экран через браузер.

Favicon рекомендуется создавать в размере 16x16 в формате «ico».

Подключение favicon

Чтобы добавить favicon на сайт, достаточно просто загрузить в корневую директорую сайта файл с именем «favicon.ico», и браузеры сами его автоматически подключат.

Также рекомендуется указывать путь к favicon.

<!-- Подключение favicon -->
<link rel="icon" href="/favicon.ico">

<!-- Для IE6-10 (устаревшее) -->
<link rel="shortcut icon" href="/favicon.ico">

Favicon является сокращением от слова «Favorite icon», которая переводится как «иконка для избранного». Первым браузером, который стал использовать иконки сайта, стал Internet Explorer 5 в 1999 году.

Favicon на iPhone (Touch icon)

Когда пользователь сохраняет страницу на экран iPhone, то можно указать внешний вид иконки через мета-тег, со значением apple-touch-icon.

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="apple-mobile-web-app-title" content="Имя сайта">

Мета-тег с именем apple-mobile-web-app-title задаёт название, которое будет находиться под иконкой.

Можно указывать размеры иконок, чтобы при необходимости загружалась нужная (например, там где требуется маленькая иконка, чтобы не загружалась большая).

<!-- iPhone -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- iPhone (X/Plus) -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon120.png">

<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon167.png">

<!-- iPad, iPad mini -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon152.png">

Поддержка Touch icon на устройствах iPhone появилась с версии iOS 1.1.3.

Отладка

Делать отладку, как иконка сайта выглядит на разных устройствах, можно через сервис realfavicongenerator.net/favicon-checker.

На данном сервисе достаточно ввести ссылку на сайт, и он в виде скриншотов покажет, как иконка выглядит на разных устройствах. Также он покажет ошибки, если иконка недостаточно настроена.

Также на данном сервисе можно сгенерировать иконку для всех устройств. При этом во время генерации можно добавить внешний вид (например белый фон).