Что такое фавикон сайта и как его добавить на сайт

Favicon – неотъемлемая часть любого сайта. WEDEX расскажет как создать и установить фавикон и какие особенности работы с ним.

Что такое favicon?

Favicon или favourite icon (любимая иконка, картинка) — это небольшое изображение размером 16х16 пикселей, которое используется в браузерах для идентификации страницы или сайта. Фавикон обычно отображается в верхней части веб-браузера на вкладках, его также можно увидеть на панели закладок, в истории браузера и на поисковых страницах Google рядом с URL-адресом.

Краткая история favicon

Первая версия favicon появилась в далеком 1999 году. Тогда компания Microsoft представила иконки веб-ресурсов для своего браузера Internet Explorer 5. Уже тогда favicon имел стандартный размер 16х16 пикселей в формате ICO. Для того, чтобы использовать иконку на своем сайте, необходимо было добавить изображение в корневой каталог веб-ресурса, а браузер автоматически отображал его.

С 2005 по 2011 годы произошло несколько «волн» стандартизации иконок, которые вносили новые требования к этим изображениям (подробнее об этом ниже). Главным преимуществом введения единого стандарта к favicon стало корректное отображение иконок в различных браузерах и устройствах. До стандартизации фавиконы в некоторых браузерах могли отображаться корректно, а в некоторых – нет, что сильно влияло на пользовательский опыт.

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

Для чего существует favicon?

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

Пользовательский опыт посетителей сайта

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

Брендинг и favicon

Действительно целостный бренд имеет много мелких деталей, которые отличают его от других брендов. Качественный фавикон – залог монолитного дизайна. Иконка веб-ресурса это тот самый случай, когда целесообразна фраза: «Размер не главное». У дизайнера есть всего 256 пикселей, чтобы создать работающую иконку сайта. Фавикон поможет сделать внешний вид сайта завершенным.

Доверие пользователей

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

Возвращение пользователей

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

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

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

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

Хорошей практикой среди UI/UX-дизайнеров является создание иконки веб-ресурса в рамках разработки дизайна бренда, поэтому часто уже готовые значки могут быть спрятаны в файлах проекта. Если их нет, то придется обратиться к профессионалу и создать уникальный фавикон.

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

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

Еще одним вариантом будут стоки и сайты с бесплатными иконками. Уникальность такого favicon будет минимальна, впрочем как временное решение более чем нормально.

Требования к размеру favicon

Фавиконы имеют стандартный размер 16х16 пикселей. Впрочем, эти размеры могут отличаться от браузера к браузеру и по цели использования. Итак, Google рекомендует использовать favicon размером больше, чем 16х16 для того, чтобы при масштабировании значок не терял качество. Вот некоторые примеры масштабирования для понимания:

Главное требование, чтобы фавикон был квадратной формы.

Какие типы файлов использует favicon?

Первым стандартным расширением для файлов фавикон было .ico, который использовался с 1999 года. Впоследствии его на замену пришли более современные и гибкие форматы: .png, .jpeg и .svg. Некоторые браузеры даже умеют отображать favicon, которые созданы в формате GIF, то есть анимированные изображения, но размер значка препятствует просмотру таких favicon. Поговорим конкретнее о форматах фавиконов:

• ICO – формат favicon от Microsoft. И хотя некоторые считают его устаревшим, он до сих пор активно используется для иконок сайта.
• PNG – один из самых популярных форматов для иконок. Этот простой формат, как правило, обеспечивает высокое качество favicon и предлагает такие преимущества как небольшой размер и возможности создания иконок с прозрачными или полупрозрачными элементами.
• SVG – файлы этого формата известны своей легкостью. Самое большое преимущество SVG заключается в скорости загрузки высококачественных изображений без потери скорости работы самого сайта. Раньше не все браузеры могли обрабатывать фавикон в формате SVG, но сегодня ситуация меняется.

Инструменты для создания или генерации favicon

Чтобы создать favicon самостоятельно можно воспользоваться двумя путями: desktop-приложения и онлайн-сервисы. Рассмотрим оба варианта.

Графические редакторы для favicon

Подойдут любые векторные и растровые редакторы. Photoshop, GIMP, Figma – все эти инструменты можно использовать для создания favicon. Главное, чтобы значок был квадратной формы и соответствовал заданному размеру.

Онлайн-сервисы

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

RealFaviconGenerator

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

FAVIC-O-MATIC

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

FAVICON.IO

Имеется инструментарий для создания фавикон, а также конвертации PNG в ICO, текстового формата в ICO и даже эмоджи в ICO. Также можно выбрать фон и цвет будущего значка сайта.

Рекомендации по созданию фавикона

Даже самый лучший favicon можно сделать еще лучше! Вот некоторые советы по этому поводу:

• Простота – из-за того, что фавикон имеет небольшой размер, от дизайна требуется, что называется, «лаконичная простота». Старайтесь делать ваши значки сайтов четкими и простыми, без перегрузки ненужными элементами и «украшениями».
• Идентичность – favicon должен раскрывать идентичность и дух вашего бренда, сайта, форума, лендинга и чего-либо еще. Важно, чтобы значок использовал ту же цветовую палитру, что и весь остальной дизайн сайта.
• Отсутствие текста – по возможности не используйте более одной буквы в фавикон, ведь размер иконки слишком мал для того, чтобы прочитать хотя бы что-то. Три буквы – максимум, который можно попробовать вместить в фавикон. На практике на значке чаще находится либо логотип, либо одна буква.
• Использование логотипа – и хотя использование логотипа это реально работающая стратегия, для того, чтобы лого хорошо читалось на маленьком изображении необходимо внести некоторые изменения. Вероятнее всего, логотип придется упростить и убрать некоторые сложные или слишком маленькие его части.

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

Если вы создавали сайт с помощью конструктора, то добавить favicon можно через админку конструктора. Например, на последних версиях WordPress для этого необходимо перейти админки и выбрать в правом меню пункт «Settings» или «Настройки» и подпункт «Site Icon». Туда можно загрузить фавикон.

Если сайт написан самостоятельно, то favicon можно добавить с помощью несложной манипуляции с файлом, который содержит настройки <head>…</head>. Это могут быть файлы index.html, home.html, main.html – то есть файлы главной страницы. В настройке <head> добавим следующую строку:

<link rel=”значок ярлыка” href=”/favicon.ico” type=”image/x-icon”>

Чтобы фавикон заработал, нужно загрузить его в корневую папку сайта. Путь будет следующий:

https://example.com/favicon.ico

Название знака должно быть favicon.ico.

Выводы

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

Александр Романенко

Team Lead/Senior SEO-специалист

Страница автора