10

I am wanting to add custom favorites icons (i.e. new tab page) for my website in Safari 8 on Yosemite. I have tried the open graph tag og:image with both png and jpg formats. I have also looked over the source of several sites that had the custom icons in my favorites page, including a site that appeared to update its icon, and I still cannot find the right way to include these icons. Any help? Thanks.

  • You speak about favicon ? – StrawHara Oct 22 '14 at 5:05
  • No. I am referring to the favorites icons in the new tab page in Safari. – preahkumpii Oct 22 '14 at 5:06
  • You have tried to delete the associated file in /Users/USER_NAME/Library/Safari/LocalStorage/http.yourwebsite.localstorage before adding your website in Favourite ? – StrawHara Oct 22 '14 at 5:19
  • Yes. Nothing happens. The custom icon has never showed. Only default icon has shown, making me believe that I am not implementing the use of the icon properly. – preahkumpii Oct 22 '14 at 5:48
  • 1
    @MrMojoRisin It's for the user personal Safari layout. This is definately the right place here. And now I seriously wonder how to do this.. – Rob Oct 22 '14 at 6:18
3

This is not related to OS X, so I’ll let the moderator move this question to other network. But I’m still going to answer this. The one you’re talking about is Apple Touch Icon which can be implemented by using the markup below:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

There are multiple sizes because it needs to support Retina and non-Retina display.

Source: CSS Tricks

  • Not working. I added these at the 57, 120, and 152 sizes (as per the apple website) and the favorites are not responding. – preahkumpii Oct 24 '14 at 11:17
  • What is your website? – sayzlim Oct 24 '14 at 11:41
  • pintsizedtreasures.com – preahkumpii Oct 24 '14 at 16:16
  • I opened your site and didn’t find the mentioned touch icons. Have you inserted it? – sayzlim Oct 25 '14 at 3:12
  • I did insert them, but the icons did not show, so I removed them. Now, however, the favorite icons are now showing in Safari. I have no idea why. Go figure. – preahkumpii Oct 25 '14 at 6:15
0

Safari (at least version 9.0.2 on Yosemite) does not show favicon in the tabs. For a client side solution i recommend SafariStand. It is a SIMBL plug-in that adds many extra features to the Safari such as favicon on tabs and bookmark bar, separate download and bookmark panel, and other tweaks.

You must log in to answer this question.

protected by Community Jan 9 '16 at 15:08

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged .