Как установить фавикон на сайт?

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

как установить фавикон иконку на сайт

Наверное, вы уже что-то слышали о формате ICO и иконке для сайта favicon, но ничто не стоит на месте и постоянно появляется что-то новое. Эту статью я решил написать, чтобы не только обобщить известные всем вещи, но и дополнить их новинками.

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных), стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Содержание:

  • Формат ICO
  • Файл favicon.ico
  • image/vnd.microsoft.icon vs image/x-icon?
  • BugFix для Internet Explorer
  • Другие графические форматы фавикон
  • Фавикон в HTML5
  • Favicon.ico для мобильных браузеров
    • Фавикон для Apple
    • Фавикон для Android
  • Адрес файла favicon.ico
  • Как установить фавикон иконку на сайт?

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

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

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon.

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon.

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

<!--[if IE]>
<link rel="shortcut icon" href="http://sitename.ru/favicon.ico" />
<![endif]-->

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

<link rel="icon" type="image/png" href="http://sitename.ru/favicon.png" />
<link rel="icon" type="image/gif" href="http://sitename.ru/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://sitename.ru/favicon.gif" />
<link rel="icon" type="video/png" href="http://sitename.ru/animated.png" />
<link rel="icon" type="image/svg+xml" href="http://sitename.ru/favicon.svg" />

Обращаю внимание на то, что для APNG использует MIME-тип video/png, а для GIF (даже анимированного)image/gif. Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml.

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5, подробней читайте тут. Интересным здесь является атрибут sizes, который задаёт размер иконок для визуально отображения в формате:

{шрирана1}x{высода1} [{шриранаN}x{высодаN}] | any

Другими словами, можно перечислить соответствующие размеры через пробел или указать значение any (для всех). В документации HTML5 приводится такой пример:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Например, для Safari на iOS рекомендуется следующий набор отношений:

<link rel="apple-touch-icon" sizes="144x144" href="ipad-retina.png" />
<link rel="apple-touch-icon" sizes="114x114" href="iphone-retina.png" />
<link rel="apple-touch-icon" sizes="72x72" href="ipad.png" />
<link rel="apple-touch-icon" href="iphone.png" />

Если атрибут sizes не указан, используется значение по умолчанию 57x57.

Примечательно и то, что как favicon.ico служит автоматически распознаваемой иконкой для сайта, без указания связи, так и следующие имена будут распознаны автоматически:

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов, используйте ключевое слово precomposed, например:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ipad-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ipad.png" />
<link rel="apple-touch-icon-precomposed" href="iphone.png" />

Здесь тоже имеется набор автоматически распознаваемых имён:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

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

или использовать относительный путь.

Как установить фавикон иконку на сайт?

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

<!--[if IE]>
<link rel="shortcut icon" href="http://sitename.ru/favicon.ico" />
<![endif]-->
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="icon" type="image/gif" href="/favicon.gif" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57×57.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57×57-precomposed.png"/>

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut. Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта (/ – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

Ренат Рафаилевич
Ренат Рафаилевич комментирует...

Мммдаа))) Как всё сложно то оказывается. А на блоггере такая же история должна быть? То есть со всякими там разновидными кодами? Я то просто вставлял картинку обычную в шаблоне там, в блоггере, и думал что этого предостаточно.

Константин Кирилюк
Константин Кирилюк комментирует...

2Ренат Рафаилевич естественно, что всё описанное несёт лишь рекомендательный характер для решения тех или иных задач. Обычно достаточно просто скопировать файл favicon.ico в корневую директорию сайта и всё. Даже что-то прописывать в HTML не нужно.

Игорь Тетерин
Игорь Тетерин комментирует...

Так и делаю, однако например некоторые браузеры так закэшируют иконки что хрен их оттуда выкэшируешь =).. Это Firefox, а кроме того Яндекс вебмастер и тот же pr.cy. Помогает только ручное прописывание иконки под другим именем

Константин Кирилюк
Константин Кирилюк комментирует...

2Игорь Тетерин Если ты о панели закладок в firefox то это даже хорошо. В Chrome постоянная их подгрузка идёт, что не очень удобно. Помню для лисы использовал расширение, но это лишняя нагрузка... так что проще удалить и снова добавить закладку.

Что же до кэширования иконки на тех же вкладках браузера, то тут можно открыть её в отдельной вкладке и сделать Ctrl+F5. Плюс иногда есть возможность подтасовать дату в заголовках через директивы в том же .htaccess и т.п. Много вариантов.