Что такое favicon (иконка сайта) и как ее добавить

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

 

 

Что такое фавикон (favicon)

Favicon (дословный термин любимая иконка) – это маленькая картинка, которая используется браузерами для брендирования вашего сайта/компании. Если favicon установлен на вашем сайте правильно, браузеры будут использовать его по мере необходимости в разных местах. Сюда относятся вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и так далее.

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

Ниже пример файла-иконки favicon, который используется на нашем сайте:

 

 

Важность favicon

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

 

 

Формат файла favicon

Есть несколько допустимых форматов изображений для значков favicon, но два самых популярных – это ico и png. Эти форматы имеют наибольшую поддержку браузерами и поддерживают прозрачный фон для значка (в отличие от jpg).

 

Формат ICO

Традиционно иконки создаются в виде файла ICO (favicon.ico). Файл ICO позволяет хранить несколько изображений разных размеров в одном файле, что позволяет браузеру (на ПК и в мобильных) выбирать необходимый размер из доступных изображений. Проблема с форматом ico заключается в том, что не многие люди знают, что это такое или как его создать. Вы можете создавать файлы ICO в фоторедакторе, таком как Gimp или Фотошоп, но самым простым способом будет использование онлайн-генератора значков, который делает этот процесс действительно простым. В сети Интернет вы сможете найти достаточное количество таких онлайн-генераторов.

 

 

Формат PNG

Начиная с HTML5, формат PNG является приемлемым форматом для значков сайтов, и на сегодня все основные браузеры поддерживают его. Возможно, это будет лучшим вариантом в будущем, так как формат png имеет более широкую популярность в сети. Однако, поскольку все браузеры (даже старые) поддерживают ICO, лучше использовать версии и png, и ico, чтобы избежать нежелательных 404-х ошибок.

 

 

Размер файла favicon

Вашему сайту необходимо иметь несколько размеров изображений фавиконов, чтобы оптимально отображать их в различных случаях:

• 16x16px, 32x32px – стандартные размеры favicon.
• 180x180px – значок для iOS.
• 192x192px – значок для Android/Chrome.
• 270x270px – значок для плитки среднего размера в Windows.

 

 

Именование и место расположения файла favicon

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

Примечание: Размещение favicon.ico в корневом каталоге все еще является хорошей идеей в качестве запасного варианта.

 

 

Как добавить значок favicon на свой сайт

Если вы уже создали этот файл (или файлы), вам осталось пройти только два шага.

Шаг №1: загрузка файла favicon на сервер хостинга

Во-первых, вам нужно загрузить файл favicon.ico на сервер, на котором размещен ваш веб-сайт (используя, например, FTP-клиент или же панель управления хостингом). Как мы уже упоминали ранее, это может быть корневой каталог сайта, либо же другая папка. Главное позже указать правильную ссылку на расположение файла.

 

Шаг №2: добавление кода с тегом информации о файле favicon

Во-вторых, вам нужно разместить тег подключения favicon в шапке сайта (в секции <head>). Ниже примеры тегов для файлов favicon, вы можете использовать их все, если у вас есть несколько размеров этого файла:

<head>
……..
  <link rel="apple-touch-icon" sizes="180x180" href="{ВАШ_ДОМЕН}/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="{ВАШ_ДОМЕН}/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="{ВАШ_ДОМЕН}/favicon-16x16.png">
  <link rel="icon" type="image/x-icon" href="{ВАШ_ДОМЕН}/favicon.ico">
……..
</head>

 

 

Добавьте этот код в исходный код вашего сайта, только не забудьте заменить {ВАШ_ДОМЕН} на адрес своего сайта. Также, не забудьте об правильном расположении и именовании ваших файлов favicon.

 

 

 

Заключительная мысль

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

Спасибо, что читаете нас!