iOS home screen asset
Apple Touch Icon Generator for 180×180 PNG
One 180×180 PNG, with the background and breathing room already resolved.
Upload a logo, set the padding and solid background, then inspect the real exported pixels beside an iPhone Home Screen preview. Apple applies the rounded shape on the device, so the downloaded file stays square.
Upload a Logo for Your Apple Touch Icon
Use a simple mark with enough contrast to remain recognizable on a phone Home Screen.
PNG · JPG · WEBP · SVG · up to 10 MB
How to Create an Apple Touch Icon
- 01
Upload a Square Logo or Icon
Upload a square logo symbol when possible. Wide wordmarks usually become too small once they are centered inside the icon.
- 02
Adjust Apple Touch Icon Padding and Background
Use a solid color that belongs to the brand. Leave enough space for the rounded system crop without drawing rounded corners into the source file.
- 03
Download the 180×180 PNG
Save apple-touch-icon.png with your public site assets and add the generated link element to the page head.
Apple Touch Icon Size, Format, and Filename
This tool has one narrow job: produce the website icon Safari uses when a visitor adds a page to the iPhone or iPad Home Screen.
Dimensions
180×180 pixels
A high-resolution iPhone Web Clip size. Safari can choose the most suitable declared icon for the device.
File
apple-touch-icon.png
A conventional root-level filename that is easy to deploy and recognize.
Rendering
Square and opaque
The selected color fills every pixel. Rounded corners and the final presentation are applied by iOS.
How to Add an Apple Touch Icon to Your Website
Put the PNG at the URL used in the link element, deploy both changes together, and test the public file directly before adding the site to a Home Screen.
Read Apple’s Web Clip icon documentationAdd apple-touch-icon to Plain HTML
Place apple-touch-icon.png in the public root and paste the link element into the head of each page template.
Set an Apple Touch Icon in Next.js
Place the file in public or use the framework metadata convention. Check for an existing icon declaration so an older asset does not keep winning.
Use the WordPress Site Icon
WordPress can derive platform assets from the Site Icon. If you install this file manually, verify that the theme or an optimization plugin does not output a different touch icon.
Apple Touch Icon FAQ
What is an Apple Touch Icon?
It is the image Safari uses to represent a website when someone adds that site to the iPhone or iPad Home Screen. It is separate from the small favicon used in browser tabs.
Why does this tool export 180×180?
Apple documents 180×180 as the high-resolution iPhone Web Clip icon size. A site can declare additional sizes for other devices, but a crisp 180×180 PNG is the practical single-file choice for this focused generator.
Should I round the corners myself?
No. Keep the exported file square. iOS applies the device presentation and rounded shape, so baking rounded corners into the artwork can create doubled borders or unwanted gaps.
Can the icon have transparency?
This generator deliberately removes transparency by compositing the artwork over your chosen solid color. That makes the result predictable and avoids transparent areas turning into an unintended background.
Why is the old icon still showing?
First open the deployed PNG URL and confirm it serves the new file. Then check for duplicate link elements, site or CDN caches, and an existing Home Screen bookmark that may need to be removed and added again.