Каждый сайт должен иметь свой значок или иконку (favicon). Несмотря на то, что они небольшого размера, фавиконки оказывают огромное влияние – они используются браузерами при визуализации вашего сайта (или бренда). Фавиконы используются не только для отображения значка сайта на вкладке браузера, они также могут быть использованы для закладок и в плитке последних посещенных сайтов. Из сегодняшней статьи вы узнаете исчерпывающую информацию об favicon: что это такое, зачем нужно, как создать и как разместить на своем сайте.
Favicon (дословный термин любимая иконка) – это маленькая картинка, которая используется браузерами для брендирования вашего сайта/компании. Если favicon
установлен на вашем сайте правильно, браузеры будут использовать его по мере необходимости в разных местах. Сюда относятся вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и так далее.
Иногда фавиконы называют Значки сайтов, что является полезной характеристикой, которая информирует о том, что данный значок будет использоваться для представления вашего сайта в различных случаях.
Ниже пример файла-иконки favicon, который используется на нашем сайте:
Фавиконы (или значки сайтов) похожи на логотип компании в том смысле, что он может играть небольшую, но важную роль для брендирования вашего сайта. Сайт, на котором отсутствует значок, может показаться менее заслуживающим доверия пользователей (поскольку мы все привыкли их видеть). С другой стороны, сайт, на котором есть этот значок, предоставит пользователю четкое визуальное представление о сайте. Подумайте об этом, ведь одна картинка (даже небольшая) стоит тысячи слов.
Есть несколько допустимых форматов изображений для значков favicon
, но два самых популярных – это ico
и png
. Эти форматы имеют наибольшую поддержку браузерами и поддерживают прозрачный фон для значка (в отличие от jpg
).
Традиционно иконки создаются в виде файла ICO (favicon.ico
). Файл ICO позволяет хранить несколько изображений разных размеров в одном файле, что позволяет браузеру (на ПК и в мобильных) выбирать необходимый размер из доступных изображений. Проблема с форматом ico
заключается в том, что не многие люди знают, что это такое или как его создать. Вы можете создавать файлы ICO в фоторедакторе, таком как Gimp или Фотошоп, но самым простым способом будет использование онлайн-генератора значков, который делает этот процесс действительно простым. В сети Интернет вы сможете найти достаточное количество таких онлайн-генераторов.
Начиная с HTML5, формат PNG является приемлемым форматом для значков сайтов, и на сегодня все основные браузеры поддерживают его. Возможно, это будет лучшим вариантом в будущем, так как формат png
имеет более широкую популярность в сети. Однако, поскольку все браузеры (даже старые) поддерживают ICO, лучше использовать версии и png
, и ico
, чтобы избежать нежелательных 404-х ошибок.
Вашему сайту необходимо иметь несколько размеров изображений фавиконов, чтобы оптимально отображать их в различных случаях:
Возможно, вы помните дни, когда фавикон должен был иметь только одно, точное имя файла, — favicon.ico
. И он должен был располагаться только в корневом каталоге вашего сайта. Но, времена изменились. Теперь вы можете назвать этот файл как угодно, сохранять его в других форматах и в любом месте на вашем сайте.
Примечание: Размещение favicon.ico
в корневом каталоге все еще является хорошей идеей в качестве запасного варианта.
Если вы уже создали этот файл (или файлы), вам осталось пройти только два шага.
Шаг №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. Если у вас есть какие-то вопросы по данной теме, не стесняйтесь задавать их в разделе комментариев ниже.
Спасибо, что читаете нас!
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
View Comments
добавлю еще сервис realfavicongenerator.net
не реклама
который упрощает сей процесс
Спасибо Вам за полезную информацию. Благодарю всех. Отдельная благодарность пользователю с ником Admin
Thanks for the post
Good luck :)