2

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?

Improve this question
1

1 Answer 1

Reset to default
2

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

Improve this answer
3
  • Why can't all answers be written like yours lol ;). I'll try it tonight.
    – saphryn
    Commented Nov 16, 2015 at 13:29
  • @SaphrynShikaze ah ah thanks a lot, but the most of my answer is coming from the apple documentation ;)
    – StrawHara
    Commented Nov 16, 2015 at 13:34
  • So apparently Wix doesn't allow for SVG files to be uploaded to its library. I'm trying to figure out another work-around, but no luck yet.
    – saphryn
    Commented Jan 4, 2016 at 4:20

You must log in to answer this question.

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