Create an Apple Touch Icon
When an iPhone or iPad user saves your website to their home screen, the Apple Touch Icon is the image that appears. It must be a 180×180 PNG — and it matters for brand presentation.
About Create apple touch icon
An Apple Touch Icon is the icon iOS uses when a user saves a website as a shortcut on their iPhone or iPad home screen. Without one, iOS generates a low-quality screenshot thumbnail of your page, which looks nothing like your brand. Providing a proper Apple Touch Icon ensures your site looks professional alongside other app icons on the device.
Apple Touch Icon specifications: — Dimensions: 180×180 pixels (for iPhone Retina, the current standard) — Format: PNG with RGB color space — Background: solid color recommended — iOS does not add rounded corners or shine effects on iOS 7+ — File name: apple-touch-icon.png (placed in site root for automatic discovery)
How iOS uses the icon: iOS browsers look for apple-touch-icon in two places: 1. A link tag in the HTML head: link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" 2. Automatically at the site root: https://yourdomain.com/apple-touch-icon.png
If neither is present, Safari captures a screenshot of the page. Always provide the explicit link tag for reliable behavior.
Design guidance for Apple Touch Icons: — Use a square design with solid color background — iOS will apply the standard rounded corner mask automatically. — Do not pre-round the corners in the image — iOS clips the image itself. — Use the same icon mark you use for your favicon, scaled up to 180×180 with appropriate padding. — Ensure text, if used, is large and readable at that size — aim for a single letter or monogram rather than full words.
Generate your Apple Touch Icon from any logo PNG or SVG using the tool above.