I'm trying set a dynamic favicon(base64 image) in safari. It‘s doesn't works in safari but works in chrome.
js
let link = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABdklEQVQ4EcVSv0tCURQ+576HQxChPCUqKIIIGhTKwdkoaq2oIfoXmg0cg5zToT0aWpqCAp9ODQ5W6CBUFE0VGqZLQ977Tvc+uE97hA1BveX8+L7z3fud+wD+6iM7EuV2eM1/HqpGNNXcBYLZLyDCVTUTSqseFa057sCR5DQYw2NjvpHTXFMlUmXDQGNZN1UUIM5kSOthE8wVCLJH0fo4FYUw9IpALNW86x1WuepRYWyU29Y92cMzGqfyyEAnb11oO0wD38Yh542I6oKcuIe3nAl5ZcsAvFU914IH+hKMP71TfnKJQ/uc5yNgICtz4Ccmg01M1qtdAYIXvw0CeFYEXHhoaxEBTkQOr2Py9dJ31s+l8q524me6zyhPP5RAwgeWKpnQVizVWgQSOUB0uYpDQNzAwOr13mBN7yAhyVO9Ap4lomkAlq1kglmNx3aa+4CdcVnX+r+CnugT/19A76Dkee5et+SmiDdqiRLf1pD8uThA4EDXv4qf4ymQTghNuwIAAAAASUVORK5CYII='
const changeFavicon = (link) => {
let $favicon = document.querySelector('link[rel*="icon"]')
if ($favicon !== null) {
$favicon.href = link
} else {
$favicon = document.createElement('link')
$favicon.rel = 'icon'
$favicon.href = link
document.head.appendChild($favicon)
}
}
changeFavicon(link)
html
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>xxx</title>
</head>
when I check the dom, it has been replaced,but doesn't work
<link rel="icon" href="data:image/png;base64,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">
Is there something wrong? like Browser Compatible?
Blink
- so, just becauseWebKit
has stated that Safari intentionally does not support "dynamic" favicons - that decision has no impact onBlink