Favicon («favorite icon», или «иконка избранного») - значок сайта или страницы, которая отображается:
- В результатах поисковой выдачи, рядом с адресом сайта;
- В вкладке браузера;
- В закладках, рядом с названием сохраненной страницы;
- На рабочем столе или главном экране мобильного устройства;
- В истории просмотров.
В этой статье, основной целью создания фавикона станет выделение сайта среди конкурентов в поисковой выдаче и поднятие CTR (кликабельности).
Как выглядит фавикон в выдаче Яндекс
Как выглядит фавикон в выдаче Google
Создаем фавикон, который повысит CTR:
Примечание: Наличие favicon не оказывает прямого влияния на позиции в поисковой выдаче. Однако его проработка актуальна, чтобы привлекать больше трафика, увеличивая вероятность клика по сайту, даже будучи на низкой позиции.
На сайты без фавикона кликают реже, так как они вызывают сомнение
1. Выбор фавикона
По стандарту многие создают фавикон, исходя из логотипа компании. Это логично, особенно если вы популярный бренд. Однако, важно помнить, если ваш бренд еще только зарождается или не является широко известным, лучше выбрать элементы, которые привлекут внимание и повысят кликабельность вашего сайта с поисковой и рекламной выдачи.
При выборе фавикона для сайта учитывайте следующие ключевые моменты:
1.1. Уникальность и привлекательность: Важно создать фавикон, который будет выделяться среди других и привлекать внимание пользователей. Это могут быть символы, абстрактные формы или другие креативные элементы, которые подчеркнут индивидуальность вашего сайта и вызовут интерес у посетителей.
Примеры выделяющихся фавиконов
1.2. Простота и четкость: Выберите форму или символ, который будет легко связать с тематикой сайта. Слишком сложное изображение никто не разглядит. Подберите фавиконку, где будет минимум деталей, 1-2 цвета, чтобы он был четким и различимым даже на устройствах с низким разрешением экрана.
Сразу дают понять тематику сайта
1.3. Оригинальность: Банальные и заезженные иконки лучше не использовать, так как ваша цель выделиться, а не стать копией конкурента
Примеры фавиконов:
- Если ваш бренд уже узнаваем, вы можете использовать элементы логотипа или символ бренда (как в примере онлайн школы выше, это был дракончик);
Фавиконы, которые показывают бренд
- Для сайта о кулинарии фавиконом может быть изображение кулинарного инструмента или продукта, такого как кухонный нож, фрукт или готовое блюдо;
- Для технологического сайта фавиконом может быть символ компьютера, микросхемы или электронного устройства;
- Для магазина одежды фавиконом может быть изображение стилизованной одежды, аксессуаров или модной иконы.
- Для сайта о путешествиях фавиконом может быть изображение глобуса, чемодана или символического места путешествия.
- Для нейтральных сайтов можно использовать стрелку, указывающую на адрес сайта, знак official, иконка зелёной галочки и т.д.
Для примера: Рассмотрим сайт сервисного центра, которому требуется создать фавикон. Я хотел, чтобы он отображал, что это официальный сервисный центр, поэтому решил поискать элемент, который вызывает у людей такое чувство. После 10 минут мозгового штурма я понял, что синяя галочка в Instagram способна вызвать такую реакцию.
⭐ Результат этапа: Придумать фавикон, который не только отражает тематику и характер сайта, но и привлекает внимание пользователей, повышая кликабельность сайта в поисковой и рекламной выдаче.
2. Формат изображения
Важно отметить, что в справке поисковых систем рекомендуется использовать формат SVG для создания фавикона. Это связано с тем, что SVG:
- Обеспечивает высокое качество изображения, которое сохраняется при любом масштабировании, что особенно важно для отображения в поисковой выдаче.
- Масштабируемость SVG позволяет фавикону выглядеть чётко и профессионально на различных устройствах, что создаёт позитивное впечатление у пользователей и увеличивает кликабельность.
Таким образом, SVG обеспечивает более чёткое изображение фавикона по сравнению с JPEG и PNG, что способствует созданию узнаваемого и привлекательного визуального образа вашего сайта в поисковой выдаче.
Как создать favicon в формате svg
Важно учитывать, что для создания качественной иконки недостаточно конвертировать уже готовое PNG, JPEG, JPG и т.д в SVG формат, так как это приведет только к потере качества и детализации.
- Вариант дороже: Передать задачу дизайнеру, который создаст SVG иконку с нуля в векторном редакторе (таких как Figma, Adobe Illustrator и т.д), которые позволяют сохранять детали и форму иконки без потери качества, даже при увеличении размера.
- Экономный вариант: Создать иконку самостоятельно в Figma на основании уже готового изображения.
Для примера: Так как я выбрал стандартную иконку, которая используется в instagram, то это упростило мне работу. Достаточно было найти и скачать изображение в SVG формате.
⭐ Результат этапа: Создать (или найти) иконку в формате SVG, а не конвертированное из изображения другого формата.
3. Размер изображения
С размером изображения всё проще, здесь мы будем ориентироваться на документацию Яндекс и Google:
- Значок сайта должен быть квадратным;
- Для достижения наилучшего результата используйте изображение 520x520 пикселей.
Минимальный размер иконки должен быть 120x120 px. Это минимальное значение, которое вы должны использовать, чтобы фавикон отображался четче и заметнее.
Для примера: Изображение, которое я загружаю в Figma и подгоняю его размеры до 520x520px (благодаря SVG формату качество изображения не теряется).
⭐ Результат этапа: Иконка SVG формата размерами 520x520px.
Создаем фавикон для своего сайта
Проверка работоспособности фавикона
- Проверить, чтобы файл фавикона отдавал 200 ответ. Для этого воспользуйтесь инструментом bertal
- Файл не запрещен для индексирования, например в robots.txt с помощью директивы Disallow: может быть запрещен не сам файл, а каталог, в котором он размещается.
Если робот загрузил фавиконку, она появится в результатах поиска:
- В течение 2-х недель - для Яндекс
- Через несколько дней - для Google
*Если вы хотите, чтобы изменения вступили в силу как можно быстрее, то запросите индексирование главной страницы своего сайта в Яндекс.Вебмастер и Google Search Console
✨ Хотите стать частью нашего креативного процесса? Оцените статью или оставьте свой след в комментариях. Ваш взгляд – наш вдохновляющий катализатор!
