MacBook Pro Touch Bar icon preview, and why it matters

The new MacBook Pro comes with a Touch Bar. This touch-screen-as-a-keyboard element is programmable and all macOS applications are expected to provide some contextual content. Safari is no exception. What does it display and how is your web site impacted?

example

Long story short: Safari is reusing the mask icon, specified a year ago by Apple while releasing macOS X El Capitan. Basically, if you have created your favicon with RealFaviconGenerator less than a year ago, your web site already has an icon to fit the Touch Bar.

The new Touch Bar preview

From day one, RealFaviconGenerator has aimed at providing a preview for all platforms, so you know in a blink how your favicon looks like everywhere. This is the update for the Touch Bar:

Touch Bar preview

Why it matters

One could say the Touch Bar preview is no more than a nice to have. After all, as soon as you know how the icon is rendered as a pinned tab site, you get a good idea of how it should fit the Touch Bar. Well, this is not that simple.

The pinned tabs area background is light grey and Safari uses the color provided with the icon to fill the icon itself. The Touch Bar behaves differently, with dark contours, white icon and the color used as the icon background. Consequence: a dark color, which would have been a sensible choice a few months ago, is now doubtful when applied to the Touch Bar. In the example below, the Touch Bar icon is too dark and will not fit along with the more colorful icons:

Touch Bar - Too dark

Once again, the safest path is to keep your favicon up-to-date in minutes by using the WYSIWYG editor of favicon.

Alpha feature

Oh, this is an alpha feature. The MacBook Pro with Touch Bar is not available yet even for a demo, as confirmed yesterday when I visited the Apple Store of Opera, Paris, France.

So how do you implement this kind of feature when you can’t even know for sure how it looks like on the final device? Clues and guesswork. For example, take this unboxing video on YouTube:

Touch Bar in action

We can clearly see how icons are displayed. Plus they reflect their Pinned Tabs counterparts. Except for one icon: eBay. The icon is not monochromatic in the Touch Bar, which is normally not possible with the mask icon (the monochromatic SVG icon specified by Apple and used for pinned tabs). At this point, it is hard to know how Safari behaves. Apparently, it embeds predefined icons for well known sites such as Facebook and YouTube (a browser’s classic to introduce a proprietary web site presentation, in bookmarks for example). This make the underlying mechanism biased and less reverse-engineerable.

The feature will be updated as soon as possible to reflect the real appearance of the icon in the Touch Bar. Hopefully, that will only mean removing the “(alpha feature)” caption.

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.

4 thoughts on “MacBook Pro Touch Bar icon preview, and why it matters”

    1. I was not aware about this. Actually I don’t have a shiny new MacBook Pro to test this. What I did is guesswork and a 2-minutes experiment to make sure the mask icon was reused for the Touch Bar.

  1. Interested in this as well. After bookmarking specific sites I often visit, all my icons are just favicons displayed in the touchbar, not actual touchbar-friendly icons. 😀

    1. Do you mean specific sites with mask icon (aka touch bar icon)? Or simply sites you stumble upon? Because most sites sadly have no mask icon. So what you observe is normal when you bookmark a random site.

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.