Её величество иконка в manifest.json - Веб-студия WebTend г. Екатеринбург

Публикации, статьи от веб-студии Webtend. Блог веб-мастера Алексея Блохина

Её величество иконка в manifest.json - Веб-студия WebTend г. Екатеринбург

Её величество иконка в manifest.json

Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.

Иконка для сайта называется Favicon.

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.

В зависимости от браузера и контекста они могут отображаться:

  • Рядом с именем сайта во вкладке браузера
  • В списке закладок
  • Как иконка запуска на домашнем экране устройства и десктопа
  • В самой адресной строке
  • На рабочий стол мобильного устройства

ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.

Почему я назвал статью "Ее величество иконка"? Да потому, что эта "пешка" прошла в "ферзи".

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки размером 16х16 пикселей в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Кстати, большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico и я всегда обязательно размещаю фавикон в главную директорию сайта.

Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.

Тег link можно прописать по разному, я использую все сразу, чтобы угадать:

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

Для форматов png или gif:

<link rel="icon" type="image/gif" href="/image.gif">
<link rel="icon" type="image/png" href="/image.png">

Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

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

Её величество иконка в manifest.json - Веб-студия WebTend г. Екатеринбург

Смотрите сами неполный список рекомендаций:

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

Разметка link примерна такая:

<link rel="icon" sizes="96x96" href="/icon-96.png">
<link rel="icon" sizes="144x144" href="/icon-144.png">
<link rel="icon" sizes="192x192" href="/icon-192.png">
<link rel="icon" sizes="256x256" href="/icon-256.png">
<link rel="icon" sizes="384x384" href="/icon-384.png">
<link rel="icon" sizes="512x512" href="/icon-512.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">

Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.

А еще появился Manifest.json и browserconfig.xml.

По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.

Вы опять скажете - "Блин.... еще и эти файлы делать к куче картинок"... "Королева иконка требует меня в жертву"...

Все просто на самом деле. Я сейчас подскажу как все сделать. У меня на этот сайт - все про все - заняло 10 минут.

Но сначала разберемся с этими файлами, а не с иконками разных размеров.

Manifest.json

Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.

Подключение файла как и всего остального в head:

<link rel="manifest" href="/manifest.json">

Пример простого файла:

{
    "lang": "ru",
    "name": "Моё приложение",
    "description": "Описание приложения",
    "icons": [{
        "src": "/icon.png",
        "sizes": "64x64",
        "type": "image/png"
    }],
    "start_url": "/",
    "display": "fullscreen",
    "orientation": "landscape",
    "background_color": "#000000",
    "screenshots": [{
        "src": "/screenshots.jpg",
        "sizes": "640x480",
        "type": "image/jpeg"
    }]
}

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.

Кратко пройдемся по параметрам:

name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Как быстро все реализовать:

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

2. Идем на бесплатный сервис https://www.favicon-generator.org/

Выставляем в нем галочки как на скриншоте:

Её величество иконка в manifest.json - Веб-студия WebTend г. Екатеринбург

Выбираем созданную заранее картинку и генерируем.

И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.

Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).

Я исправил в нем только имя:

"name": "Веб-студия WebTend",
"short_name": "WebTend",

Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.

Правьте в NotePad++ в UTF-8 без BOM.

Вставил полученные на этом же сервисе теги в head:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

И кинул все иконки в главную директорию (не хотелось пути менять).

В результате, добавив ссылку на экран IPhone, получил такое:

Её величество иконка в manifest.json - Веб-студия WebTend г. Екатеринбург

Как видим это 5s - экран маленький и он взял short_name - WebTend из manifest.json, что логично. На Ipad я уже увидел полное имя. При добавлении пользователь может изменить имя. Единственно на Android нет скругления иконки, что растраивает, думаю будет в будущем, при развитии этой системы.

При открытии по клику на ней очень интересно - при загрузке иконка с названием по типу preloader без анимации (можно цвет фона предзагрузки менять в manifest.json). Открывается без строки браузера, в полноэкранном режиме, с имитацией приложения.

А совсем недавно такое работало только на андроид системах. Прогресс идет.

Еще один сервис: https://realfavicongenerator.net Выдает гораздо меньше иконок, но возможно это и неплохо. Главное он перекроет.

Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?

А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).

Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00а0ff"> Название файла именно такое - safari-pinned-tab.svg.

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

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.

Для такой маленькой иконки очень много работы

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок (от Ruadhán O’Donoghue)

Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

Файл manifest.json, использующий изображение chrome:

{
 "name": "",
 "short_name": "",
 "icons": [
 {
 "src": "/icon-192.png",
 "sizes": "192x192",
 "type": "image/png"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
}

Файл browserconfig.xml, использующий изображение mstile:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
 <tile>
 <square150x150logo src="/mstile-150x150.png"/>
 <TileColor>#da532c</TileColor>
 </tile>
  </msapplication>
</browserconfig>

Разметка:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

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

Можно и закончить эту публикацию, но осталась одна важная вещь:

Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).

И наконец, в догонку, связанная с темой информация - вывод Иконки в Яндекс браузере.

Она там имеет "кличку" - Виджет для Табло. Жуткое название. Всегда были Визуальные закладки. Красиво и понятно. Теперь Табло...

Про табло и иконки (виджеты на нем) читайте тут: https://yandex.ru/support/browser/personalization/tableau.html

А вот как вставить свою иконку нужного цвета здесь: https://yandex.ru/dev/browser/tableau/doc/dg/concepts/create-widget-docpage/

Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.

И ничего в начале не получил. Виджет да, Заголовок да, а вот саму иконку нет. Оказалось абсолютный путь до иконки должен быть закодирован в URLencoded - вот ссылка на сервис это делающий: http://www.codenet.ru/services/urlencode-urldecode/

Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.

Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это...

Дополнение:

После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.

SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:

<link rel="icon" type="image/svg" href="/image.svg"> 

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

Поэтому все выше описанное - актуально.

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов. Предельно простая, удобная, многофункциональная, полностью русифицированная административная часть. Простой и интуитивно понятный интерфейс, позволяющий, не имея специальных технических знаний или навыков программирования, работать с системой управления любому пользователю.

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Интернет-магазины создаем на CMS Joomla с немецким компонентом электронной коммерции - Joomshopping.

Подробнее о Joomla