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.

How to Add Icons to iPhone, iPad & Android to Your Website

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
128×128 192×192

 

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.

  1. Create a square 144 x 144 pixel graphic in .png format using your custom design.
  2. Name the image something like “apple-touch-icon.png” and save it.
  3. Now upload the image to your website (this example uses an upload to your site’s images directory).
  4. 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!

Summary

Tags

  • anything
  • icon viber 192×192 android

Tags

  • viber icon png