Why create icons for mobile

Today, the importance of design is growing. Smartphones are like jewels. We spend more time on it. Smartphone subscribers accessing a social networking site or blog ever in month increased 56% versus year ago. Users need to have fast access with their informations, your informations.

Icon on the Home screen

Home screen icon allows for quick access. This icon need to fit with the user's screen in order to have a good position. If icon look bad, you can be sure that your icon will be on last screen.

Image Magick

ImageMagick® is a software and usefull for convert bitmaps images. For us, we want create a png image and convert it into ico. ImageMagick® do a good job and we can have ico in different size easily.

Photoshop (or not)

You can use your favorite software for creating your png file. Click on picture below for obtain your gradient !


Demo (try with mobile)

icon ios 7

Choose your gradient colors

Choose your gradient. Reproduce it with your favorite sofware and put your icon in center. You should have something like this image

icon ios 7 caraibe icon

Use Image Magick

Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
57x57
iPad home screen icon
72x72
iPhone retina touch icon
120x120
iPad retina touch icon
152x152
[...]
execute this command in your console :
C:\> convert favicon-ios-512.png  -bordercolor white -border 0 ( -clone 0 -resize 16x16 -write favicon-ios-16.ico ) ( -clone 0 -resize 24x24 -write favicon-ios-24.ico ) ( -clone 0 -resize 32x32 -write favicon-ios-32.ico ) ( -clone 0 -resize 57x57 -write favicon-ios-57.ico ) ( -clone 0 -resize 48x48 -write favicon-ios-48.ico ) ( -clone 0 -resize 64x64 -write favicon-ios-64.ico ) ( -clone 0 -resize 72x72 -write favicon-ios-72.ico ) ( -clone 0 -resize 96x96 -write favicon-ios-96.ico ) ( -clone 0 -resize 120x120 -write favicon-ios-120.ico ) ( -clone 0 -resize 128x128 -write favicon-ios-128.ico ) ( -clone 0 -resize 144x144 -write favicon-ios-144.ico ) ( -clone 0 -resize 152x152 -write favicon-ios-152.ico ) ( -clone 0 -resize 195x195 -write favicon-ios-195.ico ) ( -clone 0 -resize 228x228 -write favicon-ios-228.ico ) -delete 0 -alpha off -colors 256 favicon.ico

Code view in head element

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.ico">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.ico">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.ico">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.ico">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.ico">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.ico">
comments powered by Disqus