Мобильные Фавиконы

поэтому я провожу некоторые исследования относительно мобильного пользовательского сайта и наткнулся на факт всего favicon.ico полностью устарел и все.

оглядываясь вокруг, я понял, что мне нужны различные новые наборы изображений/значков, чтобы на самом деле представить "favicon" правильно на различных мобильных устройствах, таких как android, iphones и Windows phones.

теперь вопрос в том, что у меня есть следующий код:

<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">

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

большинство других веб-сайтов, которые используют мобильные фавиконы, используют только несколько вышеупомянутых кодов, а именно: 57x57, 72x72, 114x114 и 144x144, все это значки apple touch. Так что изображения / части кода действительно так важны для Iphone или других мобильных пользователей? Или это возможно он немного более оптимизирован?

в любом случае спасибо за информацию.

редактировать

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

<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

что, конечно, лучше для меня, поскольку количество кода / изображений значительно уменьшилось. И пока он работает на большинстве современных мобильных устройств, я счастлив.

С комбинацией этих "чит лист", в этом уроке, и помощь от Филиппа Б. мне удалось добраться до этого.

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