Favicon not displaying on Safari

Question

I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.

I am currently using Safari 14.0.3 and Google Chrome to test this.

I have included the following HTML code to display my favicon:

<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">

The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:

Where it is showing correctly in Safari:

Where it is not showing in Safari:

Note: I am trying to get the globe favicon to display.

I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.

What I have tried so far:

1. Clearing all of my Safari Cache (clearing all of the history)
2. Emptying all of the Cache
3. Deleting all of the files in the Safari Favicon Cache folder on my Mac

When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.

I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?

Thanks.

Answer 1

you can try use this tool: https://realfavicongenerator.net/

it's worked for me

Answer 2

I figured it out -

There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:

<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">

will make the favicon display in the top search bar on Safari as well as on Google Chrome.

The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:

<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ" 
 color="#000000">

Editing this line will allow for the favicon to be displayed on the Safari tab.

Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.

Answer 3

First, check that there aren't any other web pages on your site that are setting the favicon. If there aren't it is just a little safari bug.

I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.

Answer 4

For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg , the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:

<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">