Search code examples
htmlsafari

Favicon not displaying on Safari

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:

enter image description here

Where it is not showing in Safari:

enter image description here

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.

Solution

  • 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.