MacOS – How to get custom favorites icons in Safari 8 on Yosemite

macossafari

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.

Best Answer

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

Related Question