Facebook ВКонтакте Twitter Telegram

Что такое Favicon и почему он так важен?

Комментарии
 103
19.03.2020 | Время чтения: 8 минут
Facebook
Автор: Симагин Андрей

Что такое Favicon, подробное руководство

Содержание

Что такое Favicon?

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

Обычно favicon создают в классическом формате ICO. Стандартный размер иконки составляет 16 x 16 пикселей с 16, 24 или 32-битной поддержкой цвета и прозрачности. Намного позже, стали появляться новые расширения, которые зависят от типа и операционной системы устройства: 32 x 32, 48 x 48, 96 x 96 и другие. Но обычно браузеры отображают иконки в формате 16 x 16.

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

Почему favicon очень важен?

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

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

В некоторых поисковых системах favicon отображается в результатах поисковой выдачи напротив каждого сайта. Яндекс уже давно реализует данную функцию, в то время как Google начал тестировать ее внедрение только в 2019 году (в десктопной версии Google фавиконов пока нет, при этом в мобильной выдаче они присутствуют).

Пример отображения фавикон в выдаче поисковой системы Яндекс:

Пример фавикон в выдаче Яндекс

Пример отображения фавикон в мобильной выдаче Google:

Пример фавикон в выдаче Google

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

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

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

Примеры Favicon

Поскольку favicon стал обязательным элементом при создании сайтов, мы предлагаем вам ознакомиться с некоторыми примерами, чтобы понять принципы создания собственной иконки. Ниже представлено изображение верхней части браузера с самыми различными иконками на вкладках:

Пример фавикон на вкладках браузера

Чтобы узнать больше информации о том, как иконка отображается на разных устройствах или браузерах, воспользуйтесь нашей SEO-проверкой.

Как создать favicon для сайта?

Существует несколько способов создать favicon:

1. Нарисовать его самостоятельно в графическом редакторе.
2. Нарисовать иконку в специальном онлайн-сервисе.
3. Найти и скачать иконку, воспользовавшись бесплатным стоком (Findicons.com или Iconizer.net).
4. Загрузить имеющийся логотип или любое другое изображение в онлайн-генератор favicon, представленных ниже, а затем сохранить его:

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

Как создать иконку в Photoshop?

Photoshop – популярная графическая программа для создания изображений любых форматов, но есть одна проблема – она не поддерживает полноценную работу с файлами формата «.ico». Поэтому вам потребуется скачать и установить его плагин от Telegraphics.

Однако, лично я рекомендую использовать связку: Photoshop + программа Art Icons Pro – это популярный редактор иконок (российская разработка), который позволяет создавать и редактировать иконки. Программа поддерживает экспорт и импорт множества графических форматов.

Иконка, Favicon, Art Icons

Работать в «Art Icons» просто. Как делаю обычно лично я, когда хочу создать favicon:

  • Захожу на сайт, для которого нужно сделать иконку.
  • Делаю скриншот места на сайте, где размещен логотип.
  • Открываю Photoshop, вставляю изображение из буфера обмена.
  • Обрезаю изображение скриншота так, чтобы логотип был в его центре + нужно иметь в виду, что после обрезки само изображение должно быть квадратной формы.
  • Далее сохраняю его в PNG. Закрываю Photoshop.
  • Затем открываю сохраненную картинку в «Art Icons».
  • Уменьшаю изображение до размера 16 x 16 пикселей: "Инструменты -> Конвертировать формат..." и выбираю размер 16 на 16 и цвета "True Color + Apha (32 бит)".
  • Затем выбираю "Файл -> Сохранить как..." и выбираю формат "Icon (*.ico)".
  • Все.

Ну и самый простой вариант – онлайн-генераторы Favicon. Примеры подобных онлайн-сервисов:

Как добавить иконку на сайт?

После того, как вы создали иконку, необходимо загрузить ее на сайт – вставить в код страницы. Для этого выполните следующие действия:

  • Загрузите favicon.ico на ваш сервер в корневую папку.
  • В блоке HEAD вашего сайта пропишите ссылку на favicon в виде:
    • <link href="/favicon.ico" rel="shortcut icon">.
  • Все!

Вот видите – все просто!
Создайте свой favicon и убедитесь в этом сами!

Оцените статью
5/5
2



<< Назад

С нами работают