Safari (Mac) refuses to display favicon

1

I’m sure I’m not the only person to get this, as it happens to me on all my Macs.

Safari, nine times out of ten, displays a site favicon incorrectly in the browser bar. Normally the colour is removed; sometimes the whole thing just appears as a box.

For a long time now I’ve kept Googling for a solution, and it’s pretty much impossible to find anyone else talking about it, let alone a solution. I think I heard yonks ago that it’s about contrast is the colours, but no matter what I try, it rarely works.

Does anyone else see this? Any fix?

To give you an example. I’ve just made this icon…

1000-get-stretchy-icon
1000-get-stretchy-icon1000×1000 63.7 KB

It appears like this…

Screenshot 2023-11-20 at 16.43.38
Screenshot 2023-11-20 at 16.43.38968×138 2.38 KB

2

Can you try building the favicon here:

Then you will need to use safari developers tool to empty the entire Safari cache from Develop menu or using this keyboard shortcut ⌥⌘E. You may have to reload the page once or twice but then it should show as planned.

3

Nice link, thanks.

That site says Sfari will turn the icon to monochrome. Which it does. But not always. For instance the facebook icon is always in colour. So I’m assuming there is some formula to hit with favicons for Safari. But no idea what it is!

EDIT: Quite a lot of favicons appear in the correct colour, even the one for this site. So what is the key? This is what I just don’t great!

Screenshot 2023-11-21 at 09.22.27
Screenshot 2023-11-21 at 09.22.272620×128 19.1 KB

4

Did you clear the cache using the dev tools? And you did use RW to add the favicon?

→ Please make sure the URL is the same in the publishing settings as in the General Settings, otherwise the favicon will not be loaded. In this case you will see an error in the console.

5

I haven’t yet made any changes, simply because as I can see it right now, the favicons produced by that site won’t make any difference. The site itself says that Safari will turn favicons into monochrome, which it doesn’t. As per the image above, even the favicon for the site itself is in colour!

This is what I need to understand: Why does safari turn some monochrome, and not others? There seems to be no pattern or logic.

BTW- I use Affinity Designer to make the favicons. I export them as PNG’s and SVG’s, then add them to the RW project using the built-in feature. Which perhaps is the problem?

6

Hi, for your site it looks ok - this seems to be svg one:

image

7

So that is the SVG I uploaded, but converted to monochrome. So yes, that is correct, as per the site you linked to.

But my point is… Safari doesn’t convert all SVG favicons to monochrome. An example of which is this site. The favicon is colour. So what I want to understand is why does it convert some to mono, but not others?

I’ve read that it’s all down to contrast, but I can not prove that based on tests. As matter how contrasting the colours are that I use, Safari converts to mono.

Perhaps this is something to do with RW, and not Safari?

EDIT: For instance, I’ve just uploaded the SVG below to this site: https://getstretchy.yoga it’s rendering incorrectly. But the colours are massively contrasting, it’s the regular Facebook SVG.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <circle cx="24" cy="24" r="23" style="fill:rgb(24,119,242);"/>
    <path d="M32.953,30.648L33.973,24L27.594,24L27.594,19.686C27.594,17.867 28.485,16.094 31.342,16.094L34.242,16.094L34.242,10.434C32.539,10.158 30.819,10.008 29.094,9.984C23.84,9.984 20.406,13.168 20.406,18.933L20.406,24L14.566,24L14.566,30.648L20.406,30.648L20.406,46.72C22.787,47.093 25.213,47.093 27.594,46.72L27.594,30.648L32.953,30.648Z" style="fill:white;fill-rule:nonzero;"/>
</svg>
8

@tav or @Marten could one of you send me the SVG you used for the favicon for this site, please?

I want to test it on the site in question.

My thinking is, if it renders incorrectly on the RW site, but renders correctly (in colour) on this site, it must be down to how RW is publishing it.

9

Just tested a bit:

There are two ways to display the favicon:

  • one is the browser window
  • one is the tab bar

If the website is displayed within its own window, the normal favicon will be used.
If the website is displyed in a tab, the svg monochrom icon will be used.
→ If no svg is avaible the normal favicon with colors will be used, so you see this as a tab icon as well

You may need to delete the cache and close and open the site again to see the effect. I just deleted my svg icon from the RW tools, then uploaded the site again.

4 Likes
10

Ha! Well look at that. If you don’t upload an SVG Safari just uses the PNG! How mad is that? This is obviously how some sites get a colour favicon on Safari: They don’t publish an SVG version.

Huge well done for working that out. And many thanks.

Of course, it raises the question… Why upload an SVG at all? I realise if someone was to pin the site to a phone desktop you need an SVG for that, but really, who does that nowadays?

It’s just another of those instances where Apple does something utterly illogical.

Many thanks Jan.

2 Likes