2

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?

9
  • did you check your browser developer tools console for error? Commented Oct 12, 2022 at 8:42
  • no error message
    – Shir
    Commented Oct 12, 2022 at 9:02
  • did you search for your issue anywhere? like on stack overflow - stackoverflow.com/questions/63781987/… Commented Oct 12, 2022 at 9:04
  • yep,but chrome works, they are all WebKit
    – Shir
    Commented Oct 12, 2022 at 9:12
  • except that Chrome forked WebKit back in 2013, and Chrome's browser engine is now called Blink - so, just because WebKit has stated that Safari intentionally does not support "dynamic" favicons - that decision has no impact on Blink Commented Oct 12, 2022 at 9:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.