我有一个页面可以通过javascript来修改favicon，这在chrome和firefox上都很好用，但是在Safari上就不行了，我甚至添加了<link rel="apple-touch-icon" href="favicon-1.png">部分，也通过javascript来修改，但是这也不管用。
页面如下所示：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
<link rel="icon" type="image/png" href="favicon-1.png">
<link rel="apple-touch-icon" href="favicon-1.png">
<style>
</style>
</head>
<body></body>
<script>
setTimeout(() => {
var favicon = document.querySelector('link[rel="icon"]');
var appleTouchIcon = document.querySelector('link[rel="apple-touch-icon"]');
favicon.setAttribute('type', 'image/png');
favicon.setAttribute('href', 'favicon-2.png');
appleTouchIcon.setAttribute('href', 'favicon-2.png');
}, 4000);
</script>
</body>
</html>有人能看出我做错了什么吗？
2条答案
按热度按时间deyfvvtc1#
这似乎是不可能的，甚至在this webkit issue简要提到。
引用：
...因为我们故意不允许动态更改/动画图标...
0wi1tuuw2#
转到safari中的页面，按option + command + e到“清空缓存”或转到开发/清空缓存。
这将解决图标不改变的问题。