Файл favicon.ico

Фавикон – это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере.

Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником.

Файл favicon.ico

Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон.

Что бы браузер ее показал, необходимо:

1. Формат файла ICO/png/gif

да, именно так – там может быть и анимированная картинка в формате gif

2. Картинка должна быть физически на сайте:

2.1 Расположение в корне сайта (в 90% случаев это понимают браузеры и поисковые машины для файла favicon.ico)
Например вот так – в корне сайта.

Файл favicon.ico

Ничего дополнительно указывать не надо – и так все браузеры “знают”, что файл фавикона (именно с расширением .ico) нужно в первую очередь искать в корневой директории.

2.2 Явное указание расположения файла фавикона (или не корневая директория или не ICO)

Например, Вы расположили фавикон в папке image

Файл favicon.ico

Тогда внутри тэгов head указываем

– для ico

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

– для png/gif

<link rel=“shortcut icon” href=“/images/favicon.png” type=“image/png”>
<link rel=“shortcut icon” href=“/images/favicon.gif” type=“image/gif”>

Важно:
никакого закрывающего слеша в конце не должно быть.
Вот так неправильно (но работать будет)
<link rel=“shortcut icon” href=“/images/favicon.ico” type=“image/x-icon”/>

Сноска.

HTML тег <link……….> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет закрывающего тега) и всегда должен располагаться внутри элемента <head>.
Атрибут href определяет адрес документа, который может быть как абсолютным так и относительным.
Атрибут rel указывает связь между HTML файлом и тем, на что Вы ссылаетесь
Атрибут type сообщает браузеру MIME тип документа.

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

Итого
– лучше указывать вариант “shortcut icon” для обычного фавикона
– для анимированного фавикона придется сделать две записи и два файла соответственно (т.к. не все браузеры могут отображать)

<link rel=“shortcut icon” href=“/images/favicon.ico” type=“image/x-icon”> – для всех браузеров
<link rel=“icon”              href=“/images/favicon.gif” type=“image/gif”> – для тех браузеров, которые могут :)

2.3 Указание фавикона через настройки темы в CMS

Конечно, браузеры немного по разному видят эту иконку (с ico, phg, gif обычный = работают все браузеры)

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0 11.0 11.0 Нет Нет Нет Нет
Firefox 1.0 1.0 1.0 Да Да 3.0 Нет
Opera 7.0 7.0 7.0 7.0 7.0 9.5 9.6
Safari Да 4.0 4.0 Нет 4.0 Нет Нет

Необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Можно указать несколько изображений в разных форматах — например, строку с rel=”shortcut icon” и значком в формате ICO для Internet Explorer, и строку с rel=”icon” и значком в формате GIF или PNG для остальных браузеров.

Базовый размер фавикона – 16х16 пиксель.
Но формат ico поддерживает хранение нескольких изображений. Зачем?
Что бы можно было сохранять ссылку на сайт себе на компьютер!

Если делать совсем правильно – в файле ico должно храниться 3 картинки:

формат 16х16 – для отображения иконки в браузере
формат 32*32 – для сохранения ссылки на сайт в панели задач
формат 48*48 – для сохранения ссылки на сайт на рабочем столе

Вот более подробно http://habrahabr.ru/post/260777/
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта.