Pinned Favicon for Safari 9

In Safari 9, pinned sites need a special favicon format (see https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Sa… for details). Currently Newsblur does not have this and only presents the default favicon when pinned (a letter N).

Are you planning to get a proper favicon there, or are you waiting to see how many people pin Newsblur?

1 Like

Oh hell yes. That ‘N’ bugged me too! I’ll work on it later today.

2 Likes

Was just about to post the same.  :)  That “N” is tickling my OCD something fierce.

So I just updated this yesterday but I didn’t realize Safari only takes the silluoutte and not the actual icon. It just looks like a yellow ball right now. Not sure what to improve.

It’s mild gibberish to me, but the favicon and the safari tab icon are different:

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:  redlime , or  navy .

Note: Adjust your artwork as needed for the best presentation in the color you’ve specified. The pinned tab icon will not accept additional colors. You can improve the visibility of your icon by avoiding a light color, such as white, bright yellow, or light gray.

1 Like

Oh I know, I had to make the vector graphic for this feature request. I did but then I realized that it only uses the silhouette, which means you only see the shadow of the logo. Anyway, it’s no longer a red N.

It’s an orange circle, by the way. If it’s not, it’s cached. Safari likes to do that.

On my Safari, the N is  dark orange.  Don’t see the .SVG.    Any suggestions on resetting that cache?

Obviously, this shouldn’t be a high priority.  LOL   The uploaded SVG file appears to be full color, not b/w

Looks like the version of Safari in OS X 10.11.1 shows the entire icon rather than just the mask :slight_smile:

Updated recently: https://getsatisfaction.com/newsblur/topics/whoa-safaris-pinned-newsblur-icon-looks-smooth