Создание и установка favicon на сайт

Что такое favicon? Как создать favicon и установить на сайт?

Создание и установка favicon на сайтВ этой статье думал по-быстрому рассказать о настройке favicon… Начал разбираться в вопросе и понял, что не всё так просто.

Favicon — это иконка, изображение или значок, которые могут использоваться браузером для отображения в панели закладок. Favorite icon — значки для списка избранного. Favicon позволяет выделить ссылку на ваш сайт среди закладок со стандартными иконками. Этот же значок используют в заголовках вкладок. Человек, у которого открыто много вкладок в браузере, будет быстрее ориентироваться между ними, если каждый сайт будет иметь свою уникальную иконку, так как не надо будет читать текст в заголовке, тем более если открыты страницы с похожими названиями.

О favicon и стандарте изображений ico

В IE в качестве favicon используется изображение в формате ico размером 16х16. ico — это стандарт для иконок в Windows, такие же только большего размера используются на рабочем столе, для программ и типов файлов в проводнике и т.п. ico похож на bmp, поэтому если сменить расширение у bmp картинки на .ico, то браузер сможет использовать её в качестве favicon. Но так делать не стоит! Картинки в bmp формате очень много весят и будут выдавать на сервер лишнюю нагрузку.

Как правильно сделать favicon?

В идеальном случае нужно открыть какой-либо графический редактор, создать документ размером 16х16 пикселей и нарисовать свою иконку. Но… Не у всех из нас есть талант художника-дизайнера, а рисовать иконки это только на первый взгляд лёгкое задание. Кроме 16х16 есть и другие размеры 32х32, 48х48 и т.д., а в продукции Apple используют свой набор форматов 16, 57, 58, 114, 48, 72 и т.п. Правильно под каждый размер рисовать отдельную картинку. Но в нашем случае нам это не нужно.

Возьмём квадратную картинку с запасом 64х64 или больше в формате png, jpg и т.п., а потом её уменьшим до нужных нам размеров. Повторю, что это неправильный подход, но так проще. Чем сжать рисунок? Можно воспользоваться большинством графических редакторов или менеджеров картинок.

Здесь хотел посоветовать какой-нибудь online генератор для изготовления иконок, но те, что присутствуют на первой странице выдачи в Google, мне все чем-нибудь да не понравились :-). То вместо прозрачности чёрный фон вставят, то исказят картинку, то с ошибками сделают перекодировку и при этом нет свободного выбора размера готовой иконки. Существуют оффлайн редакторы иконок, например такой был в качестве дополнительного инструмента в поставке среды программирования Visual Studio 2006.

Итак, для примера у нас есть png картинка 16х16. Чем её преобразовать в ico и стоит ли вообще? Photoshop не умеет сохранять в ico, Paint тоже, но есть бесплатный графический редактор GIMP, который отлично экспортирует изображения в ico и десятки других форматов. Им мы как раз воспользуемся для преобразования нашего изображения png в ico 16х16.

Как настроить favicon на сайте или блоге?

Чтобы favicon начал использоваться на страницах сайта нужно в файл header.php вашего шаблона между тегами <head>…</head> вставить следующий код:

<link rel="shortcut icon" href="<?php bloginfo( 'template_url' ); ?>/images/favicon-16.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="<?php bloginfo( 'template_url' ); ?>/images/favicon-16.png" type="image/png" />
<link rel="apple-touch-icon" href="<?php bloginfo( 'template_url' ); ?>/images/favicon-32.ico" />

Предварительно, конечно, надо залить в папку images вашего шаблона файлы иконок. Я использую favicon-16.ico для старых версий IE и favicon-16.png  для остальных браузеров. А favicon-32.ico — для продукции Apple. Как вы могли заметить большинство версий современных браузеров умеет работать с favicon в разных форматах(png, jpg, bmp, ico, gif и т.п), именно поэтому чуть выше я усомнился в необходимости преобразования png в ico. При выборе формата файла иконки нужно обратить внимание на вес файла и его поддержку браузерами и другими приложениями. Обратите внимание на то, что, например, FireFox умеет отображать анимированные gif в качестве иконок, а IE9 нет.

Сейчас подробнее разберём приведённый выше код. rel=«shortcut icon» — атрибут который в тэге <link>, устанавливает связи страницы с внешними файлами и документами. Используется для указания на favicon, файлы стилей, потоки rss и т.п. rel=«icon» — это для всех браузеров кроме IE, но мы пишем rel=«shortcut icon», тогда IE срабатывает на «shortcut icon», а остальные браузеры на «icon».

href=«…» — путь до файла иконки, можно применять как абсолютные, так и относительные адреса. Кстати, если в вашей теме уже была настроена поддержка favicon, то можно найти соответствующий файл и заменить его на свой с таким же именем. Обычно такой файл называется favicon.ico и помещается в папку images вашей темы. Если не хотите вставлять никуда никакой код, то просто закиньте файл значка с именем favicon.ico в корневую папку сайта. В этом случае по крайней мере IE самостоятельно найдёт нужный файл.

type=«image/png» — тип документа в данном случае изображение в формате png. Для ico соответственно либо type=«image/x-icon» (считается устаревшим), либо type=«image/vnd.microsoft.icon».

На разных страницах одного сайта можно использовать разные favicon. Этот эффект хорошо виден на сайте Google, где каждый сервис имеет свой значок. Для реализации подобной возможности необходимо на нужной странице выводить путь к соответствующему файлу иконки.

Не забывайте подписываться на обновления блога и делиться статьями со своими друзьями и знакомыми. В следующей статье мы поговорим о файлах Robot.txt и Humans.txt.

One thought on “Что такое favicon? Как создать favicon и установить на сайт?”

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

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