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.

Improve this question
10
  • You speak about favicon ?
    – StrawHara
    Oct 22, 2014 at 5:05
  • No. I am referring to the favorites icons in the new tab page in Safari.
    – preahkumpii
    Oct 22, 2014 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, 2014 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, 2014 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, 2014 at 6:18

2 Answers 2

Reset to default
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

Improve this answer
7
  • 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, 2014 at 11:17
  • What is your website?
    – sayzlim
    Oct 24, 2014 at 11:41
  • pintsizedtreasures.com
    – preahkumpii
    Oct 24, 2014 at 16:16
  • I opened your site and didn’t find the mentioned touch icons. Have you inserted it?
    – sayzlim
    Oct 25, 2014 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, 2014 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.

Improve this answer

You must log in to answer this question.

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