For Apple iOS devices such as the iPod Touch, iPhone, and iPad, as well as some Android devices, you can provide a custom icon to your visitors that displays on their Home screens when they bookmark your site or "Add to Home Screen" ("Web Clip" feature).
This tool wil generate the required html as well as the apple-touch-icons in four sizes (iPhone, iPad, iPhone Retina & iPad Retina), which you can download as .zip
Create Apple touch icons for your site
About Apple touch icons
Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.
The tool will output four png's, with dimensions of 57x57 (iPhone), 72x72 (iPad), 114x114 (iPhone Retina) and 144x144 (iPad Retina). These should be stored in your sites' home directory, unless the path is specified in the HTML using the below code.
<!-- add a '-precomposed.png' suffix if you don't want iOS < 7 to add the standard 'glossy effect' to your button --> <link rel="apple-touch-icon" href="somedir/apple-touch-icon-iphone-60x60.png"> <link rel="apple-touch-icon" sizes="76x76" href="somedir/apple-touch-icon-ipad-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="somedir/apple-touch-icon-iphone-retina-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="somedir/apple-touch-icon-ipad-retina-152x152.png">
When this file is used, by default, the Apple product will automatically give the icon rounded edges and a button-like appearance (if not 'precomposed').
Details and specifications about apple-touch-icon on Apple's website.
Link to this page: “Apple-touch-icon generator”
You can link to this tool using this HTML code. Simply copy and paste it into your page:
<a href="http://manytools.org/http-html-text/apple-touch-icon-generator/">Apple touch icons generator online - Convert a GIF, PNG or JPG to apple-touch-icon.png for "Add to home screen" (iOS/Android).</a>
If you have any problems using this Apple-touch-icon generator, please contact me.
comments powered by Disqus