Я использовал онлайн-инструмент RealFaviconGenerator для создания фавиконов для своего веб-сайта с поддержкой различных устройств и браузеров.
Большинство моих фавиконов имеют прозрачный фон, за исключением apple-touch-icon, так как iOS добавляет черный фон, чего я не хочу. Итак, я вручную добавил белый фон и использовал это изображение для iOS.
Фавиконы хорошо работают со всеми устройствами, которые я тестировал до сих пор, за исключением Google Chrome на iOS (в частности, iPad mini 1). Я хочу, чтобы браузер использовал один из значков с прозрачным фоном, как на компьютере (вероятно, favicon.ico или favicon.png). Однако вместо этого Chrome использует один из apple-touch-icon с белым фоном.
Мой вопрос: это нормальное поведение для Chrome на всех устройствах iOS или я делаю что-то не так?
Дополнительная информация:
Я не уверен, что это актуально, но я все равно добавляю это.
Чтобы упростить организацию изображений фавикона, я поместил их все в отдельную папку (вместо корневого каталога). Однако я оставил файлы favicon.ico и browserconfig.xml в корневой папке и удалил явные link, как рекомендует FAQ генератора:
Когда ваш значок находится в корневом каталоге, RealFaviconGenerator не генерирует этот код. Это потому, что это как-то сбивает с толку некоторые другие браузеры, такие как Chrome. А поскольку IE все равно ищет файл с именем favicon.ico, лучшим решением будет даже не говорить об этом.
По умолчанию Internet Explorer 11 ищет файл browserconfig.xml в корневом каталоге веб-сайта.
Любая помощь будет принята с радостью!
ОБНОВЛЕНИЕ:
Вот что у меня сейчас в <head>. Обратите внимание, что я также добавил favicon.ico как <link>. Когда я пытался использовать это, поначалу все работало нормально, а iOS Chrome отображал правильный значок значка. Однако, когда я обновил страницу один раз, фавикон вернулся к предыдущему белому фону и остался прежним.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/pics/icons/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/pics/icons/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/pics/icons/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/pics/icons/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/pics/icons/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/pics/icons/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/pics/icons/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/pics/icons/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/icons/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/pics/icons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/pics/icons/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/pics/icons/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/pics/icons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/pics/icons/manifest.json?v=2">
<link rel="mask-icon" href="/pics/icons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/pics/icons/mstile-144x144.png?v=2">
<meta name="theme-color" content="#ffffff">
