Используйте фавиконки правильно / Хабр

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложенияФавиконка на вкладке в браузере

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в <head>:

<head>
  <link rel="icon" href="favicon.ico"><!-- 32×32 -->
</head>

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

project/
  favicon.ico
  img/
    180.png
    192.png
    512.png
    icon.svg

Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:

project/
  favicon.ico
  img/
    favicons/
      180.png
      192.png
      512.png
    icon.svg
SVG

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

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

<head>
  <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
</head>
Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

<head>
  <link rel="apple-touch-icon" href="images/favicons/apple.png"><!-- 180×180 -->
</head>

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

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста.

Манифест позволит скрыть подключение всех размеров из <head>, что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки { и заканчиваться закрывающей скобкой}.

manifest.webmanifest
{
}

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest
{
  "icons": []
}

Осталось добавить фавиконки по шаблону:

manifest. webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" }
  ]
}

Если иконок несколько, то их нужно добавить через запятую:

 
manifest.webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" }
  ]
}

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

manifest.webmanifest
{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Настройки:

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

manifest.webmanifest
{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Откуда брать фавиконки и как их приготовить

Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

  1. Не добавлять фавиконки в проект.

  2. Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итог

Итоговый способ подключения фавиконки:

<link rel="icon" href="favicon.ico"> <!-- 32×32 -->
<link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="images/favicons/apple.
 
 png">  <!-- 180×180 -->
<link rel="manifest" href="manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

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

Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Управление остатками

  • Описание курса
  • Каталог товаров
    • Размещаем видео с Youtube в карточке товара
    • Изменение количества выводимых товаров в строке
  • Техническая поддержка
  • Установка Аспро: Крутой шоп
    • Подготовка хостинга
      • Установка через bitrixsetup и создание базы данных
      • Упрощенная установка на хостинге Reddock
    • Активация лицензии, загрузка и установка обновлений 1С-Битрикс
  • Настройки интернет-магазина
    • Платежные системы
      • Изменение информации о платежной системе
      • Пакет иконок платежных систем
    • Тип цен
    • Первые шаги
      • Фавикон и логотип
      • Счетчики Google/Яндекс
      • Настройка прав пользователей
    • Карточка товара
      • Аксессуары, похожие товары, услуги
        • Аксессуары
        • Похожие товары
        • Услуги
      • Вкладки
        • Описание
        • Характеристики
        • Видео
          • Прикрепление нескольких роликов на вкладке «Видео»
        • Отзывы
        • Задать вопрос
        • Дополнительно
      • Персональные рекомендации
      • Единицы измерения
        • Редактирование единиц измерения
        • Отключение обозначений единиц измерения
    • Добавление товара
      • Добавление товара вручную
      • Добавление товара с торговыми предложениями
      • Создание торговых предложений
    • Управление остатками
    • Наборы и комплекты
      • Наборы
        • Создание и настройка наборов для товаров
        • Создание и настройка наборов для торговых предложений
        • Настройка отображения количества товаров в наборе
      • Комплекты
        • Создание и настройка комплектов для товаров
    • Настройка товаров с каноническими ссылками
  • Установка модулей сторонних разработчиков
  • Электронная торговля Google и Яндекс. Электронная коммерция
  • Интеграция с другими сервисами
    • Расширенная интеграция с Яндекс. Метрикой
      • Обзор настроек для Яндекс.Метрики
        • Установка счетчиков
        • Настройка целей в Яндекс.Метрике
          • Создание общей цели для веб-форм
          • Создание отдельной цели для веб-формы
          • Настройка цели корзины и оформления заказа
          • Настройка целей для интернет-магазинов
  • Согласие на обработку персональных данных
    • Автоматическое согласие на обработку персональных данных
  • SEO, маркетинг, реклама
    • Триггерные рассылки
    • Настройка ЧПУ
      • Настройка ЧПУ для каталога
      • Настройка ЧПУ для умного фильтра
    • Почтовые шаблоны
    • Рекламные баннеры
    • Типы описаний в Аспро: Оптимус
    • Метатеги
    • Стикеры
    • Акции и скидки
      • Правила работы с корзиной
      • Отображение процента скидки
      • Предсказания в карточке товара
      • Таймер обратного отсчета для акций
      • Привязка товаров к акциям
      • Накопительные скидки
      • Таймер обратного отсчета для торговых предложений
      • Подарки
      • Настройка купонов и промокодов
    • SEO-описания разделов каталога
      • Настройка хлебных крошек
    • Страница с ошибкой 404
    • Типы описаний в Аспро: Маркет

На карточке товара есть возможность подключить отображение остатков. Это может быть иконка с приблизительным значением: «Много», «Мало», «Достаточно» или конкретное указание количества.

Аспро: Оптимус


Аспро: Маркет


Аспро: Шины и диски 2.0


Аспро: Next


Аспро: Крутой шоп


Подписи иконок кликабельны и при клике открывают и переводят на вкладку «Наличие на складе» (если она подключена на карточке).

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

Переключитесь на административный раздел и перейдите в раздел Рабочий стол → Настройки → Настройки продукта → Настройки модулей → Аспро: (ИмяПродукта) — Адаптивный интернет-магазин.

Вам нужна группа полей «Отображение наличия товара».


  • Отображать наличие товара для групп – вы можете выбрать одну или несколько групп пользователей, для которых на карточке товара отображается иконка остатков товара
  • Отображать наличие товара количеством для групп – вы можете выбрать одну или несколько групп пользователей, для которых на карточке товара отображается точное количество остатков
  • Если доступно… подменять числа на выражения – активная опция скрывает точное количество.

    No related posts.