Фавикон – это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере.
Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником.
Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон.
Что бы браузер ее показал, необходимо:
1. Формат файла ICO/png/gif
да, именно так – там может быть и анимированная картинка в формате gif
2. Картинка должна быть физически на сайте:
2.1 Расположение в корне сайта (в 90% случаев это понимают браузеры и поисковые машины для файла favicon.ico)
Например вот так – в корне сайта.
Ничего дополнительно указывать не надо – и так все браузеры “знают”, что файл фавикона (именно с расширением .ico) нужно в первую очередь искать в корневой директории.
2.2 Явное указание расположения файла фавикона (или не корневая директория или не ICO)
Например, Вы расположили фавикон в папке image
Тогда внутри тэгов 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
После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».
Тип файла для сохранения иконки
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта.
