Favicon

Favicon – это иконка сайта или конкретной веб-страницы, которая отображается во вкладке браузера, в закладках браузера и в результатах поиска.

Термин favicon является сокращением от английского выражения FAVorite ICON, которое значило «значок (иконку) для избранного». Значок первоначально использовался в браузере Microsoft Internet Explorer именно как картинка в закладке «Избранного», поэтому и заслужил такое название.

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

Традиционный фавикон характеризуется несколькими свойствами:

• имеет размер 16×16 пикселей,
• имеет формат ICO, реже gif или png,
• хранится в корне сайта.

Для чего нужен favicon?

Фавикон выполняет несколько функций:

• визуально выделяет сайт на фоне конкурентов в результатах выдачи, привлекает внимание к сниппету;
• отражает стилистику или содержание проекта, является элементом брендига
• делает сайт уникальным, узнаваемым, провоцирует уже знакомых с сайтом пользователей перейти на страницу, представленную в выдаче;
• говорит о безупречности сайта, о детальной продуманности проекта, а значит повышает доверие к нему;
• помогает пользователям быстро ориентироваться во вкладках браузера, оперативно отыскивать сайт в списке закладок;
• оставляет в чистом виде логи ошибок (поскольку некоторые браузеры всегда запрашивают данный файл, то в логах часто появляются записи об ошибке 404 из-за не найденного фавикона).

Обязательно ли использовать фавикон?

Маленький и лаконичный favicon придает сайту солидность, является ярким, но не обязательным элементом имиджа. Отсутствие фавикона не является негативным фактором ранжирования. Использование фавикона обычно обусловлено желанием владельца сайта сделать свой проект оригинальным и узнаваемым.

Как сделать фавикон?

Favicon можно получить несколькими путями:

• заказать у дизайнера;
• скачать готовую картинку с сайта, распространяющего коллекции изображений;
• создать картинку с помощью онлайн-сервиса для генерации фавоконов;
• воспользоваться плагином ICOFormat.8bi для Adobe Photoshop;
• подготовить изображение с помощью специальной программы для создания фавиконов.

В онлайн-галереях можно найти множество иконок, сгруппированных по темам, цветам, символам. На каких-то сайтах иконки можно скачивать по отдельности, а на каких-то нужно скачивать большую тематическую подборку изображений целиком.

Интерфейс онлайн-генераторов фавиконов предельно прост. Можно закачать в редактор понравившееся изображение, редактор обработает его и сожмет до оптимального формата. Если картинка получится размытой, то можно рассмотреть ее в увеличенном масштабе и стереть лишние точки или линии. Готовое изображение будет красивым, если редактируемый оригинал будет иметь прямые и четкие линии.

В онлайн-редакторе можно также нарисовать картинку с нуля по точкам. Изображение рисуется в сетке, представляющей, обычно, собой квадрат со стороной в 16 ячеек. Каждая квадратная ячейка сетки после сжатия картинки превратится в одну из точек изображения. Удобная цветовая палитра позволяет выбрать желаемый оттенок для каждого пикселя. Нередко онлайн-генераторы дополняются удобными инструментами для рисования овалов и квадратов и панелью для мгновенного просмотра изображения в том виде, в каком оно будет отображаться в браузере.

Весьма популярны и программы, которые устанавливаются на компьютер и целиком посвящаются изготовлению иконок для сайтов. В основном в них реализована палитра из 16 цветов. Как пример можно вспомнить бесплатную программу Favicon Create.

Создание фавикона в программе Photoshop потребует определенных навыков работы в графическом редакторе. Плагин ICOFormat.8bi позволяет сохранять и редактировать изображения в формате ICO. Тем, кто решил воспользоваться этим способом, лучше рисовать изображение большого формата, а затем уменьшать его до требуемого размера и сохранять в правильном формате.

Требования к иконкам сайтов:

• отсутствие мелких деталей, делающих рисунок размытым;
• соответствие стилистике и тематике сайта;
• приятная гамма цветов;
• предельно ясная и понятная для пользователей композиция;
• узнаваемость использованных символов, запоминаемость изображения.

Как разместить фавиконку на сайте?

Для того чтобы браузеры пользователей отображали фавикон, его нужно поместить в корневую папку сайта – самую верхнюю папку в иерархии файлов сайтов на сервере.

Некоторые темы дизайна WordPress и других CMS поддерживают загрузку фавикона с помощью инструментов в административной панели. В WordPress в таком случае нужно в административной панели зайти в раздел «Внешний вид», выбрать используемую тему и закачать фавикон.

Если такой возможности нет, необходимо воспользоваться FTP-клиентом, таким как Total Commander или FileZilla Client. С помощью FTP-клиента нужно соединиться с сервером, зайти в папку public_html и закачать в нее файл favicon.ico.

Если после размещения иконки на сайте, она не появилась в браузере, значит стоит почистить кеш браузера. Для вызова диалогового окна часто используют клавиши «CTRL» + «SHIFT» + «DELETE». В появившемся окне нужно отметить галочкой пункт «Очистить кеш» и запустить процесс. Также можно открыть сайт в браузере, с помощью которого он еще не просматривался.

Как сделать, чтобы фавиконка отображалась в поиске

Поисковые системы и браузеры автоматически ищут favicon, представленный в формате ICO, в самой верней в иерархии сайта папке. Чтобы подключить favicon, нужно:

1. 1) сохранить иконку в корне сайта;
2. 2) открыть в HTML редакторе заголовок сайта – секцию ;
3. 3) записать между тегами и стандартный код:

В данной формуле аттрибут rel указывает, что файл является иконкой сайта. Microsoft Internet Explorer реагирует на запись «shortcut icon», а остальные популярные браузеры – на слово «icon».

Атрибут href содержит URL, по которому можно найти иконку сайта. Если фавикон был загружен через менеджер медиа-файлов и хранится не в корне сайта, то в поле href нужно указать настоящий путь к файлу.

Атрибут Type сообщает тип передаваемых данных. Вместо "image/x-icon", символизирующий пиктограмму в формате ICO, могут быть употреблены сообщения о других форматах: image/gif, image/jpeg, image/png, image/bmp.

Если favicon корректно размещен, и хоть одна страничка присутствует в результатах поиска, то иконка появится в результатах выдачи после посещения сайта ботом, индексирующим фавиконы.

Как удалить фавикон из поиска?

Для того чтобы сменить фавикон в результатах поиска, нужно вместо файла favicon.ico загрузить другую иконку с тем же названием и дождаться, когда поисковый робот зафиксирует изменения.

Для того чтобы окончательно удалить фавикон из результатов поиска, достаточно просто удалить фавикон с сайта. В течение очередного апдейта робота-фавиконочника, изображение будет удалено из результатов поиска.

Возможные форматы фавиконок

Предпочтительным форматом иконки сайта является ICO. Однако возможно использование файлов с расширением JPEG, GIF, PNG и BMP. Разрешение может быть и 32×32 пикселя, а глубина цвета – 8 или даже 24 бита. Нестандартные форматы позволяют создавать анимированные, подмигивающие пиктограммы и в некоторых случаях оправданы.

Поддержка браузерами

Современные популярные браузеры поддерживают фавиконки во всех вышеописанных форматах. А вот все версии Internet Explorer требуют значок в формате ICO. Если загрузить на сайт пиктограмму с расширением ICO, ее «прочитает» любой браузер.