Всем Алоха! Сейчас увлеченно (надолго ли) работаю над новыми проектами, и в процессе понадобилось найти парочку иконок для сайтов. Тема оказалось довольно увлекательной, и я решил осветить ее в блоге. Под катом, подробнее о том что такое иконка для сайта, как ее нарисовать, где можно взять и как же все таки установить ее к себе на ресурс.
Что такое Favicon
История
В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта. Изначально этим значком был файл с именем favicon.ico, помещённый в корневой каталог веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках. Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок.
Каким должен быть фавикон
Итак, мы разобрались с тем, что такое фавиконы и где они используются. Теперь о том, каким должен быть хороший фавикон.
- Фавикон — должен быть выполнен в том же стиле, что и сайт. Чем больше будет общего у сайта и фавикона — тем лучше.
- Иконка должена быть проста для восприятия, должно быть сразу понимать, что на ней нарисовано. Не стоит пытаться разместить целую картину, достаточно пары узнаваемых элементов.
- Отличный вариант — изображать пиктограмму тематики сайта, но только если эта пиктограмма полностью описывает сайт.
- Желательно делать фавиконы запоминающимися, поэтому будет лучше использовать знакомые пользователю образы, которые он может назвать простым словом.
Онлайн сервисы для создания favicon.ico
Найти сервисы которые помогут уже готовую картинку превратит в изображение формата .ico довольно просто, а вот сервисов которые позволят вам нарисовать иконку с нуля прямо в браузере не в избытке. Один из таких сайтов — www.favicon.cc. Именно он поможет создать иконку для сайта онлайн.
Галереи с готовыми иконками для сайтов
Когда совсем нет времени на создание иконки, всегда можно воспользоваться уже готовыми решениями. Вот набор галерей с уже готовыми иконками для сайтов:
Как поменять иконку сайта
Когда сам файл готов и залит на сервер сайта (обычно в корневую директорию, но можно и в папку с другой графикой), то в коде страницы нужно сделать необходимые дополнения. Внутри секции <head> вписываем:
<br /> <link href="img⁄favicon.ico" rel="shortcut icon" /><br />
Примечание: img⁄favicon.ico — это путь к favicon.
Как отдельным страницам сайта назначить иконки
Ответ — Да, можно! Пропишите в секцию <head> страницы путь к соответствующей ей иконке:
<br /> <link href="/favicon_other.ico" rel="icon" type="image/x-icon" /><br /> <link href="/favicon_other.ico" rel="shortcut icon" type="image/x-icon" /><br />
Но учтите, favicon — это логотип вашего сайта, ваш отличительный знак, по которому сайт легко узнают пользователи, так что назначать разные иконки отдельным страницам целесообразно только если иконки отличаются мелкой деталью, характеризующей данную страницу, а в остальном все иконки похожи на основную иконку сайта.
Как установить анимированную иконку
Это обычный анимированный gif-файл, не имеет никакого отношения к favicon.ico, понимается только браузером Firefox последних версий, вставляется в код страницы так же, как и favicon.ico:
<br /> <link href="/animation.gif" rel="icon" type="image/gif" /><br /> <link href="/animation.gif" rel="shortcut icon" type="image/gif" /><br />
Поддержка браузерами форматов иконки
