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

Что такое фавикон

Favicon это сокращение от «Favotites» (избранный) и «Icon» (иконка). Это значок веб-сайта или страницы. Представляет собой небольшое изображение, которое отображается:

• На открытой вкладке браузера или в закладках, рядом с адресом сайта
• В поисковой выдаче Яндекса и Google, перед заголовком сайта
• В качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол

Его основная цель — обеспечить визуальную идентичность веб-сайта, позволяя пользователям быстро распознавать и отличать его от других, особенно когда открыто много вкладок в браузере.

Размеры иконок

Размер значка менялся с годами по мере разнообразия устройств и разрешений дисплеев. Первоначально значки имели размер 16×16 пикселей и подходили для отображения рядом с URL-адресом в адресной строке браузера. Однако с появлением дисплеев Retina, мобильных устройств и различных платформ необходимость в разных размерах стала очевидной. Давайте углубимся в типичные размеры и типы файлов, используемые сегодня для значков.

Классический фавикон	Традиционный размер фавикона, с которого все началось, — 16×16 пикселей. Этот размер до сих пор широко используется, особенно во вкладках браузера.
Большие браузеры и дисплеи Retina	В современных браузерах и экранах с высоким разрешением для обеспечения четкости используются такие размеры, как 32×32 и 64×64 пикселя .
Мобильные устройства	Для смартфонов и планшетов, особенно когда веб-сайты сохраняются в виде ярлыков на главных экранах, обычно используются такие размеры, как 152×152, 192×192 и 512×512 пикселей . Эти размеры подходят для устройств Apple iOS, Android и браузера Chrome для Android соответственно.
Манифест веб-приложения	При определении значков веб-приложений (для Progressive Web Apps) размеры могут варьироваться от 96×96 до 384×384 пикселей .
Другие платформы	Некоторые платформы или приложения могут иметь особые требования. Например, плитке Microsoft для Windows могут потребоваться такие размеры, как 144×144 или 150×150 пикселей.

Типы файлов фавиконов

.ico	Это традиционный формат файлов для значков. Одним из преимуществ формата .ico является его способность содержать несколько изображений (размеров) в одном файле. Это означает, что вы можете иметь версии 16×16, 32×32 и 64×64 в одном файле .ico, и браузер будет использовать наиболее подходящий размер. Это тот минимум, который необходимо делать для каждого сайта.
.png	Формат PNG широко распространен и особенно полезен для современных устройств, требующих больших размеров фавиконов. PNG поддерживают прозрачность, что может быть полезно для значков неправильной формы или размытых краев.
.svg	SVG (Scalable Vector Graphics или масштабируемая векторная графика) — это векторный формат, то есть его можно масштабировать без потери качества. Для значков это может быть полезно для обеспечения четкого отображения на экранах различных разрешений и размеров. Обычно иконки делаются именно в этом формате, а потом конвертируются в формат .ico.
.webp	Современный формат изображений, обеспечивающий превосходное сжатие изображений в Интернете, меньший размер файлов и более быструю загрузку. Редко используется для фавиконок.
Web App Manifest (JSON)	Для прогрессивных веб-приложений файл manifest.json можно использовать для определения значков. В этом файле вы можете указать несколько файлов PNG разных размеров.
Иконки, специфичные для Apple	На устройствах Apple вы можете встретить файлы типа apple-touch-icon.png, которые используются для значков при сохранении веб-сайтов на главном экране устройств iOS.

Фавиконы и SEO

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

• В 2024 году уже сложно найти сайты без фавиконов.
• Выделение сайта в выдачи поисковых систем. Сайты со своими иконками привлекает больше внимание, запоминаются и получают больше CTR (кликабельность).

• Упрощает поиск нужного сайта среди истории в браузерах или в открытых вкладках.

• Снижает показатель отката. Узнаваемый фавикон может уменьшить путаницу у пользователей, которые ищут определенный сайт.

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

Заказать на бирже

Быстрый и просто вариант — заказать на бирже. На Kwork можно недорого сделать иконки сразу же всех размером и форматов.

Онлайн генератор фавиконов

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

Favicon.by

Favicon.by — популярный онлайн-инструмент для создания иконок. Что он может:

• Простота в использовании: позволяет пользователям создавать иконку, загружая изображение, рисовать его либо импортировать с сайта.
• Ограниченный формат и размер: выводит значки только в формате .ico и только в размерах 16х16 пикселей.
• Предварительный просмотр: позволяет сразу же посмотреть, как фавикон будет выглядеть в закладке браузера (раздел «Ваш результат»).
• Бесплатно.

Redketchup.io

Redketchup.io — еще один инструмент, используемый для создания как иконок фавиконов, так и приложений. Имеет только английскую версию и более расширенный функционал, чем у favicon.by:

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

Как добавить favicon в HTML

Добавить значок на ваш сайт с помощью HTML очень просто. Фавиконки добавляются в раздел <head> вашего HTML-документа с помощью тега <link>. Ниже приведены шаги и примеры того, как включить иконки на ваш сайт:

1. Подготовьте файлы:

Убедитесь, что ваш фавикон готов. Традиционный формат — .ico, но современные веб-сайты часто используют формат .png из-за его поддержки прозрачности. Убедитесь, что ваш фавикон доступен через URL-адрес или находится в корневом каталоге вашего веб-сайта.

2. Добавьте значок в свой HTML:

Для формата .ico:

<link rel="icon" href="/images/icon/favicon.ico" type="image/x-icon">

Замените /images/icon/ фактическим путем к вашему файлу .ico. Если значок находится в корневом каталоге, просто используйте «favicon.ico».

Для формата .png:

<link rel="icon" type="image/png" sizes="32x32" href="/images/icon/favicon-32x32.png">

Опять же, замените /images/icon/ фактическим путем к вашему .png-файлу. Вы можете настроить атрибут размеров и имя файла в зависимости от фактического размера вашего значка.

3. Дополнительные размеры (необязательно):

Если вы создали значки разных размеров для разных устройств (например: 32×32, 64×64, 128×128 и 256×256, как в моём случае), вы можете добавить каждый из них, используя отдельные теги <link>. Это позволяет браузеру выбрать наиболее подходящий размер в зависимости от его потребностей.

<link rel="icon" type="image/png" sizes="32x32" href="/images/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/images/icon/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="128x128" href="/images/icon/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="256x256" href="/images/icon/favicon-256x256.png">

4. Значок Apple Touch (необязательно):

Для устройств Apple вы можете указать значок, который будет использоваться, когда пользователи добавляют ваш веб-сайт на главный экран:

<link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">

Настройте путь так, чтобы он указывал на ваш настоящий файл значка Apple Touch. Я обычно использую только 1 размер: 180х180 пикселей.

5. Проверьте свой favicon:

После добавления необходимых HTML-тегов сохраните изменения и просмотрите свой сайт в браузере. Предварительно необходимо очистить кэш в браузере (сочетание клавиш CTRL+F5). После вы должны увидеть свой значок на вкладке браузера.

Как добавить фавикон на WordPress

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

Шаги:

• Зайти в «Внешний вид»
  
• Откроется окно с настройкой темы. Заходим в раздел «Свойства сайта»
  
• Откроется новая вкладка, находим «Выберите значок сайта»
  
• Появится всплывающее окно с Галереей. Иконку можно загрузить как с библиотеки сайта, так и просто с компьютера.
  Рекомендуется использовать размер не менее 512х512 пикселей.

• Загружаем фавикон или выбираем имеющееся
• Нажимаем «Выбрать»
• Если иконка не квадратная — появится окно с настройкой отображения, где необходимо будет выбрать отображаемую область фавиконки.
• В «Настройках сайта» будет показано, как иконка будет отображаться в браузере.
• Применяем изменения («Опубликовать»). После этого WP автоматически сгенерирует иконки со всеми нужными размерами и корректным отображением во всех браузерах и устройств (В том числе и на Mac OC, iOS, Андроиде и в приложениях Windows).