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

Что такое фавикон и где он отображается

Фавикон – небольшое изображение или пиктограмма, которую можно заметить рядом с названием сайта или открытой вкладкой. Термин происходит от английского «favicon» (favorite icon) и изначально использовался для метки сайтов в меню «Избранное» браузера Internet Explorer.

Фавикон представляет собой индивидуальную иконку сайта. Если раньше он использовался исключительно для закладок страниц, то сейчас область применения значка постоянно расширяется.

Где отображается favicon:

• панель закладок;
• избранные страницы;
• адресная строка;
• поисковая выдача Яндекса;
• контекстная реклама;
• в качестве ярлыка приложения на мобильных платформах.

Яндекс – не единственная поисковая система, где отображается иконка сайта. О желании ввести иконки уже заявили в Google, но пока это реализовано на уровне закладок пользователя.

Для чего нужен фавикон

Роль элемента заключается в повышении удобства пользователя. Графическая информация лучше усваивается, к тому же знакомство с площадкой начинается именно с ее значка. Отсутствие иконки снижает узнаваемость ресурса.

Какое влияние оказывает фавикон на развитие и продвижение сайта:

1. Повышение кликабельности ссылки в поисковой выдаче.
2. Информативное содержание: через значок можно передать тематику площадки или продемонстрировать фирменный логотип.
3. Упрощенная навигация для пользователя. Информативное изображение снижает вероятность ошибочного захода, что положительно отражается на показателе отказов и средней продолжительности нахождения на сайте.
4. Брендинг: видя знакомый значок, посетитель может кликнуть по нему, даже если он не находится в верхней части списка выдачи. Имидж проекта или отдельной компании действует в обе стороны, поэтому негативный опыт пользователя может стать причиной его отказа переходить по ссылке.
5. Помощь в поиске сайта в закладках и избранных ссылках. Визуально лучше воспринимаются значки, чем текст. Это экономит время на поиски нужной страницы.
6. Выделение площадки. Можно считать фавикон персональным идентификатором. В случае его отсутствие, ресурс имеет вместо иконки стандартный значок браузера. Это средство уникализации проекта.
7. При наличии нескольких сайтов у вебмастера, иконка упрощает их поиски в выдаче поисковой системы, меню закладок и так далее.

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

Каким должен быть favicon

Главными требованиями к изображению являются его уникальность и запоминаемость. Без этого теряется смысл использования иконки. В идеале значок должен отображать суть проекта, вызывая ассоциации с площадкой или ее направленностью. Вместить смысловую нагрузку в компактное изображение не так просто, как это может показаться.

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

• freshfavicon.com;
• thefavicongallery.com;
• faviconka.ru.

Идеальный фавикон обладает такими свойствами:

• ассоциативность;
• простота;
• понятность для аудитории;
• оригинальность.

Эти критерии относятся к внешнему виду графического идентификатора. Фавикон отличается от обычных изображений, имея свои стандарты оформления. Если отклониться от требуемых форматов, favicon может не отображаться или отображаться некорректно. Заменить иконку ресурса возможно оперативно, но в поисковой системе Яндекса смена (и появление) фавикона происходит в течение 3-4 недель. Все это время изменить значок в поисковой выдаче невозможно – обращение в службу поддержки не поможет, процесс осуществляется автоматически.

Стандарты оформления для favicon:

1. Разрешение изображения – квадрат с размером сторон, кратных 8. Рекомендуемое разрешение для десктопной версии 16х16, но присутствует возможность использования и других размеров: 24х24, 32х32 и так далее. Для удобства использования иконки в качестве приложения на мобильных платформах рекомендуемое разрешение значка 120х120 и 180х180.
2. Стандартное расширение для файла favicon – ICO. Кроме этого варианта допускается использование других графических форматов: PNG, GIF, JPEG, SVG. В некоторых ситуациях целесообразно создавать иконку в формате PNG вместо классического ICO, что объясняется возможными проблемами с масштабированием.
3. Картинка должна быть четкой и без размытых участков.
4. Иконка должна быть уникальной – это одно из условий добавления значка в поисковую систему Яндекса.

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

Как получить favicon для сайта

Существует несколько вариантов сделать это:

• самостоятельно нарисовать значок;
• использовать специализированные конверторы;
• разработка иконки в Фотошопе и других редакторах;
• заказ услуги отрисовки фавикона у специалистов.

Рассмотрим возможности каждого из методов.

Самостоятельная отрисовка

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

Популярные сервисы для отрисовки фавиконов:

• favicon.cc;
• onlinefavicon.com;
• favicon.by.

Функциональность предложенных редакторов схожа, а процесс рисования выглядит просто и понятно.

Онлайн-конвертеры для преобразования графики в favicon

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

Помимо предложенных ранее сервисов, для конвертации в форматы фавикона подходят:

• image.online-convert.com;
• icoconverter.com;
• fconvert.ru;
• инструмент от PR-CY.

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

Adobe PhotoShop

Конвертацию и/или отрисовку можно выполнить самостоятельно в графических редакторах, среди которых наиболее популярным является Фотошоп. Недостаток метода в том, что базовое приложение не имеет возможности сохранить картинку в формате ICO, но с другими расширениями проблем нет. Если возникла необходимость получения иконки именно в ICO, то необходимо установить отдельный плагин. Для установки выбранного плагина нужно перенести его файлы в директорию Фотошопа, в папку …\Plug-ins\File Formats. После этого появится возможность сохранять изображения в формате ICO.

Заказ услуги

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

Где можно заказать создание фавикона для сайта:

1. Специализированные веб-студии. Самый дорогой и надежный вариант.
2. Подключение дизайнер-фрилансера. Бюджетное решение, где качество результата зависит от навыков исполнителя.
3. Биржи фрилансеров. Для составления заказа требуется ТЗ, иначе процесс разработки может затянуться надолго. Альтернативный вариант предложен на площадке FL.RU, где заказчик может организовать конкурс, получив сотни вариантов на выбор.

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

Как установить фавикон на сайт

Инструкция по установке достаточно проста, и для этого требуется выполнить несколько шагов:

1. Зайти в файловый менеджер на хостинге или использовать FTP-клиент Filezilla.
2. Открыть корневую директорию сайта.
3. Перенести файл favicon с заменой существующего.

И на этом все, если ранее отображение фавикона было подключено. Проверить замену можно при открытии любой страницы сайта. Возможно, значок не изменится сразу – это объясняется загрузкой картинки из кеша. Увидеть новый значок можно после очистки кеша браузера или использования другого веб-клиента.

Как подключить графический идентификатор

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

Инструкция по установке отображения значка сайта:

1. Открыть редактирование файла header.php.
2. Найти область head.
3. Прописать код: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />.
4. Сохранить изменения.

Эта инструкция подходит для взаимодействия с большинством современных браузеров, но рекомендуется дописать еще строки для отображения иконки в отдельных случаях:

1. Для IE: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» />.
2. Для iOS: <link rel=»apple-touch-icon» sizes=»(размер)» href=»/apple-touch-icon-(размер).png»>.
3. Для Android: <link rel=»icon» type=»image/png» href=»/favicon-(размер).png» sizes=»(размер)»>.

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

Возможные проблемы с отображением и способы их устранения

Перечислим распространенные варианты ошибок, которые приводят к тому, что графический идентификатор сайта не появляется:

1. Использование неподходящего разрешения. Если размер картинки кратен 8, но не отображается, то стоит попробовать стандартное значение – 16х16.
2. Несовместимость формата. Как и в предыдущем случае лучше проверить работу стандартного расширения – ICO.
3. Яндекс не отображает значок. Есть две причины: или поисковый робот еще не занес иконку в каталог системы, или изображение не соответствует стандартам – не уникально, плохого качества или размыто.

В некоторых случаях поисковая система Яндекса не загружает favicon сайтов, которые занимают низкий рейтинг – далее сотой позиции.

Самостоятельно проверить загруженный роботом идентификатор можно, прописав в адресной строке браузера: http://favicon.yandex.net/favicon/www.(доменное имя сайта).

Подведем итоги

Фавикон площадки – важный элемент, аналогичный визитной карточке. Функциональность значка больше, чем может сперва показаться. Иконка создана, чтобы упростить пользователям и вебмастерам навигацию и поиск нужной страницы.

Хороший favicon вызывает ассоциации, несет смысловую нагрузку и помогает понять специфику ресурса. Это отражается на поведенческом факторе. Графические элементы легче запоминаются, что отражается на узнаваемости площадки и бренда.

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