Все об иконках фавикон (favicon.ico)

Favicon.ico — специальная иконка, которая отображается рядом с адресом вашего сайта в адресной строке браузера, закладках (favorites), результатах поиска от Yandex или, например, на специфических ресурсах (каталогах, социальных проектах). «Зачем это вообще нужно?» — вопрос скорее риторический, поэтому ответы на него могут быть разные и для каждого свои: это красиво, оригинально, помогает выделить ваш сайт из многих других. Конечно, создание favicon — задание не первоочередное при разработке того или иного дизайна, скорее небольшое дополнение. Лично я считаю, фавикон — вещь забавная (интересная) и нужная. В любом случае, ваш проект от этого только выиграет.

Иконка favicon имеет размер 16х16 пикселей, при этом сам файл желательно должен занимать не более 300 килобайт. Из всех браузеров только Internet Explorer не отображает изображение в строке браузера сразу. Фавикон появится там только после добавления сайта в «Избранное».
Для того чтобы установить (подключить) favicon на своем ресурсе, в HTML коде необходимо прописать следующие строки:

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Предварительно сам файл с иконкой необходимо «залить на ФТП» в нужную вам папку. Насколько я понимаю, код выше — стандартный и лучше его придерживаться, хотя, сказать по правде, у меня работает и упрощенный вариант:

<link rel="shortcut icon" href="путь_к_иконке/favicon.ico" />

После того, как разобрались с установкой, рассмотрим создание иконок favicon. Для данных целей существует множество различных простых и не очень офлайновых программ, а также онлайновых сервисов. Еще в прошлом году Уникальный человек рассматривал несколько программных продуктов. В его обзор попали:

• Icon Empire — программа для создания статических или анимированных иконок с глубиной цвета от 1 до 32 бит, а также прозрачных иконок под Windows.
• Icon Magic — простейшая программа для создания favicon по аналогии с редактором Paint.
• Icon Craft — софт для работы с курсорами и иконками, обладающий достаточно мощным функционалом. В отличии от первых двух программа платная и стоит $40.

В принципе, думаю, вы с легкостью сможете найти и другие продукты для создания и редактирования файлов favicon.ico. Я же для этих целей использую всем известный графический редактор Photoshop. Мне кажется, это наиболее удобный вариант: находим в Интернете подходящее изображение, уменьшаем до требуемого размера иконки 16х16 пикселей и сохраняем. Проблема лишь в том, что по умолчанию Photoshop не обладает возможностью сохранять файлы в формате .ico. Для этого требуется установить специальный плагин — единственный файл архива ICOFormat.8bi помещаем в папку где установлен Photoshop (например: /Program Files/Adobe/Adobe Photoshop CS2/Plug-Ins/File Formats).
Кстати, для Photoshop есть еще один плагин по работе с иконками, который позволяет записать в один файл сразу несколько изображений с разными стандартными размерами (16х16, 32х32 и 48х48). Более подробно о работе с ним можно почитать в блоге Никиты Селецкого.

Значимость иконок для сайта дополнительно подчеркивает наличие в РУнете специального ресурса, посвященного данному вопросу — favicon.ru. Сервис существует в сети с 2005 года, за это время на нем было созданного около 180 тыс. иконок. Во-первых, ресурс исполняет информационную роль — там можно почитать о том что такое favicon и зачем он нужен, а также найти подборку ответов на наиболее часто задаваемые вопросы по теме.

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

Пользуясь случаем, хотел поделиться информацией об одной интересной акции, которую проводит некий Константин (под ником wmas). Он предлагает нарисовать каждому желающему бесплатную иконку favicon.ico. Все что требуется взамен — написать о данном щедром предложении у себя в блоге, после чего в комментариях к акции оставить ссылку на собственный пост и пожелания относительно требуемой иконки. Занятно то, что это уже второе подобное мероприятие в блоге Константина. Прошлые результаты меня и вдохновили принять участие в данном действе, посудите сами весьма хорошо сделано:

По такому поводу даже решил взять у автора мини-флэш-интервью:

Привет, откуда у тебя такая тяга к иконкам? я видел на всех твоих проектах множетсво нестандартных изображений)
«Тяга» появилась (наверное) из-за моего каталога блогов — Blogmir.net. Там иконки (favicon) играют не последнюю роль в визуализации информации, как и во многих других сервисах (к примеру: Яндекс, kollegi.zhilinsky.ru, blogosphera.net). Плюс, достаточно малый размер и затрата времени, на их создание, позволяют устроить вполне реальные (по реализации) акции, получить обратные ссылки и т.д.

Ты профессионально занимаешься дизайном?
Нет.

Что по-твоему дает эти иконки, зачем они нужны?
Ответ в первом пункте. А вообще, это наверное как визитка, аватар или что-то в этом роде.

Какими инструментами пользуешься для рисования их?
Photoshop.

Спасибо за интервью и бесплатные favicon!

P.S. Денис Судилковский в своем блоге Бизнес дизайн проводит акцию по обмену ссылками. Кстати, в этом блоге на отдельной странице я привожу некоторые источники где можно заработать в интернете.

При поддержке спонсоров:

• ePochta — все что нужно для эффективной email рассылки.
• Интернет магазин Глазик. Контактные линзы. Доставка.