Задать вопрос
@resibe
19-летний пушистик
веб-разработка

Зачем столько иконок?

Здравствуйте, я создал новый pwa проект vue@next с @vue/cli@next
index.html yarn build мне сгенерировался в виде 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>site</title>
    <base />
    <!--[if IE]><link rel="icon" href="/favicon.svg" /><![endif]-->
    <script defer="defer" src="/js/chunk-vendors.js"></script>
    <script defer="defer" src="/js/app.js"></script>
    <link href="/css/app.css" rel="stylesheet" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/img/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/img/icons/favicon-16x16.png"
    />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#4DBA87" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="site" />
    <link
      rel="apple-touch-icon"
      href="/img/icons/apple-touch-icon-152x152.png"
    />
    <link
      rel="mask-icon"
      href="/img/icons/safari-pinned-tab.svg"
      color="#4DBA87"
    />
    <meta
      name="msapplication-TileImage"
      content="/img/icons/msapplication-icon-144x144.png"
    />
    <meta name="msapplication-TileColor" content="#000000" />
  </head>
  <body>
    <noscript
      ><strong
        >We're sorry but site doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

Собственно почему для IE особая иконка в виде 
<!--[if IE]><link rel="icon" href="/favicon.svg" /><![endif]-->

разве из 
<link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/img/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/img/icons/favicon-16x16.png"
    />

не будет всегда выбираться 1 вариант?
  • Вопрос задан
  • 179 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Kiriniy
@Kiriniy
Графический и веб-дизайнер
Это какая-то ерунда, IE никогда не поддерживал SVG для фавок. Ещё и с ошибкой, тип для svg "image/svg+xml", а тут должна была бы быть ico, но и её не стоило ограничивать комментом. Вообще, если вам нужна максимальная поддержка устаревших браузеров, то иконок ещё мало, а если речь про 2021, то действительно слишком много.

Сейчас такой набор выглядит примерно следующим образом. Для устаревших — favicon.ico с типом "image/x-icon", далее основная в svg, которая ещё и берёт на себя тёмные темы, ибо внутри неё можно использовать css и одна apple-touch-icon.png размером в 180 пикселей + site.webmanifest, в котором прописываются большие png. Достаточно будет на 192 и 512px. В него же переносятся все эти theme-color, apple-mobile-web-app-capable и тд.

Иконка safari-pinned-tab.svg с 12 версии сафари больше не нужна, а для msapplication-icon-144x144.png лучше использовать файл ieconfig.xml с необходимыми инструкциями, хотя и это нужно только для старых версий.

Если конкретно, то как-то так:

<link rel="manifest" href="site.webmanifest">
<link rel="shortcut icon" type="image/x-icon" sizes="any" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="/img/icons/icon.svg">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png">
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик
Idea Platform • Москва
от 60 000 до 160 000 ₽
FullStack GameDev Developer (remote)
Wind4Tune
от 60 000 ₽
Менеджер проектов (разработка / интеграция ПО)
КБМК • Москва
от 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработки на вордпрессе
25 дек. 2024, в 16:30
500 руб./в час
Цифровой ассистент для автосервиса и MVP цифрового колл-центра
25 дек. 2024, в 15:57
300000 руб./за проект
Telegram-бота для таксопарка
25 дек. 2024, в 15:45
1200 руб./в час
Ещё заказы