How to use Favicon on Desktop and Mobile Devices

Many sites currently add a favicon before launch that is visible in your user’s browser tabs and bookmarks, but lots of sites are still missing icons for iOS. By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android* will see a nice app-like icon rather than an image of your page.

The first step is creating an image. To support the newest high resolution iPhone and iPad you’ll want to create several different sized images (The device will take the nearest size larger than it’s default size if you don’t have them all). You can save your images as PNGs to any directory on your site.

With the icons on older iOS versions you had to determine if you were going to use apple-touch-icon-precomposed vs letting apple apply some effects to your icon. That is no longer a concern with iOS 7. You’ll just need to create a square icon and it will round the edges for you.

What is size favicon for mobile devices?

Here is a table of the current iOS icon sizes from Apple (this has been updated for iOS 7 icon sizes):

• Classic iPhone / iPod : 57×57
• iPad : 76×76
• iPhone / iPod Retina : 120×120
• iPad Retina : 152×152
• iPhone 6 Plus : 180×180

For Android icons you’ll want to follow these specifications:

• Android Regular : 128×128
• Android Hi-Res : 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-“:

If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices. The older devices will load the closest size available to their required size and shrink them down (this works but isn’t ideal if you want complete control and the fastest download).

How to create app / mobile device favicons?

If you’re creating your iOS icon image you can find templates for use around the web; here’s a couple good ones: appicontemplate.com for ios7 and iOS7 icon template for photoshop & sketch that cover all the sizes. And here is a free source: iconifier.net Note that you’ll only need some of the icons represented in these templates unless you’re releasing an app in the App Store.