Site webmanifest что это
Манифест? А? Что? Зачем?
Многие из нас, кто работает над вебом, активно стараются уменьшить разрыв между нативными и веб-приложениями.
Но что это за разрыв? Всего несколько лет назад этот разрыв был, в большей степени, технологическим. Если вы хотели получить доступ к GPS устройства, вам приходилось писать нативное приложение. Сейчас ситуация несколько улучшилась: теперь мы можем получать доступ к датчикам устройства, вроде GPS, камеры и ориентации устройства — хотя впереди ещё долгий путь. Благодаря последним успехам веб-технологий, теперь у нас есть платформа, которая может конкурировать с нативными приложениями уже почти на равных.
Сегодня разрыв между нативными и веб-приложениями не столько технологический — дело в удобстве пользователей: они предпочитают устанавливать приложения, которые уютно живут на домашнем экране (или даже на рабочем столе, если речь про десктопные браузеры).
Кроме того, нативные приложения по умолчанию работают в офлайне и интегрируются с возможностями, которые предоставляет операционная система: например, возможность видеть установленные приложения в переключателе задач. Или возможность управлять настройками конфиденциальности приложения в том же самом месте, что и для приложений, установленных из магазина. Чтобы сделать что-нибудь подобное в браузере, мы всё ещё слоняемся по браузеру в поисках открытых вкладок и вводим длинные, скучные адреса.
Нам нужен такой способ «установки» веб-приложений, чтобы они были неотличимы от любого другого приложения, установленного на устройстве пользователя. Но в тоже время, мы не хотим потерять мощные функции, составляющие основу веб-платформы: связанность ссылками, просмотр исходного кода и возможность хостить собственные проекты.
Мы в веб-сообществе, как правило, называем это «прогрессивными веб-приложениями».
Что такое «установка»?
По сути, «установка» веб-приложения — это добавление «закладки» на домашний экран или в программу запуска приложений. Есть некоторые довольно очевидные вещи, которые вы, как разработчик, должны предоставить браузеру, чтобы тот мог считать сайт приложением: название, иконки, и т.д. Есть и более сложные функции, которые могут вам пригодиться, например, возможность указать предпочтительную ориентацию устройства и нужен ли вам полноэкранный режим.
Спецификация манифеста предлагает вам стандартный способ сделать это с помощью файла JSON. Просто сошлитесь на файл манифеста в HTML-странице следующим образом:
Но что находится в этом загадочном файле манифеста? Хорошо, что вы спросили!
Очень простой манифест
Самый простой манифест может состоять всего-то из имени и одной или нескольких иконок.
Типичный манифест
Более типичный манифест может выглядеть следующим образом. Имена его ключей должны говорить сами за себя, но мы подробнее опишем их использование ниже.
Название приложения
Ключ short_name служит названием приложения при отображении в условиях ограниченного пространства (например, под значком на домашнем экране телефона). Ключ name может быть немного длиннее, отображая название приложения полностью. Также он служит дополнительной информацией для пользователя, который ищет ваше приложения на телефоне. Так что, набрав «улётный» или «фото», пользователь сможет найти приложение на своем устройстве.
Но будьте внимательны: некоторые браузеры могут требовать указать название — иначе, ваше приложение может лишиться статуса «прогрессивное веб-приложение».
Иконки
Назначение иконки
Больше подробностей о назначении иконок можно найти в спецификации Web App Manifest.
Режимы отображения и ориентация
Приложения при запуске должны иметь возможность контролировать свое отображение на экране. Если это игра, то ей, вероятно, нужно быть в полноэкранном режиме и в горизонтальной ориентации. Для этого формат манифеста предоставляет вам два ключа.
Доступные значения режимов отображения:
Плюс такого указания ориентации в том, что она выступает в качестве «ориентации по умолчанию» для всего приложения. Поэтому, при переходе от одной странице к другой, ваше приложение остается в правильном положении. Вы можете изменить ориентацию по умолчанию с помощью API ориентации экрана.
Также вы можете применить другие стили для приложение в определённом режиме с помощью характеристики display-mode :
Стартовый адрес
Иногда при запуске приложения вам нужно, чтобы пользователь всегда попадал на определенную страницу. Ключ start_url даёт возможность это указать.
«Область» приложения
Нативные приложения имеют чёткие границы: как пользователь, вы уверены, что когда вы открываете нативное приложение, оно неожиданно не откроет другое незаметно для вас. Чаще всего, вам предельно ясно, что вы переключились с одного нативного приложения на другое. Обычно эти визуальные подсказки предоставляет операционная система (например, вызов диспетчера задач и выбор другого приложения или нажатие Cmd Tab или Alt Tab на компьютере).
С вебом все иначе: это огромная гипертекстовая система, в которой веб-приложение может охватывать несколько доменов: вы можете с легкостью перейти с gmail.com на docs.google.com и пользователь даже этого не заметит. На практике, идея существования границ приложения является абсолютно чуждой для веба. Ведь, в действительности, веб-приложение — это просто серия HTML-документов (представьте «серию труб»… м-м, нет, забудьте!).
В интернете мы знаем, что покидаем область одного приложения и переходим в другое, только благодаря веб-дизайнерам, которые были достаточно добры, чтобы сделать им уникальный различимый дизайн. В случаях, когда это не так, множество пользователей оказываются обмануты сайтами, маскирующимися под другие (старый добрый фишинг).
Формат манифеста решает эту проблему позволяя указывать «область адреса» для вашего приложения. Эта область устанавливает границы для приложения. Это может быть либо домен, либо директория на этом домене.
Интернационализация: lang и dir
Распространение приложения
Нужно написать с подробностями и скриншотами.
Цвет темы и цвет фона
Как мне определить, что пользователь «установил» приложение?
Однако по причинам конфиденциальности вы не можете непосредственно обнаружить, установлено ли ваше приложение — только узнать, что в вашем веб-приложении используется файл манифеста.
Причины для использования отдельного файла:
В спецификации есть более подробная информация о том, почему мы выбрали JSON вместо HTML-тегов.
Кто это внедряет?
Манифест и прогрессивные веб-приложения реализованы в Chrome, Opera и Samsung Internet для Android. Firefox также подаёт обнадёживающие сигналы, что будет поддерживать эти стандарты (реализации в Gecko уже больше двух лет, но она не используется ни в одном из продуктов).
Взаимодействие с поисковыми роботами
Как и другие веб-ресурсы, манифест веб-приложения должен быть доступен для любого веб-браузера или поискового робота.
Если разработчик веб-приложения хочет известить поисковых роботов о запрете на сканирование файла, он может сделать это включив манифест веб-приложения в файл robots.txt. Это описано подробнее в протоколе robots.txt. Разработчик веб-приложения также может использовать HTTP-заголовок X-Robots-Tag.
Авторы
Основная часть этого пояснения первоначально появилась в статье « The W3C App Manifest specification» на HTML5 Doctor, и была написана Маркусом Касересом и Брюсом Лоусоном. Данный материал публикуется на основе лицензии для некоммерческое использования. Вы можете спокойно изменять, повторно использовать, модифицировать и расширять это пояснение. Некоторые авторы сохраняют свои авторские права на отдельные статьи.
Минимальное PWA
В данной публикации я попробую найти минимальный набор характеристик, которым на данный момент должно соответствовать web-приложение, чтобы называться «прогрессивным», а также отвечу на вопрос, почему в августе этого года некоторые «прогрессивные» приложения перестанут быть таковыми.
Принципы отбора характеристик
Я возьму пустой HTML-файл и буду постепенно добавлять к нему артефакты, превращающие его в PWA, пока мой смартфон не решит установить это приложение, а Chrome не перестанет выкидывать предупреждения. Chrome выбран по причине того, что основным «движителем» технологии PWA на данный момент является Google.
HTTPS
App Shell
Manifest
Манифест является непосредственным маркером того, что данная страница является частью прогрессивного web-приложения. Подключается манифест в заголовке HTML-страницы:
Пустой манифест генерирует такие сообщения об ошибках в Chrome:
Вот минимальное содержимое, которое не вызывает появления в Chrome предупреждений:
Как видно из предупреждений Chrome’а, иконка должна быть размера 144×144 минимум и в формате PNG, SVG или WebP. Примерно такую я и сделал:
В общем случае может быть множество иконок различных размеров.
Service Worker
Service worker подключается через скрипты в оболочке приложения ( index.html ):
Минимальное содержимое файла sw.js :
вызывает вот такое предупреждение в Chrome: Page does not work offline
Теперь предупреждение изменилось на:
Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.
Моя текущая версия Chrome: Version 89.0.4389.72 (Official Build) (64-bit)
Тем не менее, смартфон предлагает установить приложение при заходе на страницу:
То есть, на данный момент service worker может быть номинальным, но в ближайшем будущем (в августе 2021-го) этого будет недостаточно.
Кэширование
Чтобы наше приложение оставалось PWA и после августа 2021-го, нам нужно добавить кэширование файлов, входящих в оболочку приложения. Вот полный код service worker’а:
С таким service worker’ом наше приложение будет считаться прогрессивным и в Chrome 93+. Вот какие файлы легли в кэш:
Но это уже особенности работы браузера, а не PWA.
Резюме
Чтобы web-приложение считалось прогрессивным (в том числе и после августа 2021-го) оно должно удовлетворять следующим условиям:
Использовать шифрование (HTTPS).
Оболочка приложения (загружает манифест приложения).
Манифест (загружает иконку и service worker).
Кэширование файлов оболочки приложения.
При соблюдении этих условий PWA устанавливается на смартфоне:
Послесловие
На написание этой статьи меня натолкнуло сообщение в Chrome о том, что с версии 93 web-приложения без кэширования оболочки приложения более не будут считаться прогрессивными и им будет отказано в установке. Я вышел на PWA через такое замечательное приложение, как Vue Storefront. Разработчики провели гигантскую работу и привязали к Magento 2 фронт, созданный с использованием современных технологий (положа руку на сердце, оригинальный фронт Magento 2 очень сильно отстал от современных тенденций web-разработки).
Именно поэтому разработчики Vue Storefront не стали заморачиваться с автономной функциональностью, ограничившись кэшированием статики и некоторых данных. Именно поэтому для Vue Storefront вылетает сообщение о том, что в Chrome 93+ их приложение более не будет считаться прогрессивным (демо, откройте консоль). Кстати, для собственной PWA-разработки самой Magento ситуация аналогичная.
In December 2020, Firefox for desktop abandoned implementation of PWAs (specifically, removed the prototype «site-specific browser» configuration that had been available as an experimental feature). A Firefox architect noted: «The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon.» Mozilla still plans to support PWAs on Android.
Разработчики Firefox не собираются поддерживать PWA в десктопной версии своего браузера.
Нельзя сказать, что PWA являются чисто Google’овской технологией:
всё-таки поддержка PWA-технологии различными браузерами на различных платформах достаточно объемлющая. Но дрейф в сторону «мобилизации» технологии я игнорировать не могу.
Другими словами, если вам нужно именно web-приложение, то вам не нужно PWA. А вот если вам нужно разработать именно мобильное приложение, то PWA может быть приемлемым вариантом.
Использование манифеста веб-приложения для интеграции прогрессивного веб-приложения в операционную систему
Манифест веб-приложения веб-сайта определяет, как ваше прогрессивное веб-приложение (PWA) выглядит и ведет себя при установке на устройстве. Манифест веб-приложения содержит такие сведения, как имя приложения, расположение файлов значков, которые представляют ваше приложение в системных меню, и цвета тем, которые операционная система (ОС) использует в панели заголовков.
Манифест веб-приложения — это файл JSON, который должен ссылаться на HTML-страницу вашего веб-сайта с помощью ссылки манифеста. Вставьте следующий код между тегами HTML-страницы вашего сайта и тегами для ссылки на файл манифеста:
Как минимум, файл манифеста должен содержать следующие сведения:
Дополнительные PWA можно настроить с помощью других участников манифеста, таких как следующие:
В следующем файле манифеста используются следующие участники манифеста:
Дополнительные новости о членах манифестов см. в веб-манифестах приложения в MDN.
Использование манифеста также позволяет разблокировать мощные функции, которые позволяют приложению вести себя как родные приложения, такие как добавление ярлыков приложения или определение в качестве целевой аудитории.
Использование ярлыков для обеспечения быстрого доступа к функциям
Большинство операционных систем обеспечивают быстрый доступ к ключевым функциям приложения с помощью ярлыков в меню правой кнопкой мыши, подключенном к значку приложения. Чтобы использовать ярлыки в PWA, включите свойство shortcuts в манифест веб-приложения.
В следующем коде показано, как определить ярлык в манифесте веб-приложения.
Определение приложения в качестве целевого показателя share
Чтобы пользователи могли быстро обмениваться ссылками и файлами с родными приложениями, используйте share_target объект в Манифесте веб-приложений. Страница action похожа на форму. В объекте определяется страница и параметры, которые должны быть share_target action переданы на action страницу.
Дополнительные материалы об использовании функции Share Target см. в раздел Share content with other apps.
Её величество иконка в 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 можно прописать по разному, я использую все сразу, чтобы угадать:
Для форматов png или gif:
Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.
Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.
Смотрите сами неполный список рекомендаций:
Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:
Разметка link примерна такая:
Уверен, вы уже схватились за голову. Караул. Это ж сколько рисовать всего, да еще вставлять столько тегов.
А еще появился Manifest.json и browserconfig.xml.
По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.
Но сначала разберемся с этими файлами, а не с иконками разных размеров.
Manifest.json
Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.
Подключение файла как и всего остального в head:
Пример простого файла:
Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.
Кратко пройдемся по параметрам:
Как быстро все реализовать:
1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.
Выставляем в нем галочки как на скриншоте:
Выбираем созданную заранее картинку и генерируем.
И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.
Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).
Я исправил в нем только имя:
Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.
Правьте в NotePad++ в UTF-8 без BOM.
Вставил полученные на этом же сервисе теги в head:
И кинул все иконки в главную директорию (не хотелось пути менять).
В результате, добавив ссылку на экран IPhone, получил такое:
А совсем недавно такое работало только на андроид системах. Прогресс идет.
Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.
Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?
А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).
Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
Если не указывать эту иконку, то браузер будет отображать первую букву домена вашего сайта.
В 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
apple-touch-icon-180.png: Apple touch icon
safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari
mstile-150×150.png: MS плитка
Файл manifest.json, использующий изображение chrome:
Файл browserconfig.xml, использующий изображение mstile:
Но проще воспользоваться сервисом. Ничего страшного и утяжеляющего сайт не будет, если вы все сделаете как я написал.
Можно и закончить эту публикацию, но осталась одна важная вещь:
Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).
Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.
Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.
Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это.
После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат 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:
Используйте фавиконки правильно
Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.
Фавиконка при установке веб-приложения Фавиконка на вкладке в браузере
Подключение
Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.
Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.
Обязательная фавиконка
Для подключения нужно добавить в :
Обратите внимание на две детали: размер и расположение.
Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Дополнительные необходимые фавиконки
Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:
Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:
Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.
Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:
Для устройств Apple
Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.
Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:
Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.
Манифест
Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.
Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.
Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.
Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:
Осталось добавить фавиконки по шаблону:
Если иконок несколько, то их нужно добавить через запятую:
Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.
src — путь до иконки;
sizes — размер иконки.
Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:
Откуда брать фавиконки и как их приготовить
Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.
Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:
Не добавлять фавиконки в проект.
Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.
Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.
При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.
Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.
Итоговый способ подключения фавиконки:
manifest.webmanifest
Таким способом мы будем поддерживать самые старые браузеры и самые новые.
Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.
Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.