CODEWITHSUNDEEP
htmlsafarimeta-tagsfavicon
user12359228
user12359228

Reputation:

Safari favicon incorrectly rendering with white background

Edit: I have discovered that this is due to dark mode because there not enough contrast between the favicon and the background. However, is there still a way to disable this? I made a mock image file with the icon and the contrast seems to be enough.

I am attempting to add a favicon to an HTML website. However, in Safari, the favicon is incorrectly rendered with a white background (see image below). This is unexpected, as the file provided is a transparent svg.

To include the favicon into safari, I used the mask-icon link attribute to tell Safari where the favicon is located at. If this is not defined, Safari will use the default favicon in the icon link attribute. However, my icon does not work well in Safari like this, so a separate one is defined for Safari using the code below.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2163d9">

This follows Apple's developer guidelines on creating pinned tab icons. The guidelines state that the image file should comply with the following:

Here is the SVG file.

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <defs>
        <style>.a{clip-path:url(#b);}</style>
        <clipPath id="b">
            <rect width="16" height="16"/>
        </clipPath>
    </defs>
    <g id="a" class="a">
        <g transform="translate(-254 -191.5)">
            <path d="M299.962-203.031l-3.973-2.485L299.962-208Z" transform="translate(-31.961 405.016)"/>
            <path d="M-42.6-75.784l5.539,2.769,6-3.985-4.8-3Z" transform="translate(299.062 280.016)"/>
            <path d="M-82-313l6-3,5.625,4.219L-82-304.515Z" transform="translate(338 508)"/>
        </g>
    </g>
</svg>

However, this still results in the incorrect rendering of the favicon. I have cleared the cache of the website and tried on an entirely different host, but the issue persists.

The favicon however is correctly displayed in the MacOS touch bar (see image below).

Does anyone have any idea why the Safari favicon is being rendered incorrectly?

Computer internet browser

MacOS Touch Bar

Upvotes: 20

Views: 18656

Answers (2)

lyra
lyra

Reputation: 131

I ran into the same issue on my own website (lyramsr.co) and have fixed it by slightly increasing the brightness of the normal favicon and changing the colour of the mask icon accordingly. (The colour was #1C806C, and is now #218D78.) This has made the white background disappear, so clearly the issue was contrast, although I’m puzzled as to how the browser determines what the appropriate amount of it is.

Safari 14 doesn’t appear to need the mask icon. It overrides the normal favicon when present, but when I remove it from the site it just uses the favicon, and that looks fine. I didn’t even notice the difference at first, since my normal favicon also uses only two colours.

Upvotes: 3

user3934058
user3934058

Reputation:

The color attribute in link rel="mask-icon" for Safari Pinned Tab Favicon, is not controlling the background, but the colour of the actual icon. This is expected.

In the example, the color attribute sets the display color of the image

However, as you correctly recognized it depends on Dark or Bright mode. The white background is only added to Favicons in Safari when we use Dark Mode.

That would explain it, also other Blogs come to this conclusion, that in Dark mode, Safari automatically adds the White Background.

And yet that can't be the truth. Apple, Google, and many other websites, if visited on Safari in Dark Mode, do not have that white background in the (pinned/tab) Favicon. Additionally many of them with very low contrast.

I noticed reading online, Safari Favicons should be monochrome SVG where we define the (favicon) colour with the color attribute only. I've created a Favicon following this principle but still, I get the white background in Dark mode.

References: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon https://makandracards.com/makandra/26757-do-not-use-transparent-pngs-for-ios-favicons

A possible Solution

Assume a white Favicon in Dark mode and a Black favicon in Bright mode.

if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
        console.log('dark');
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v=your_dark_mode_fav" color="white">'
        );
    }
    else {
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v= your_bright_mode_fav" color="black">'
        );
    }

This won't change on the fly and needs cache claering to be pushed to visitor.

I'll proceed with researching, this is still not satisfying enough.

I wonder what happens if you put a tiny (one pixel) white border around the favicon image. That should (for the computer program analysing it) be like a very high contrast and hence avoid the white background added, and it'd be invisible to the nude eye.

Funny fact: I run in the same issue with almost the same colour as you did #0075be And I also think that's contrasting enough, but it seems not.

Upvotes: 6

Related Questions