Фавикон (сокращение от Favorites Icon) — это значок с логотипом или первой буквой названия веб-сайта, который появляется на вкладках браузера, в списках закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, представляет страницу и помогает пользователям быстрее найти ее среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить эту задачу потенциальному посетителю, каждому онлайн-ресурсу, от небольшого блога на WordPress до интернет-магазина с огромной аудиторией, нужен понятный и узнаваемый Favicon.
Вот как выглядит Фавикон во вкладках Safari:
А вот так это выглядит в результатах поиска Яндекса:
Такие иконки должны опираться на стиль бренда, поэтому важно, чтобы они были тесно связаны с ним.
Вот как Apple и Яндекс реализовали это решение:
Далее давайте разберемся, как сделать иконку сайта и ссылку на нее.
Характеристики значков
Взять любое понравившееся изображение и сразу же использовать его в качестве фавиконки невозможно. Мы должны выполнить два простых требования: выбрать подходящее расширение и размер.
Формат
Есть из чего выбрать:
- .ico (.icns в macOS) — некий стандарт, используемый повсеместно.
- .png — более современная версия, также широко используемая и поддерживаемая даже во многих старых браузерах.
- .svg — перспективный векторный формат с переменным разрешением для конкретной страницы. Настраивается через CSS.
.svg не поддерживается в старых браузерах ПК и некоторых браузерах Android.
Поддержка .png намного шире
Есть и другие форматы, которые вы можете использовать. Некоторые .jpeg или .gif. Единственная проблема может возникнуть только при обращении с клиентским ПО.
Из-за особенностей браузеров в разных операционных системах я бы рекомендовал перейти с .ico. Самый каноничный формат, с которым вы не ошибетесь.
Размер
Здесь тоже есть некоторые стандарты, но они варьируются от системы к системе. Обычно используются следующие размеры:
- 16 на 16 пикселей.
- 32 на 32
- 192 из 192
- 512 на 512
При желании вы можете использовать несколько вариантов, чтобы адаптировать фавикон к требованиям нескольких платформ.
Как сделать иконку для сайта HTML?
В лучшем случае вам ее нарисует знающий дизайнер, но если вы не можете найти такого, то можете сделать иконку самостоятельно.
Рисуем Favicon в Sketch или Photoshop
Иконку можно сделать там же, где выполняются остальные части интерфейса. Например, Фотошоп или Скетч. Я покажу вам, как это работает, на примере Sketch:
То же самое можно сделать в Photoshop или Pixelmator, за исключением того, что настройки изображения и интерфейсы экспорта будут другими.
Большинство редакторов по умолчанию не знают, как экспортировать в .ico. Вам потребуется скачать сторонний плагин для Photoshop или шаблон для Sketch.
Преобразуем готовое изображение в фавиконку
Если у вас уже есть черновик вашего проекта в неправильном формате (.jpeg, .gif), вы можете преобразовать его в .png. Достаточно любого базового графического редактора.
Рисуем значок в браузере
Если у вас нет фотошопа, или вам просто не нужен сложный дизайн, вы можете поторопиться нарисовать логотип на Favicon.cc. В этом случае все предельно просто:
Вы также можете увидеть, как выглядит значок в адресной строке браузера.
Конвертируем текст или эмоджи в значок
Есть еще более простой вариант — сервис Favicon.io. Он имеет три конвертера: из изображения, из текста или из эмодзи в иконку.
Существует также конвертер .png в .ico. Вы можете загрузить готовый логотип на сайт и получить взамен несколько иконок в разных форматах для всех операционных систем.
Но попробую скачать иконку эмодзи:
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавикон (неважно откуда), мне нужно его подключить. Для этого мне нужно вставить в html-код домашней страницы строку, которая будет содержать тип ресурса, адрес и тип данных.
АТРИБУТ
ЦЕННОСТЬ
значок указывает на тип используемого ресурса.
Здесь указывается путь к файлу. Вы можете ввести ссылку на сервер или внешний каталог.
Указывает тип изображения. Например, image/png для .png, image/svg для .svg. или изображение/x-icon для .ico.
Можно ввести несколько разных значков. Браузер все равно выберет соответствующий значок. Именно такой подход предлагает Favicon.io.
Например, я скачал свой .ico с веб-сайта.Затем я делаю следующее:
Это самый простой способ.Конечно, файл значка может называться как угодно и располагаться на внешнем сервере.Самое главное, чтобы код правильно исполнялся на странице.
Теперь вы знаете, как сделать страницу с иконками во вкладке HTML.Нарисуйте картинку в .ico или .svg, поместите в любое удобное место, а затем пропишите в голове адрес с форматом.
