Safari’s pinned tabs support (Mac OS X El Capitan)

Apple released Mac OS X “El Capitan” a few days ago. Safari comes with pinned tabs, a cool feature to keep some sites around. The feature itself is not new, but Safari makes it really neat (at 0:48). Guess what? There is a new icon. RealFaviconGenerator lets you design yours in seconds. Time to generate your favicon again!!

The new icon for Safari’s pinned tabs

No, Apple didn’t recycle one of the numerous existing icons, such as its famous Touch icon for iOS. It specifies a new, proprietary icon. The big news is its format: SVG. For (arguably) the first time in favicon (and derivatives) history, a vector format is used instead of a classic bitmap format, usually PNG. I’m not sure Apple chose it for its scaling ability. Tabs icons are small. But it is probably easier to play with colors with a vector image. Which Safari does when a tab is rolled over or selected.

Unlike most favicon-related images, this new icon comes with design requirements. Well, one requirement. The icon must be monochromatic. Black with a transparent background. The icon is completed by a “theme color”. When the tab is not selected, Safari renders the icon in grey. When the tab is active, Safari uses the theme color. So it should probably be the dominant color of your original icon or logo to make it consistent with your site.

Support in RealFaviconGenerator

Creating this icon can be more challenging than usual. Many times, icon design takes place in the bitmap world. Gimp in my case. Creating an SVG picture out of a flat bitmap can be a daunting task. As always, RealFaviconGenerator’s mission is to provide no-brainer settings to get the job done in seconds.

Transparent favicon? Use Silhouette

If your icon has a transparent background, using its silhouette can be a winner. Take the demo icon:

Demo icon

Its silhouette fits the pinned tab just nicely:

Great!

But what if the original picture is not transparent, or if its silhouette is not relevant? Hum… We need something else. Take RFG’s logo:

Favicon master picture

Its silhouette is quite useless:

Oh.

Monochromatization

Yep, “monochromatization” brings results when you google it, although it has nothing to do with graphics. Sorry.

The other option is to first turn the picture into a black-and-white version. You can test various thresholds in order to find the perfect setting for your particular case. Although the results vary from an image to another, there is normally a threshold that works well. During my tests, no picture was left behind.

What I get with RFG’s logo:

Very low threshold
Very low threshold
Low threshold
Low threshold
Medium threshold
Medium threshold
High threshold
High threshold

Whatever the settings, RealFaviconGenerator uses potrace to produce a genuine SVG picture. This tool is impressive.

In order for the editor to be as reliable as possible, the images used as previews are first vectorized with potrace, then converted to PNG again. This way, you know that what you see in not a mere promise but the actual outcome.

Enough talking, time to refresh you favicon!

Published by

Philippe Bernard

I'm a web developer and the author of RealFaviconGenerator. I created this site because I felt frustrated when I tried to generate the favicon of my previous web project.

6 thoughts on “Safari’s pinned tabs support (Mac OS X El Capitan)”

  1. Thank you for this GREAT favicon generator! I used this tool to generate my favicon and it worked fine. Now I realized, that “mask-icon” is not a valid value for the “rel” attribute of a “link” tag following the w3c recommendations (I used https://validator.w3.org/nu/ for the HTML code analysis). What would you suggest: to abide by the provisions of WHATWG or to do it the “Apple way”?

    1. Thank you!

      That’s right, this is a proprietary icon. Even guys from Apple realize this is not ideal (https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0020.html). But this is usually how things evolve: some proprietary stuff got implemented, then it is finally standardized.

      I was not reported any issue with this icon (like, “my favicon stopped working with IE/FF/Chrome”, you get the idea). I’m quite confident it’s perfectly safe to use it.

      1. Ok, then we just have to wait and see which standard will prevail.

        By the way, creating an SVG picture out of a flat bitmap works perfectly with your tool. Submitting directly an .svg graphic gives even better results. Also the generated .png icons were slightly better quality although I submitted a very high resolution bitmap (1024×1024). So, for perfect results I would prefer to submit a vector graphic (if available), and, luckily this is supported by the realfavicongenerator.net!

        1. RFG supports SVG. With a twist regarding Safari: even if you submit an SVG that would perfectly match Apple’s guidelines, RFG will first turn it into a PNG. It’s a bit silly and this will be fixed.

  2. This article is nice, but it doesn’t tell me what the actual parameters are?! I have an open text field for the iOS parameters. No pull-down, no selector. No hint of what to put in there. I don’t know if it needs a hex code, RGB number, some kind of text string, or what?!!!

    1. You mean the “Theme color”? It’s an RGB color (eg. #5bbad5). It’s normally prefilled with a default value, which serves as a hint about the expected data format. Did you see something different?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.