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

Именно иконки помогают найти нужную вкладку или привлечь внимание посетителей из поисковиков.

Как подключить favicon?

Универсальный вариант

Этот вариант будет работать во всех браузерах:

<link rel="shortcut icon" href="/favicon.ico" />

Файл .ico должен быть размером 16×16 или 32×32.

Другие варианты

<!-- Все браузеры, но IE 9.0+ -->
<link rel="icon" type="image/vnd.microsoft.icon" href="/image.ico" />

<!-- Все браузеры, но IE 9.0+ -->
<link rel="icon" type="image/x-icon" href="/image.ico" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" href="/image.ico" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" type="image/gif" href="/image.gif" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" type="image/png" href="/image.png" />

Внимательные читатели заметили, что shortcut в rel параметре присутствует только для IE ниже 9 версии.

Кроме того

Зачастую, браузеры ищут иконку в корне сайта и без объявления ее в коде страницы. Таким образом, если вы не указывали favicon.ico через html-тег, но она находится в корне сайта, то браузеры будут все равно ее отображать.

Поддержка форматов иконок

Mozilla Firefox:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;

Google Chrome:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;

Apple Safari:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;;

Internet Explorer:
.ICO, .PNG*, .GIF*, Анимированный .GIF, .JPEG, .APNG;

Opera*:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG***;

——————

* — Только с версии 11.0
** — Только с версии 7.0
*** — Только с версии 9.5

Другие размеры и иконки для смартфонов

Для устройств от Apple разработчики предлагают создать несколько иконок разного формата. Одни будут использоваться в iPhone, iPad, другие в iMac и MacBook. Ну и конечно, высокое разрешение иконок нужно для корректного отображения на Retina дисплеях:

<link rel="apple-touch-icon" href="/icons/apple-icon-57.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180.png">

А для телефонов под управлением Android можно указывать иконки в разрешениях 120×120 или 192×192:

<link rel="icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="icon" sizes="128x128" href="/icons/icon-128.png">

Готовый шаблон

Вот такой готовый код для быстрой вставки favicon на сайт для всех устройств:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<link rel="apple-touch-icon" href="/icons/apple-icon-57.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180.png">

<link rel="icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="icon" sizes="128x128" href="/icons/icon-128.png">

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

Уделяйте внимание мелочам! Именно из мелочей складывается общее ощущение и восприятие.


1 комментарий

  • Ruslan

    Эхх, только поставил лайк и хотел сказать спасибо за статью где подробно описано, как раз то, что я искал, НО…

    Как вебмастер Вы наверняка заметили, что данная сфера очень стремительна… От сюда вопрос:

    Где дата публикации статьи?
    Может она написана в 2011, когда работали сапо ссылки (кто долго в теме, тот поймет)…

    Может это уже устарело, дополнено или вовсе перестало работать…
    А в целом очень хорошо %)

    ПС: Цитирую Вас — «Уделяйте внимание мелочам! Именно из мелочей складывается общее ощущение и восприятие.»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*

*

*