Янв
28
2013

Разбираемся как работает Favicon.ico

images

Разбираемся как работает Favicon.ico

Впервые favicon появился в 1999 году в браузере Internet Explorer 5 и с тех пор изменилось не многое. Это почти всегда ICO файл, расположенный в корне сайта /favicon.ico, или как это бывает в CMS размещен в папке темы или изображений:

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

favicon- favicon0

Классический favicon.ico это ICO файл 16×16, с 16 или 24-битной цветностью и поддержкой прозрачности. Много позже favicon приобрел размер 32×32, однако старые браузеры уменьшают его до 16×16. В IE10 Metro использует в адресной строке иконку размером 32×32.

ie10-add

Атрибут rel favicon’а это продукт эволюции. В IE5 нужно было обязательно указывать shortcut icon для установления соответствия между страницей и ее иконкой, но потом спецификации HTML определили, что атрибуты указанные через пробел являются 2 атрибутами — shortcut и icon. Затем, в 2010, спецификации HTML5 определили, что необходимо декларировать только идентификатор icon. Получилось, что теперь, во всех браузерах кроме IE, можно не указывать shortcut.

<!-- IE6-10 -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Другие браузеры-->
<link rel="icon" href="path/to/favicon.ico">

Атрибут type для favicon’а так же важен как и для тэга <script>. Как утверждает английская Wikipedia, в зависимости от атрибута type, favicon может не отображаться корректно в IE. В реальности, Internet Explorer заботится только о MIME-типе для ICO-файлов возвращаемым сервером и игнорирует этот атрибут. В этот атрибут можно писать разные типы, или не писать вообще ни чего.

<!-- Работет в IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">

<!-- Работет в IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">

<!-- Работет в IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico">

happy-do Хорошая новость! Годные браузеры поддерживают PNG favicon’ы.

sad-doct Плохая новость! Chrome и Safari в любом случае будут использовать ICO favicon.

Это действительно огорачает, ведь Chrome, Firefox, Opera 7+, и Safari 4+, все они поддерживают PNG favicon, но Chrome и Safari выбирают ICO favicon если предствалены оба формата, в независмости от того, в каком порядке. С другой стороны, IE не поддерживает PNG favicon и проигнорирует его, загрузив ICO версию, и порядок объявления в данном случае тоже не важен.

<!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera (Chrome и Safari могут но не будут) -->
<link rel="icon" href="path/to/favicon.png">

Поскольку PNG не поддерживает несколько разрешений как ICO, то мы можем указать несколько деклараций favicon’а и в атрибуте size указать размеры:

<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

Но какой из них будут использовать PNG-favicon-совместимые браузеры? Firefox и Safari будут использовать последний объявленный favicon. Chrome для Mac предпочтет ICO формат, если его не будет то 32×32 png favicon. Chrome для Windows использует первый favicon размером 16×16, иначе ICO. Если не будет ни того, ни другого, то Chrome загрузит первый объявленный favicon. На деле, Chrome для Mac будет игнорировать 16×16 favicon и использовать 32×32 только для уменьшения его до 16×16 на не-Retina устройствах. Opera, не желая принимать чью-либо сторону, выбирает favicon наугад из всех доступных форматов и размеров :) Мне нравится что Опера так делает.

И это только начало. Пришло время поговорить о повадках Internet Explorer.

lqIAj000 В то время, как IE8-10 будут показывать favicon уже при первой загрузке страницы, IE7 пропускает первую загрузку и показывает favicon только при повторном визите. Хуже всего дела у IE6, который отображает favicon только в случае если сайт добавлен в закладки. Кроме того, IE6 удаляет favicon вместе с кэшем браузера и перестает отображать его в закладках до тех пор, пока Вы снова не посетите этот сайт. Если favicon в IE6 для Вас много значит, то Вы можете принудительно перезагрузить его с помощью небольшого JS сниппета, который лучше всего размещать в условных комментариях:

<!-- Я "люблю" IE6 -->
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->

Итак, как же быть с высоким разрешением? Вы уже задавали себе этот вопрос?

Если все нормальные браузеры поддерживают PNG favicon, а IE только ICO, но ICO favicon все портит в Chrome и Safari, то почему бы не поместить ICO favicon в условные комментарии?

Отличный вопрос, и неплохая идея. Мы могли бы использовать классический 32×32 ICO favicon для IE, и супер гладкий 96×96 PNG favicon для нормальных браузеров.

<!-- Боже, это IE? -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Нормальные браузер? -->
<link rel="icon" href="path/to/favicon.png">

Одна. Большая. Проблемка. IE10 не поддерживает условные комментарии, и не поддерживает PNG favicon. Да, код выше работал бы в старых браузерах Microsoft, но не в их новинке.

Эй, эй, а что если разместить ICO favicon в корне сайта и использовать <link rel="icon"> для PNG favicon’а?

О да. Это win. Слава Интернету! Учитывая все ограничения Chrome, Safari и IE, такой метод позволит каждому браузеру использовать наилучший вариант favicon’а. IE проигнорирует <link rel="icon"> и будет использовать ICO favicon, который найдет в корне сайта /favicon.ico. А нормальные браузеры будут использовать PNG favicon:

<link rel="icon" href="path/to/favicon.png">

А что, если я хочу использовать несколько favicon’ов или моя CMS не позволяет так сделать? Есть другой способ?

Да, но он Вам не понравится.

<!-- Я "люблю" IE -->
<script>
navigator.appName == "Microsoft Internet Explorer" && (function (i, d, s, l) {
	i.src = "favicon.ico";
	s = d.getElementsByTagName("script")[0];
	l = s.parentNode.insertBefore(d.createElement("link"), s);
	l.rel = "shortcut icon";
	l.href = i.src;
})(new Image, document);
</script>

<!-- Для нормальных браузеров -->
<link rel="icon" href="path/to/favicon.png">

Не нравится такое решение? Не все потеряно. Большинство пользователей IE10 по совместительству пользователи Windows 8, а W8 принес нам новый тип иконок для сайтов — плитки.

tile-ico

IE10 Metro может отображать уникальную плитку, в случае если пользователь добавил Ваш сайт на стартовый экран. Плиточная иконка это PNG файл размером 144×144, и лучше всего если с прозрачным фоном. Фоновый цвет может быть задан с помощью шестнадцатеричного RGB цвета (#RRGGBB), именем CSS цвета, или rgb() функцией. Разметка довольно проста.

<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

tile-icp

Итак, давайте соберем все вместе, учтем особенности IE10 и получим итоговое решение.

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!--  /favicon.ico для IE10 -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Вот и все на сегодня!

Если Вы хотите узнать больше о создании favicon’а, то я советую почитать Джона Хикса — Create the perfect favicon

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)