Фавикон

Статья обновлена 03.11.2022

Часто при создании и продвижении ресурса можно встретить английский термин favicon. Что это такое? Фавикон является сокращённым сочетанием двух слов: favorites и icon. Что в переводе означает “любимая иконка”. Это изображение действительно важно, потому что отображается как в поисковой выдаче, так и на вкладках браузера. О том, как сделать этот значок для сайта мы и расскажем в этом материале. 

Зачем нужна пиктограмма картинки — фавикон

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

1. Поисковая выдача Яндекс.

2. Вкладки браузера.

3. Панель закладок.

4. История браузера.

Также иконка отобразится на экране мобильных устройств, если пользователь добавит сайт в избранное или поместит его на домашний экран. 

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

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

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

Как сделать из картинки фавикон и каким должно быть изображение

При создании фавиконки необходимо учитывать следующие моменты:

• Изображение должно соответствовать продукту. Например, если сайт посвящён продаже цветов, то отличным фавиконом в данном случае станет лаконичный бутон. 
• Избегайте мелких деталей. Во всех местах, где отображается иконка, размер изображения совсем невелик. Поэтому для наилучшего восприятия выбирайте форму, которую будет видно издалека.
• Картинка должна быть контрастной. Опять же, при маленьком разрешении лучше воспринимаются яркие и контрастные детали.
• Запоминающимся фавиконом может послужить логотип компании, особенно, если он соответствует перечисленным выше требованиям.

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

Размер фавикона для сайта

Фавикон бывает в нескольких стандартных размерах, которые объединяет одно — изображение должно быть квадратным. Пиктограмма может быть загружена как иконка для сайта 16х16, 60х60, 32х32 и так далее. Основная масса плагинов и систем самостоятельно подгоняет загруженный файл под необходимый размер. 

Основное требование к загружаемому файлу — это разрешение ICO. Итоговое его название должно выглядеть следующим образом «favicon.ico».

Создание фавикон онлайн

Иконку можно создать при помощи графических редакторов, а для упрощения процесса можно воспользоваться одним из онлайн-генераторов. Например favicon.by. Тут можно загрузить уже имеющееся изображение в формате png, самостоятельно нарисовать фавикон или воспользоваться базой изображений.

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

Готово! Теперь пользователям просто ориентироваться во вкладках и ваш ресурс точно не останется незамеченным.