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-Appfirstname.lastname@example.org" /> <link rel="apple-touch-icon" sizes="58x58" href="ios/AppIcon.appiconset/Icon-Appemail@example.com" /> <link rel="apple-touch-icon" sizes="76x76" href="ios/AppIcon.appiconset/Icon-Appfirstname.lastname@example.org" /> <link rel="apple-touch-icon" sizes="152x152" href="ios/AppIcon.appiconset/Icon-Appemail@example.com" /> <link rel="apple-touch-icon" sizes="180x180" href="ios/AppIcon.appiconset/Icon-Appfirstname.lastname@example.org" />
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.
Generate icons that are required in an iOS and Android app
Quick preview of your app icon on the devices
Auto enhancement for the smaller icons!