How to Add Apple Icons to Your Website

Mobile browsing popularity is skyrocketing. According to a new Pew Internet Project report, 25% of Americans use smartphones instead of computers for the majority of their web browsing.

Missing out on the mobile marketing trend is likely to translate into loss of market share and decreased sales. That’s not to say that it’s right for every business, but you at least need to consider your target market persona before simply dismissing mobile as a fad.

One simple step you can take in the mobile direction is to learn how to add Apple icons to your website.

What Are Apple Icons & Why Use Them?

Apple Icons are simply the graphics you’ve chosen to represent your site when a user saves your page to their home screen in iOS.

If you don’t have Apple Icons created for your site, iOS grabs a compressed thumbnail of your website and displays it as the icon. The result is typically indistinguishable and unappealing.

Apple Icons are an awesome branding opportunity and give you the chance to gain mindshare and encourage user engagement. It’s such a simple process and one more opportunity to delight your target market, there’s no excuse to skip out on Apple Icons.

What About Your Favicon?

Favicons, those little images that show next to the page title in your tab at the top of your browser, don’t show on Apple devices – iPads, iPhones, the iTouch, etc.

With iOS continuing to gain market share, make sure that you’re customizing the experience for a growing segment of your target audience.

How To Add Apple Icons To Your Website

The process is very simple, just follow these directions, pay attention to detail, and you’ll love the result!

Creating & Implementing Your Custom Apple Icons

You need to make sure that you choose an image – your logo, a custom icon, etc. – that will be clearly recognized as your brand’s visual identity. In general, don’t choose something too intricate or detailed, go for bold clarity.

Create a square 144 x 144 pixel graphic in .png format using your custom design.
Name the image something like “apple-touch-icon.png” and save it.
Now upload the image to your website (this example uses an upload to your site’s images directory).
Add this HTML code to your header before the closing </head> tag: <link rel=”apple-touch-icon” href=”images/apple-touch-icon.png”>

Congratulations – you made it happen! The 144 x 144 graphic will be used as-is on the iPad Retina, all other devices will scale the icon to fit.

Advanced Notes on Apple Icons

Standard vs. Precomposed Apple Icons: By default, iOS styles your Apple Icon with rounded corners and a glossy effect. To remove the glossy effect, simple use this HTML code in your header instead: <link rel=”apple-touch-icon-precomposed” href=”images/apple-touch-icon.png”>

Different Apple Icons for Each Device: If you’d like your iPhone to show a different Apple Icon than your iPad, use custom sizes and the following sample code to define what image each device should show:

WordPress Users Tip: Check out this awesome plugin to easily implement Apple Icons on your site!

That’s all it takes to set up your custom Apple Icons. You’ve just implemented a simple fix to improve your branding and provide a consistent user experience – great work!