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

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

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

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

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

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

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

Внимательные читатели заметили, что 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 дисплеях:

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

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

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

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

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

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

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

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

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

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

    Ruslan

Оставить комментарий