Apple-touch-icon generator

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

Updates

August 10, 2016

article personal

Who is this person?

Quickly lookup any person by e-mail address or name. Run an instant background check or find contact details & personal records (including public legal records).

November 23, 2013

bubbles

New: Ⓑⓤⓑⓑⓛⓔ text tool

Stand out; use special characters in your tweets or e-mails.

November 23, 2013

smallcaps

New: Sᴍᴀʟʟᴄᴀᴘs text tool

Look like a Bᴀɴᴋ with Sᴍᴀʟʟᴄᴀᴘs in your status-updates or e-mails.

November 21, 2013

dnssec lock

DNSSEC checker tool added

Domain not resolving? Check your DNSSEC here.

November 13, 2013

apple touch icon tool

Apple touch icon updated for retina

Thanks to Eric for pointing out our touch icon tool was a bit out of date, it now supports the new retina sizes & filenames.