Как создать фавиконку и подключить ее к сайту

Как создать фавиконку и подключить ее к сайту

Crypto News: заработок на размещении микро-новостей от 100 000 рублей.
9 часов назад
Быстрые деньги. До 250 000 рублей на готовой системе
8 часов назад

Фавикон (сокращение от Favorites Icon) — это значок с логотипом или первой буквой названия веб-сайта, который появляется на вкладках браузера, в списках закладок и в интерфейсе некоторых поисковых систем.

Этот мини-логотип, по сути, представляет страницу и помогает пользователям быстрее найти ее среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить эту задачу потенциальному посетителю, каждому онлайн-ресурсу, от небольшого блога на WordPress до интернет-магазина с огромной аудиторией, нужен понятный и узнаваемый Favicon.

Вот как выглядит Фавикон во вкладках Safari:

Логотип Instagram на вкладках

А вот так это выглядит в результатах поиска Яндекса:

Логотипы сайтов в поисковике

Такие иконки должны опираться на стиль бренда, поэтому важно, чтобы они были тесно связаны с ним.

Вот как Apple и Яндекс реализовали это решение:

Яндекс и Apple.com на вкладках

Далее давайте разберемся, как сделать иконку сайта и ссылку на нее.

Характеристики значков

Взять любое понравившееся изображение и сразу же использовать его в качестве фавиконки невозможно. Мы должны выполнить два простых требования: выбрать подходящее расширение и размер.

Формат

Есть из чего выбрать:

  • .ico (.icns в macOS) — некий стандарт, используемый повсеместно.
  • .png — более современная версия, также широко используемая и поддерживаемая даже во многих старых браузерах.
  • .svg — перспективный векторный формат с переменным разрешением для конкретной страницы. Настраивается через CSS.

Сайт caniuse.com

.svg не поддерживается в старых браузерах ПК и некоторых браузерах Android.

Сайт с описанием поддерживаемых технологий

Поддержка .png намного шире

Есть и другие форматы, которые вы можете использовать. Некоторые .jpeg или .gif. Единственная проблема может возникнуть только при обращении с клиентским ПО.

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

Размер

Здесь тоже есть некоторые стандарты, но они варьируются от системы к системе. Обычно используются следующие размеры:

  • 16 на 16 пикселей.
  • 32 на 32
  • 192 из 192
  • 512 на 512

При желании вы можете использовать несколько вариантов, чтобы адаптировать фавикон к требованиям нескольких платформ.

Как сделать иконку для сайта HTML?

В лучшем случае вам ее нарисует знающий дизайнер, но если вы не можете найти такого, то можете сделать иконку самостоятельно.

«ДЕНЕЖНЫЙ ВЫБОР» 280 000 в месяц на автомате
10 часов назад
ДЕНЕЖНЫЙ БОТ - Заработок до 100 000 в авторежиме
9 часов назад

Рисуем Favicon в Sketch или Photoshop

Иконку можно сделать там же, где выполняются остальные части интерфейса. Например, Фотошоп или Скетч. Я покажу вам, как это работает, на примере Sketch:

То же самое можно сделать в Photoshop или Pixelmator, за исключением того, что настройки изображения и интерфейсы экспорта будут другими.

Большинство редакторов по умолчанию не знают, как экспортировать в .ico. Вам потребуется скачать сторонний плагин для Photoshop или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

Если у вас уже есть черновик вашего проекта в неправильном формате (.jpeg, .gif), вы можете преобразовать его в .png. Достаточно любого базового графического редактора.

Рисуем значок в браузере

Если у вас нет фотошопа, или вам просто не нужен сложный дизайн, вы можете поторопиться нарисовать логотип на Favicon.cc. В этом случае все предельно просто:

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

Конвертируем текст или эмоджи в значок

Есть еще более простой вариант — сервис Favicon.io. Он имеет три конвертера: из изображения, из текста или из эмодзи в иконку.

Главная страница Favicon.io

Существует также конвертер .png в .ico. Вы можете загрузить готовый логотип на сайт и получить взамен несколько иконок в разных форматах для всех операционных систем.

Но попробую скачать иконку эмодзи:

Как подключить Favicon к сайту?

Теперь, когда у меня есть фавикон (неважно откуда), мне нужно его подключить. Для этого мне нужно вставить в html-код домашней страницы строку, которая будет содержать тип ресурса, адрес и тип данных.

АТРИБУТ

ЦЕННОСТЬ

значок указывает на тип используемого ресурса.

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

Указывает тип изображения. Например, image/png для .png, image/svg для .svg. или изображение/x-icon для .ico.

Можно ввести несколько разных значков. Браузер все равно выберет соответствующий значок. Именно такой подход предлагает Favicon.io.

Код на для вставки в заголовок

Например, я скачал свой .ico с веб-сайта.Затем я делаю следующее:

Это самый простой способ.Конечно, файл значка может называться как угодно и располагаться на внешнем сервере.Самое главное, чтобы код правильно исполнялся на странице.

Теперь вы знаете, как сделать страницу с иконками во вкладке HTML.Нарисуйте картинку в .ico или .svg, поместите в любое удобное место, а затем пропишите в голове адрес с форматом.

ПАРТНЕРСКИЕ АВТОВОРОНКИ. Серьезные комиссии на полуавтомате.
9 часов назад
Ниша дропшиппинга. Полный курс по Дропшиппингу
10 часов назад

Читайте также