четверг, 11 марта 2010 г.

Фавиконы (favicon) для Blogger - проблемы и решения

Не так давно, в посте "10 шагов к автономности Blogger" я определил одим из шагов к этой самой "автономности", установку собственной фавиконки (favicon). Поскольку я бездельник, на этом блоге ее отродясь не было, но знакомому как-то года полтора назад ставил. Сейчас же, все началось после того как у одного из комментаторов, возникли проблемы, это заставило меня испытать рецепт на себе. В ходе реализации я столкнулся с рядом мелких проблем, но обо все по-порядку.

Классический способ установки favicon на сайте подразумевает размещение картинки размером 16х16 (или 32х32, 64х64) формата ".ico" в корневой папке сайта, с последующей вставкой внутрь тега "head" кода вида:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

В этом случае нужно решить по сути одну проблему - слепить фавикон и назвать его "favicon.ico". Такие вещи как собственный хостинг подразумеваются.


 Фавиконку сделать совсем не сложно, мне проще всего набросать в фотошопе, сохранить в ".gif", а потом конвертировать в ".ico" с помощью сервиса favicon.ru или IconJ.

После этого нам, вроде бы, остается только загрузить картинку на хостинг и поставить код, но у пользователей Blogger на этом этапе могут возникнуть проблемы.

Во-первых, большинство чисто картиночных хостингов не позволяют загружать ".ico". Та же Пикаса (которую я по незнания рекомендовал) и широкоизвестный Photobucket, не подходят (загрузить "ико" можно на такие сервисы, как Image Boo).

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

Я не берусь говорить что тому виной - мои кривые руки или совместимость браузеров (раньше-то я помню все работало), но я остановился на альтернативном варианте установки favicon.

Альтернатива заключается в том чтобы использовать не ".ico" формат, а ".gif" или ".png". Все современные браузеры поддерживают фавиконки таких форматов, единственное, следует указать формат иконки в коде. Т.е., вместо предложенного мною в предыдущем посте:
<link rel="shortcut icon" href="адрес вашей фавиконки"/>
Лучше использовать код вида (ставится внуть тега head, можно поставить сразу перед /head):
<link href="адрес вашей фавиконки" rel="icon" type="image/gif"/>

Тем более это многое упрощает - вы можете закончить на фотошопе, и сразу загрузить на "Пикасу" (др. популярный сервис на ваш выбор).

В отличие от "классического" способа (с ico), данный вариант у меня пока никаких проблем не вызвал.

Еще читать:
Какие посты самые ретвитные?
Инструкция по низкочастотным ключевым словам

Читайте по теме