I have a page that changes the favicon through javascript. This works great on chrome and firefox, but on Safari it does not work. I even added the <link rel="apple-touch-icon" href="favicon-1.png"> part and changed that through javascript as well, but that also does not do the trick.
The page looks like this:
<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>
Can anyone spot what I am doing wrong here?
I have a page that changes the favicon through javascript. This works great on chrome and firefox, but on Safari it does not work. I even added the <link rel="apple-touch-icon" href="favicon-1.png"> part and changed that through javascript as well, but that also does not do the trick.
The page looks like this:
<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>
Can anyone spot what I am doing wrong here?
Share Improve this question edited Oct 10, 2020 at 15:49 Rogier de Ruijter asked Sep 7, 2020 at 17:34 Rogier de RuijterRogier de Ruijter 9861 gold badge10 silver badges20 bronze badges2 Answers
Reset to default 7It seems like it is not even possible as briefly mentioned in this webkit issue.
Citing:
...Since we quite purposefully don't allow dynamic changes/animations to the favicon...
Go to your page in safari and press option + mand + e to 'EMPTY CACHE' or go to Develop/Empty Caches.
That will solve the problem of the favicon that doesn't change.