Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

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

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

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

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

Так Favicon выглядят на вкладках в браузере Safari: 

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

А вот так в поисковой выдаче Яндекса:

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

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

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

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

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

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

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

Формат

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

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

Сайт caniuse.com

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

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

У .png поддержка заметно шире

Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.

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

Размер

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

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

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

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

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

Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:

  1. Открываем редактор и рисуем иконку.
  2. Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.Панель управления в программе Sketch
  3. Затем одновременно нажимаем клавиши Shift + Cmd + E.
  4. После этого нажимаем на кнопку Export Selected…Клавиша экспорта в Sketch

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

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

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

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

  1. Открываем будущую иконку.
  2. Меняем размер.Утилита «Просмотр» в macOS
  3. Указываем нужный размер и формат. Сохраняем. Настройка изображения
  4. Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
  5. Указываем расширение .png.

Готово!

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

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

  1. Рисуем любую картинку во встроенном редакторе.Рисунок в браузере
  2. А потом нажимаем на кнопку Download внизу.Превью файла

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

В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.

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

Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.

Главная страница Favicon.ioЗдесь же есть и конвертер .png в .ico. Можно загрузить в сервис готовый логотип и получить обратно несколько иконок в разных форматах для нужд всех ходовых операционных систем.

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

  1. Нажимаю на соответствующий конвертер.
  2. Кликаю по названию понравившегося смайлика.Выбор смайла
  3. А потом жму на кнопку Download.Кнопка загрузки

И все.

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

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

АТРИБУТ

ЗНАЧЕНИЕ

rel

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

href

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

type

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

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

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

  1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
  2. Потом открываю index.html и прописываю в head строчку <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>.Интерфейс VSCode

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

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

Комментарии

Вадим 0
27 окт в 2020
Спасибо
Марина Оридич 0
21 фев в 16:18
О, спасибо за сервис Favicon.io. Пожалуй, больше ничего и не нужно, чтобы вставлять иконки и не заморачиваться со стандартами, поддержкой и прочей фигней. Благодарю.
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте