Цвет темы и значки приложения

Тег <meta name="theme-color" content="#1f2937"> задаёт цвет адресной строки браузера на мобильных устройствах и цвет строки заголовка в PWA на компьютерах. Он придаёт странице аккуратный вид приложения, не изменяя её содержимое.

Задайте отдельные цвета для светлого и тёмного режимов: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> и второй тег с тёмным цветом. Браузеры выбирают подходящий вариант на основе предпочтений пользователя в OS.

Цвет темы манифеста задаёт цвет, когда приложение работает как установленное PWA (заголовок окна в автономном режиме). Для единообразия сопоставьте его с метатегом цвета темы на странице — при работе в браузере и в установленном приложении визуальный образ остаётся одинаковым.

<link rel="icon" href="/favicon.ico"> — классический значок вкладки браузера. Несмотря на название, современные браузеры предпочитают PNG или SVG формату ICO. Добавьте PNG размером 32x32 через <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> для более чёткого отображения.

Современные браузеры поддерживают фавиконы в формате SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Изображение остаётся чётким при любом размере, а файл занимает мало места. Используйте этот вариант для векторных логотипов и добавьте PNG как резервный вариант для браузеров, которые не поддерживают SVG-фавиконы.

На домашнем экране iOS используется сенсорный значок Apple: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Добавьте PNG размером 180x180. iOS не считывает значки веб-манифеста при установке на домашний экран, поэтому ссылка на сенсорный значок Apple обязательна.

При установке на Android значки считываются из массива значков манифеста. Добавьте PNG размером 192x192 (для домашнего экрана) и 512x512 (для заставки и списка приложений). Добавьте копию со свойством «для маскирования», чтобы Android мог подогнать форму значка под форму значков домашнего экрана (круг, скруглённый квадрат или квадрат).

Основное содержимое маскируемых значков должно помещаться в центральную безопасную зону размером 80% — внешние 20% могут быть обрезаны в зависимости от формы маски устройства. Используйте такие инструменты, как maskable.app, чтобы во время разработки просматривать значок с разными формами маски.

Для закреплённой плитки Windows 8/10 используются: <meta name="msapplication-TileImage" content="/tile.png"> и <meta name="msapplication-TileColor" content="#1f2937">. Сейчас это менее приоритетно, чем поддержка других платформ, но пользователи Windows, закрепляющие сайты, по-прежнему оценят такую возможность.

Старые версии IE и Edge: <meta name="msapplication-config" content="/browserconfig.xml"> указывает на XML-файл со значками плиток разных размеров. Сегодня это практически неактуально, поэтому новые сайты могут без последствий отказаться от browserconfig.xml.

Закреплённая вкладка Safari в macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. SVG должен содержать одноцветный значок, поскольку цвет переопределяется атрибутом цвета. Эта возможность используется только для закреплённых вкладок Safari в macOS.

Используйте realfavicongenerator.net, чтобы создать все варианты значков из одного исходного файла. Проверьте их на реальном устройстве iOS (добавьте сайт на домашний экран) и на Android (установите приложение через меню браузера), чтобы убедиться, что значки отображаются правильно, без неправильной обрезки и пикселизации.

Цвет темы (с вариантами для медиазапросов) окрашивает адресную строку, а цвет темы манифеста — заголовок окна установленного приложения. Значки включают фавиконы (SVG и PNG), сенсорный значок Apple (iOS, 180x180), значки манифеста (Android, 192 + 512 + вариант для маскирования), значок-маску Safari (одноцветный SVG) и значок плитки Windows. Используйте realfavicongenerator.net, чтобы создать все варианты из одного исходного файла.