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

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 Touch Bar adoption rates are increasing. Our most used features: volume/mute, brightness, undo (Photoshop) and Apple Pay. Siri? No thanks.

But the feature we find most useful are the web page 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.

How to Create an Apple MacBook touch bar icon for your website

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 an SVG using the Media tool. See this link to solve that minor issue.

3. Add the following code to your <head> tag. 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!

—–

USA Today's default MacBook Touch Bar icon.

USAToday uses the default Touch Bar icon. Nov 2018 Update: They are now a blue circle! Maybe they read our post 🙂


 

Peaktwo is a marketing and web solutions agency. We’ve been in business over 10 years – building websites, applications and driving marketing strategy for companies of all sizes and industries. The company was launched just outside of Washington, DC in the Northern Virginia tech corridor. In 2010, we moved our HQ to Charlotte.  As our business grew, so did our need for people and creative space that matched our energy. This led us to our current offices on Main St. in Fort Mill, SC.

next post

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