Show Icon in Safari Pinned Tabs

bookmarksiconsafari

Screenshot of my pinned tabs in Safari

As you can see above, some of my pinned tabs show official icons (circled in yellow), while others are pinned with the first letters of the respective website titles (circled in red).

My personal website is www.saphryn.com, pinned on the far left. What should I tweak so that my logo shows in the pin?

Notes that might help:

  • My site is developed on the Wix platform.
  • As shown in the screenshot below, my logo/icon shows up in the suggestive search within the Safari omnibar.
  • Safari shows the first letter of the any website name if there is no logo that corresponds with the site when pinning it.
  • If the sight is bookmarked (as opposed to pinned), Safari will prioritize the first letter of the bookmark title over the actual website name.

Screenshot of logo appearing in omnibar

Any ideas?

Best Answer

Creating Pinned Tab Icons

Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible. You can set the icon that the user sees when they pin your site by providing a vector image.

Providing the Vector Image

Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent (replacing "website_icon" with your own file's name).

<link rel="mask-icon" href="website_icon.svg" color="red">

In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value (#990000), an RGB value (rgb(153, 0, 0)), or a recognized color-keyword, such as: red, lime, or navy.

So if Wix is not providing the option, you have to set it programmatically by editing your HTML code ;)

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

Related Question