Фавикон — это маленькая иконка рядом с названием сайта (точнее 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 в корне сайта.
Подпишитесь в VKontakte - нажмите кнопку | ||
Подпишитесь в Telegram - нажмите кнопку | ||
Наша группа ODNOKLASSNIKI |
Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла
Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)
В Вашем браузере должна быть настроена обработка ссылок mailto
site_post@bk.ru
или просто скопируйте адрес e-mail
Почитать в разделе
ЗАЧЕМ НУЖЕН САЙТ?

(Читать полностью...)
- Всего статей в разделе: 5
- Показано статей в списке: 4
- Сортировка: название по алфавиту
Выбор хостинга

(Читать полностью...)
Как создать домен 3-го уровня

(Читать полностью...)
Основные метатэги

(Читать полностью...)
Сервер доменных имен DNS

(Читать полностью...)