How To Create a Website Icon For Apple’s MacBook Touch Bar

written by: Ryan Johnson

September 26, 2017

We’ve been using our 2016 Apple MacBook Pros with the Touch Bar for almost 10 months now. Sure, the emoticon happy face stares hopefully at us and suggested text occurs unnoticed, but adoption rates are increasing. Our most used features include : volume/mute, brightness, undo (Photoshop) and Apple Pay.

But the feature we find most useful are the website icons. Those graphical bookmark buttons that reveal when you open Safari (sorry Chrome users) or click in the address bar. They look so…touchable, like little UI skittles for your fingers.

create an Apple MacBook touch bar icon

However, when we bookmarked our website, all we saw was a little “P” framed in a grey box – and of course we immediately had icon jealously. There are several methods available to create your own Touch Bar icon – here’s one approach that worked well for us.

How to Create an Apple MacBook Touch Bar Icon for Your Website

1. Create an SVG of your logo using Adobe Illustrator or similar tool used for manipulating vectors. The vector should be 100% black (no colors, the color will be specified in your code).

2. Upload the SVG to the graphics folder on your website. If your website is on WordPress, you won’t be able upload and SVG using the Media tool. See this link to solve that minor issue.

3. Add the following code to your <head> tag. You will replace [your SVG link] with the location of the SVG on your website and #2691AA with the desired hex value of your logo. Ours is a light blue.

<link rel=”mask-icon” href=”[your SVG link]” color=”#2691AA”>

4. Clear your cache, close and reopen your browser. You should now see your colorful new icon!


USAToday uses the default Touch Bar icon.

next post

What Happened When We Became Our Own Client: 6 Things We Learned When Launching Our Site