О маленькой иконке находящейся перед названием сайта в закладке браузера, знают наверное все. Небольшая картинка в которой редко что-то может разглядеть, стала неотъемлемой частью каждого ресурса. Долгое время к фавикону относились как к неважному элементу и его роль сводилась к добавлению не важно какого изображения, чтобы «там» показывалось хоть что-то. Но в текущее время, когда борьба идет за каждый процент конверсии, favicon не просто играет важную роль, - это отдельный элемент вашего бренда, он влияет на юзабилити и на него смотрят поисковые системы.
Что же такое фавикошка?
Для тех, кто впервые услышал это название и пока не представляет о чем, идет речь, поясняем, favicon это графический микро-элемент (размером 16х16 pix), находящийся в коде сайта и выводящийся в поисковой выдаче около заголовка сайта. Как правило, для него используется логотип или очень простая картинка (цифра, буква, значок). Чтобы поисковые системы и другие сервисы понимали, что добавленный файл это именно фавикон, он должен иметь имя «favicon.ico»
Если углубиться в историю, то поддержка «маленькой иконки» началась в далеком 1999 году, когда новый для сайта формат, полноценно стал работать в интернет-браузере IE 5 (Интернет Эксплолере 5). Первые фавикошки были исключительно техническими элементами, являясь обычной меткой для адресов сайта и выводились в HTML-коде как «shortcut icon». К началу 2000 года «графический ярлычок» уже был официально стандартизирован как часть html-разметки.
Для чего нужен favicon?
Несмотря на свое изначально техническое предназначение, в нынешнее время фавикон добавляется в первую очередь для пользователя, а уже потом для поисковых систем и других сервисов. Давайте рассмотрим, где используется favicon и можно ли без него обойтись.
Позволяет быстрее запомнить сайт. Найти короткий домен сейчас сложно, но если у веб-сайта броский и понятный фавикон, то пользователь запомнит его по этой иконке, даже если доменное имя очень длинное и непонятное.
Быстрый поиск по вкладкам браузера и истории. При большом количестве открытых сайтов, а нередко браузеры содержат по 30-40 активных вкладок, найти нужный ресурс занимает много времени, если у него не установлен запоминающийся фавикон. Аналогичная ситуация и с историей просмотра, где часто быстрее найти знакомый ярлычок, нежели просматривать сотни url’ов.
Выделяет сайт в поисковой выдачи. Favicon в некоторых поисковых системах выводится в сниппете (в России на данный момент в Яндексе). При добавлении запоминающего ярлычка вы выделите свой ресурс, тем самым увеличив кликабельность сниппета и процент конверсии.
Устанавливаем фавикон на сайт
Выбранное изображение необходимо переименовать в favicon.ico. Помните, что в ярлычке лучше использовать png формат, тогда в иконке не будет белого квадратного фона. Самый типовой и универсальный размер - 16х16 пикселей. Он подойдет для большей части веб-браузеров, но помимо него встречаются и другие форматы:
- 32х32 – для Safari и старых Интернет Эксплолеров;
- 57х57 – для iPhone-устройств;
- 72х72 – для планшетов семейства iPad;
- 114х114 – для высоких разрешений Retina-дисплеев;
- 144х144 – для iPad-дисплеев с поддержкой Retina.
Файл «favicon.ico»проверяем на размер и заливаем в корень сайта. Сделать это можно через панель хостинга или любым фтп-клиентом. После заливки необходимо убедиться, что иконка открывается по адресу имясайта.ru/favicon.ico
В HTML коде указываем ссылку на фавикон, используя шаблон <link rel="icon" href="имясайта.ru/favicon.ico" type="image/x-icon">. Обратите внимание, что rel-атрибут практически все браузеры распознают как "icon", но для старых версий IE(если вы хотите, чтобы там так же корректно выводился фавикон) необходимо дополнительно указывать "shortcut icon".
Для портативных устройств и различных сервисов можно добавить свои уникальные rel-атрибуты. Как пример, для Apple устройств прописывают rel="apple-touch-icon". Данный атрибут будет не только корректно выводить фавикошку на айфоновских мобильных устройствах, но так же подгрузит ярлык в список часто посещаемых сайтов в MacOS.
После всех действий необходимо подождать индексации сайта (её можно ускорить поставив главную страницу на переобход в панели вебмастера Яндекса), которая занимает от нескольких дней, до двух недель. Во вкладках браузеров, если все сделано правильно, фавикошка появится сразу.
Какое изображение выбрать для фавикона?
От того, что вы добавите в фавикон, зависит запомнят ли сайт посетители или нет, поймут что за изображение в иконке, или увидят «пиксельную кашу». Давайте рассмотрим все типы фавиконов, встречающихся на веб-сайтах:
-
Простые изображения. Многие компании руководствуются принципом «чем проще – тем лучше» и в этом есть смысл. Доступное и понятное изображения запомнится, когда детализированный графический элемент просто никто не разглядит. Под простыми картинками принято понимать: цифры, буквы, простые фигуры и знаки.
-
Тематическое изображение. Для ряда направлений свойственны свои уникальные обозначения (например «крест» в медицине, «каска» в строительстве и т.п.). Используйте их и не бойтесь, что эта картинка есть у других компаний, ваша задача чтобы пользователь её запомнил и сопоставил с вашим ресурсом.
-
Элементы брендбука. Если компания имеет свой брендбук, то в фавикон можно добавить лого бренда (или какой то его фрагмент). Но помните, сложный логотип на полиграфии выглядит красиво, но на сайте в маленьком окошке это просто будет непонятная картинка.
-
Контрастные картинки. Когда в выдаче у всех сайтов схожие иконки, хорошим решением является контрастное изображение. Не бойтесь отойти от тематики, ваша задача выделиться среди конкурентов. Будьте оригинальны и вас заметят.
Выводы
Несмотря на свой крошечный размер фавикон является довольно значимым элементом сайта. При разработке фирменного стиля его отдельно прорисовывают, а в крупных компаниях маркетологи постоянно экспериментируют с разными фавиконами в поисках лучшей конверсии. Мы не настаиваем на том, что favicon нужно так тщательно готовить, анализируя конкурентов и проводя А/Б тестирования. Но как минимум, добавить его на свой веб-ресурс необходимо и лучше сразу уделить этому время.
