Иконка на рабочем столе

Question

Как установить иконку на сайт, чтобы при добавлении на главный экран телефона/пк там была иконка сайта, а не рандомная буква?

Answer 1

Файл manifest.json-это файл JSON, который позволяет настроить внешний вид и поведение запуска веб-приложения, которое закладывается или добавляется на рабочий стол устройства.

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

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:

Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
Splash screen
Цветовую тему
Ориентацию экрана
Начальный url и многое другое

Как добавить на сайт?

В head нужно разместить ссылку на manifest.json

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

name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»

short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно

icons – набор иконок разных размеров

start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)

display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)

background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Пример

{
  "name": "Web Starter Kit",
  "short_name": "WSK",
  "icons": [{
        "src": "images/touch/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "images/touch/apple-touch-icon.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "images/touch/chrome-touch-icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }],
  "start_url": "/index.html?homescreen=1",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Answer 2

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

Для устройств Apple это, например png-иконка размером 180х180 и указание её в head-сайта:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Кроме того, почему-то в некоторых случаях иконка не отображается если не добавить rel="shortcut icon", причём иконка для совместимости должна иметь тип .ico:

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

БЛОГ НА HUSL

Иконка на рабочем столе

Ответы (2 шт):