Итак, я занимаюсь некоторыми исследованиями в отношении пользователей мобильных сайтов и наткнулся на то, что весь favicon.ico полностью устарел и все.
Оглядываясь, я понял, что мне нужны различные новые наборы изображений/значков, чтобы на самом деле представлять "значки" на различных мобильных устройствах, таких как телефоны Android, iPhone и Windows.
Теперь вопрос в том, что у меня есть следующий код:
<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">
но для меня это просто слишком большой кусок кода, чтобы просто показать значок. Поэтому мне было интересно, что я смогу удалить, и что я должен непременно сохранить, чтобы представить его на "большинстве" мобильных устройств.
Большинство других веб-сайтов, которые используют мобильные значки, используют только часть вышеупомянутого кода, являясь: 57x57, 72x72, 114x114 и 144x144, что все это значки с яблочным прикосновением. Точно так же изображения/коды действительно важны для 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">
Что, конечно, лучше для меня, так как количество кодов/изображений значительно уменьшилось. И пока это работает на большинстве современных мобильных устройств, я счастлив.
С комбинацией этого "cheat sheet" , this учебник и помощь Филиппа Б. Мне удалось это сделать.
В любом случае спасибо за всю помощь и, надеюсь, в ближайшие годы они составят правильный стандарт для значка!
