Using Makeappicon.com for your mobile web app

Besides using the resized icons for your iOS/Android app, do you know of any other ways to make use of them? If you run a website or a web application, you can use the resized icons on your website as well by using Apple's Web Clip feature. Don't be fooled by the Apple name; it works for Android as well.

This feature allows you to make your website or web application look like a native application when users add them to the homescreen on iOS or Android using the icons resized by Makeappicon.com, instead of a tiny, ugly screenshot of your web page.

Enabling this feature is easy; just add the following code to your website:

<link rel="apple-touch-icon" href="ios/AppIcon.appiconset/Icon-App-60x60@2x.png" />
<link rel="apple-touch-icon" sizes="58x58" href="ios/AppIcon.appiconset/Icon-App-29x29@2x.png" />
<link rel="apple-touch-icon" sizes="76x76" href="ios/AppIcon.appiconset/Icon-App-76x76@1x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="ios/AppIcon.appiconset/Icon-App-76x76@2x.png" />
<link rel="apple-touch-icon" sizes="180x180" href="ios/AppIcon.appiconset/Icon-App-60x60@3x.png" />
        

There are 5 images, each suited for a specific screen size:

• 58x58 - Android Devices
• 76x76 - iPads with iOS 7 / 8 (1x; for iPad 2)
• 120x120 - iPhones with iOS 7 / 8 (2x; for iPhone 5, 5s and 6)
• 152x152 - iPads with iOS 7 / 8 (2x; for iPad 3, 4, Air and Mini)
• 180x180 - iPhone with iOS 7 / 8 (3x; for iPhone 6 Plus)

Specifying an icon for Web Clip will help bring additional visibility as users treat your web application or web page as a native app, improving the overall UX.