Автор: Антон Кокин
Опубликовано 10 ноября 2006 года
Что такое Favicon? Если вы когда-нибудь сохраняли сайт в виде закладки в браузере, то наверняка видели рядом с адресом этого сайта или рядом с закладкой небольшую иконку.
[206x48]Это и есть favicon (сокращение от слов Favorite Icon). По умолчанию в качестве иконки сайта отображается значок браузера. Однако если веб-мастер задумывается об оригинальности и уникальности своего ресурса, то он обязательно создаст для него специальную иконку. Она позволит в какой-то мере выделиться этому сайту из массы ему подобных. Иметь значок своего сайта хорошо еще и потому, что "Яндекс" в результатах поиска помимо ссылки на сайт показывает и его иконку.
Создать favicon очень просто. Это можно делать в специализированных программах для создания иконок, типа MicroAngelo или IconXP. А можно воспользоваться графическим редактором Photoshop. Не беда, если вы не умеете рисовать. В крайнем случае, можно просто написать первую букву из названия вашего сайта и заключить ее в рамку, более-менее художественно оформив.
Итак, предположим, вы решили создать иконку для своего сайта. Для начала необходимо скачать специальный бесплатный плагин для редактора Photoshop, который позволит открывать и сохранять картинки в формате ICO. Этот плагин называется ICOFormat и доступен для скачивания здесь. Распакуйте архив и сохраните файл ICOFormat.8bi из архива в папку File Formats, которая находится внутри папки с плагинами Plug-Ins. Как правило, эта папка располагается по адресу: C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\, но у вас может быть все по-другому. Теперь запустите редактор Photoshop.
Иконка сайта имеет размеры 16х16 пикселей. Многим сложно что-либо рисовать в таком ничтожно малом квадрате. Конечно, можно увеличить первоначальное изображение до более-менее нормальных размеров. Однако при уменьшении готовой картинки все мелкие детали пропадут.
Создайте пустое изображение с белым фоном и размером 16х16 пикселей. Увеличьте изображение в навигаторе или инструментом Zoom до максимума. Чтобы не тратить время на поиск идеи для нашей картинки, я в качестве примера взял инструмент Shape, выбрал из доступного списка форм "Кошачью лапу" и растянул ее пропорционально (удерживая клавишу Shift) практически на всю область:
[264x265]Затем я объединил все слои и уменьшил навигатором до реального размера. Выглядит не особенно оригинально, но в то же время совсем неплохо для примера:
Теперь нужно сохранить получившуюся картинку как favicon.ico на диске. В меню File (Файл) выберем команду Save as (Сохранить как) и увидим, что среди списка доступных форматов появился дополнительный формат ICO:
[270x268]Завершим работу сохранением файла favicon.ico на сервере в корне сайта и пропишем в заголовках HTML-страниц (как правило, между тегами <head> и </head> ) следующий код:
<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon">
Готово.