How to Add Icons to iPhone, iPad & Android to Your Website : 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.
One simple step you can take in the mobile direction is to learn how to add Apple icons to your website.
How to Add Icons to iPhone, iPad & Android to Your Website
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.
What Are Apple Icons & Why Use Them?
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.
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.
App Icon Sizes
Every app must supply both small and large app icons.
Small icons are used on the Home screen and throughout the system once your app is installed.
Provide different sized small icons for different devices. Make sure that your app icon looks great on all the devices you support.
|iPhone 6s Plus, iPhone 6 Plus||180px by 180px|
|iPhone 6s, iPhone 6, iPhone SE||120px by 120px|
|iPad Pro||167px by 167px|
|iPad, iPad mini||152px by 152px|
The large icon is used by the App Store.
|Large Icon Size||1024px by 1024px|
Mimic your small app icon with your large app icon. Although the large icon is used differently than the small one, it’s still your app icon. It should generally match the smaller version in appearance, although it can be subtly richer and more detailed since there are no visual effects applied to it.
For Android icons you’ll want to follow these specifications:
|Android Regular||Android Hi-Res|
Next you’ll just add a simple bit of code to the HEAD of your site so the devices can find your images (iOS will find these automatically if they are in your site’s root directory and named this way, but it’s recommended to include it). Android uses the two icons with rel=”icon” and apple uses the ones prefixed with “apple-“:
<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" /> <link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />
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:
<link rel=”apple-touch-icon” href=”your-custom-icon-for-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”your-custom-icon-for-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”your-custom-icon-for-iphone4.png” />
WordPress Users Tip: Check out this awesome plugin to easily implement Apple Iconson 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!
- icon viber 192×192 android