Categories: Технологии

Что такое 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. Если у вас есть какие-то вопросы по данной теме, не стесняйтесь задавать их в разделе комментариев ниже.

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

 

View Comments

  • добавлю еще сервис realfavicongenerator.net
    не реклама
    который упрощает сей процесс

  • Спасибо Вам за полезную информацию. Благодарю всех. Отдельная благодарность пользователю с ником Admin

Recent Posts

Возможна ли анонимность, конфиденциальность или приватность в Интернете?

Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…

3 дня ago

Как появился Pro Plan: путь от идеи до мирового успеха

Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…

7 дней ago

Стефан Цвейг

Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…

1 неделя ago

Можно ли найти доступный хостинг в 2024 году?

Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…

2 недели ago

Зачем выбирать образование за границей: преимущества для будущего вашего ребенка

Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…

2 недели ago

Как выбрать мастера для перетяжки мебели?

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

2 недели ago