We’re a web design and development agency, so we use our (and love our Macs). 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.
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!
—–
USAToday uses the default Touch Bar icon. Nov 2018 Update: They are now a blue circle! Maybe they read our post 🙂
Peaktwo is a creative web agency for tech-driven brands. We specialize in helping accelerate the growth of SMBs and enterprise companies with a suite of marketing and web development services. Our extensive experience and strategic approach to digital projects are crucial in achieving success for our clients. Explore our recent SaaS website design projects or view some recent Saas website trends.