favicon.ico – подключение

Сегодня решил добавить иконку в адресную строку браузера для этого блога.
С рисованием проблем не возникло. С конвертированием тоже, воспользовался ссылкой опубликованной тут ранее.

А вот чтобы подключить пришлось потратить N-ное количество времени на поиск этого сниппета:

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

Теоретически, иконка может находиться во вложенных каталогах, но я не стал рисковать, т.к. классическое расположение иконки именно в корне сайта.

Полезная инфрмация

1. Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">

2. Плагин для фотошопа, чтобы сохранять формат ICO:
http://htmlbook.ru/sites/default/files/icoformat.8bi

3. Название иконки должно быть favicon.ico, т.к. некоторые старые браузеры не смогут опознать ее именно как ярлык сайта.

4. Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.

5. Размер иконки может быть от 16х16 до 48х48. Большой размер может пригодиться, если, к примеру, пользователь решит добавить ярлык на ваш сайт себе на рабочий стол. Но Internet Explorer не понимает иконки с размером больше 16х16. Выход есть. Формат ICO позволяет сохранять внутри несколько различных размеров. Пользуйтесь этой возможностью.

6. Вы можете также сделать анимированный favicon.gif, но будьте готовы к тому, что его будут воспринимать не все браузеры и скорее всего он не появится в результатах выдачи яндекса для вашего сайта.

7. Если есть необходимость настроить вебсервер Apache для правильной обработки файла favicon.ico, добавьте в файл .htaccess строку:

AddType image/x-icon .ico

Поделитесь с друзьями:



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>