Как создать иконку сайта favicon.ico и зачем она нужна?

У большинства сайтов имеется пиктограмма, отображающаяся в браузере во вкладке, в списке закладок, в адресной строке. Иконку сайта отображают поисковики в результатах запросов. Любой разработчик сайта, если относится к этому делу со всей серьёзностью, обязательно сделает иконку. Пиктограмма всегда называется favicon.ico и располагается обычно в корневой папке сайта.

Пиктограмму сайта называют также иконкой, значком, маркером. Формат файла с иконкой сайта аналогичен обычным иконкам, использующимся в Windows, например, на Рабочем столе, и имеет расширение ICO. Пиктограммы сайта могут храниться как в отдельном файле в корне сайта, так и в .dll или .exe файлах.

Если нет возможности разместить файл favicon.ico в корневом каталоге сайта, можно указать браузеру на расположение иконки сайта. Для этого в html-коде страницы в заголовке добавляем следующую строку:
<link rel=«icon» href="url-адрес/favicon.ico" type=«image/x-icon»>
<link rel=«shortcut icon» href="url-адрес/favicon.ico" type=«image/x-icon»>
Здесь вместо url-адрес нужно вписать абсолютный адрес к файлу favicon.ico.

Размер иконки сайта составляет 16х16 пикселей. Как видим, это очень маленькое изображение, так что детальный рисунок уместить в 16 пикселей не представляется возможным. Именно поэтому иконки сайта всегда простые, с небольшим количеством цветов. Хотя ничто не мешает сделать иконку большего размера, например 32x32 или 48x48, но в этом случае браузер сам уменьшит размер до 16x16 и в результате изображение может только ухудшиться. С другой стороны, если пользователь переносит пиктограмму сайта на свой Рабочий стол, чтобы иметь ссылку на сайт всегда под рукой, размер 32x32 становится более удобным. Глубина цвета у иконок обычно 4, 8 или 32 бита что соответствует 16 цветам, 256 или TrueColor.

Наиболее предпочтительный вариант для иконки сайта – 16-цветная с размером 16x16 пикселей.

Заметим, что некоторые современные браузеры поддерживают анимированные пиктограммы сайта в формате GIF и PNG. Наверняка в сети встречались сайты с анимированными иконками, что сразу обращает внимание пользователя.

Выяснив все технические вопросы, перейдём к практическим.

Как сделать иконку сайта? Тут есть два пути. Либо рисуем пиктограмму самостоятельно, либо ищем в сети наиболее подходящее изображение, чтобы потом обработать его в любом графическом редакторе.

Наиболее подходящими будут редакторы иконок, ведь они «заточены» под создание небольших картинок и позволяют открывать и сохранять в формате ICO. Можно порекомендовать графические редакторы IcoFX или IconCool Studio. Хотя с этой задачей вполне могут справиться и такие известные программы, как Adobe Photoshop или Paint. Если редактор умеет сохранять в формате ICO, замечательно. В противном случае сначала можно сохранить иконку в формате JPG, BMP или PNG. А потом уже переконвертировать её в ICO. Для этой цели более всего подойдёт онлайновый сервис favicon.ru/. Описывать подробно работу с сервисом не будем, так как всё предельно просто и понятно. Если вкратце, то загружаем файл в онлайн-редактор, нажимаем [Создать favicon.ico!], потом [Редактировать иконку] и указываем пиксели, которые будут прозрачными, потом жмём [Сохранить изменения] и [Create favicon]. Нам будет предложено скачать файл, что мы и делаем.

Последнее, что остаётся – это скопировать файл favicon.ico на свой сайт. Сделать это можно либо по FTP, либо через C-panel. Некоторые CMS также позволяют загрузить иконку сайта.