При создании сайта крайне важно обращать внимание на мелочи, которые играют роль не только в плане дизайна, но и в продвижении этого сайта в поисковых системах. Одной из таких мелочей является favicon для сайта. О том, как его создать и какого размера он должен быть мы и поговорим.
Что такое favicon для сайта?
Он представляет собой небольшую картинку, которая будет отображаться во вкладке браузера. Размер favicon составляет 16x16 пикселей. Также эта картинка отображается в результатах выдачи поисковых систем, и если favicon на сайте будет отсутствовать, то рядом с сайтом в выдаче будет пусто. Стоит отметить, что фавикон помогает пользователю отыскать конкретно ваш сайт среди сотни других, поэтому его присутствие на сайте хоть и не является обязательным, но строго рекомендовано. И да, размер favicon не обязательно должен быть 16x16. Некоторые вебмастера делают фавикон размером 32x32 и даже 64x64. Но в своих рекомендациях поисковые системы Google и "Яндекс" пишут, что идеальный размер favicon - 16x16. Поэтому лучше следовать этим советам поисковых систем.
Как создать favicon?
Есть несколько разных способов создания этой картинки. Самый первый и простой способ создать favicon - украсть его, например, из англоязычного сайта.
Допустим, вы создали блог по бытовой технике и полностью настроили его, но остался последний штрих - фавикон. Пишите в поиске Google запрос appliances и смотрите первые 10 сайтов. Фавиконы этих сайтов идеально подойдут вашему новому блогу. Если какая-нибудь картинка вам понравилась, открывайте исходный код страницы и ищите запись favicon.ico. Там будет указан адрес расположениях фавикона. Откройте его и скачайте на компьютер, затем загрузите на сайт и подключите (о подключении ниже).
Второй способ создания favicon размером 16x16 пикселей - использовать специальный сервис генерации фавиконов. Он работает по следующему принципу: вы загружаете изображение (любого размера и расширения), которое подходит для титульной иконки сайта, и нажимаете на кнопку на кнопку Create Favicon. Через секунду получаете готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сервис - Favicon Generator.
Отметим, что данный сервис лишь немного упрощает процесс создания иконок. То же самое можно сделать и самому. Просто найдите картинку, которая вам подходит, измените ее размер до 16x16 пикселей и сохраните с расширением ico. Все это проделывается в течение одной минуты в программе Paint.
Есть и другие онлайн сервисы поиска фавиконов. Там нужно написать ключевое слово, и после этого сервис отобразит различные тематические иконки необходимого размера. В принципе, этот способ тоже предполагает воровство, как и первый. Но ничего страшного в этом нет.
Подключение
Чтобы картинка отображалась в браузере во вкладке и в выдаче поисковых систем, необходимо ее правильно подключить. Для этого файл должен иметь название favicon.ico и располагаться в корневом каталоге, то есть там, где лежат основные файлы сайта.
Чаще всего этих действий достаточно для отображения фавиконов. Поисковые системы (например, "Яндекс") автоматически распознают наличие фавикона в корневом каталоге и используют его в своей выдаче. Однако с "Яндексом" иногда бывают недоразумения. Многие вебмастера жалуются, что фавиконки пропадают из индекса, а затем появляются заново. Чтобы этого не происходило, нужно подключить его.
Для подключения favicon "Яндекс" рекомендует использовать метатег <link> с указанием конкретных атрибутов. Этот тег нужно поместить в раздел сайта <head>.
Весь код подключения должен иметь следующий вид:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Этот код работает для поисковых систем и всех браузеров. Могут быть проблемы с отображением в браузере Internet Explorer, но во всех остальных браузерах отображение будет точным.
Обратите внимание на адрес расположения изображения /favicon.ico. Его можно сделать таким: /favicon.gif. Тогда необходимо в корень сайта поместить изображение с расширением .gif, иначе отображаться фавикон не будет. Как известно, картинки в формате .gif могут представлять собой слайдеры. Этим пользуются вебмастеры и делают при этом анимированные фавиконы для своих сайтов. Выглядит это интересно, но не более того.
Фавикон как инструмент продвижения сайта
Учитывая тот факт, что данная иконка будет отображаться в результатах поиска "Яндекса", использовать ее крайне желательно. Это один из основных инструментов увеличения кликабельности, ведь пользователи, скорее всего, будут кликать на сайт, возле которого стоит привлекательное изображение, а не пустое место.
Поэтому важно не просто использовать любой фавикон, а красивую иконку, на которую пользователям хочется кликнуть. Также ее стоит заменять в зависимости от ситуации. Например, в преддверии Нового Года желательно сделать свой фавикон новогодним, что обеспечит лучшую кликабельность.
Как поисковик "Яндекс" понимает фавиконки?
У поисковой системы есть специальный робот, который отвечает за обновление именно фавиконов. Этот робот по определенному расписанию посещает сайты, запрашивая главную страницу и ищет в коде путь с указанием расположения favicon.ico. Если этот путь он не находит, то пытается загрузить иконку с родительского каталога, поэтому чаще всего достаточно просто файл с названием favicon.ico поместить в родительский каталог. Затем полученная иконка загружается на сервер "Яндекса" и отображается в поиске. Если ее размер будет больше, то он предварительно преобразуется в 16х16, а расширение меняется на png. Робот периодически перепроверяет сайты на предмет изменения фавиконки. Обычно он посещает обновляемые сайты один раз в месяц. Это и видно экспериментальным путем: измените фавикон своего сайта, и приблизительно через месяц он появится в индексах поисковика "Яндекс".
Конфликт иконок
Стоит отметить, что иногда вебмастера сталкиваются с конфликтом фавиконов, из-за чего в индексе появляется то одна, то другая иконка. Такое возможно, если в родительский каталог загрузить одно изображение, а в шаблоне кода страницы указать путь к другому фавикону. Поэтому следите за тем, чтобы у вас не было конфликта между адресами фавиконок.
Теперь вы знаете, что такое фавикон и как правильно его подключить. Конечно, делать это совсем не обязательно, ведь сайт будет работать хоть с ним, хоть и без него. Но в целях поисковой оптимизации и улучшения кликабельности из выдачи поисковых систем его подключение рекомендуется.
