Моя команда сейчас разрабатывает веб-приложение на основе vue-cli, которое нацелено на работу с Safari (iOS) и Chrome (android). Фавикон обычно отображается в Chrome, но не отображается в Safari, или отображается на некоторых страницах, но не на некоторых.
Я размышлял над этой проблемой около двух недель. Я попытался принудительно обновить значок сайта ./favicon?v=2, либо использовать полный путь URL или относительный путь, либо использовать несколько других способов написания значка, но ничего не работает. Иногда фавикон просто показывают на секунду и исчезают. На некоторых страницах написано, что Safari iphone может быть сильно кеширован, но я не могу найти хороший способ очистить кеш.
Я использую vue-cli, поэтому тег ссылки ниже приведен в public / index.html, как показано нижеи значок favicon в public / favicon.ico.
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
после сборки приведенный выше код становится кодом, подобным
<link rel="icon" href="https://www.mysitesite.com/favicon.ico">
chrome android или chrome pc показывают нормально, но не safari ios
Я также попробовал некоторый код, подобный приведенному ниже, но он не работает.
<link rel="icon" href="https://www.mysitesite.com/favicon.ico?v=2" />
<link rel="icon" href="https://www.mysitesite.com/favicon.png?v=2" />
<link rel="icon" href="./favicon.ico?v=2" />
<link rel="icon" href="./favicon.ico?v=2" />
также я попытался сгенерировать путь favicon с помощью html-webpack-plugin, но непоказывать в сафари.
apple-touch-icon показывает, когда я добавляю в закладки, но значок favicon не отображается на вкладке сафари.
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">
Кто-нибудь знает решение или это просто ошибкав сафари? Большое вам спасибо.