About This Tool
An Apple Touch Icon represents a website saved to an Apple device's home screen. Place your logo on a solid square background, generate common PNG sizes, and get the matching HTML links.
How to Use
- Choose or drop in a PNG, JPG/JPEG, or static WebP image.
- Keep the default white background or choose another solid color, then adjust Fit, Center Crop, and padding as needed.
- Use the default 180×180 size or select any additional sizes you need, then generate your icons.
- Download the PNGs or ZIP, copy the HTML links, and check that the file paths match.
Supported Sizes
- The default output is a 180×180 apple-touch-icon.png, suitable for many common website needs.
- Optional 120×120, 152×152, and 167×167 sizes can support other devices or match an existing icon setup.
Tips for Creating Icons
- Fit keeps the entire image in proportion and fills unused space with your chosen background. Center Crop takes a square from the middle. Neither option stretches the original image.
- Padding is measured on each side of the output: 10% padding leaves roughly 80% of the width and height for the image.
- Small sizes such as 16×16 work best with simple shapes and clear contrast. Complex photos or tiny text may become hard to recognize, so check the actual-size previews.
Supports PNG, JPG/JPEG, and static WebP images. Each file can be up to 100 MiB, with a maximum of 40 million pixels and 16,384 pixels per side. Large images may need more time and memory.
Using Your Apple Touch Icon
- The default is a solid white background with 10% padding on each side. Transparent logos are placed on the selected background to avoid unexpected background colors in different viewing environments.
- The output is a full square with no rounded corners cut out. The device determines the home screen icon's corners and appearance; padding helps keep the subject away from the edges.
- The generated HTML uses apple-touch-icon links and lists only the sizes you created. Place each file at the location shown in its link.
Privacy
Your images, emoji, and generated icons are processed only in your browser and are never uploaded to a server.
Your input and results are not saved automatically. Download any icons you want to keep before clearing or leaving the page, and keep your original artwork.
FAQ
What is an Apple Touch Icon?
It is the PNG icon used when a website is added to an Apple device's home screen, usually specified by an apple-touch-icon link on the page.
Which size should I choose?
The default 180×180 size is a good starting point for many websites. Select other sizes if you need to match an existing setup or additional device requirements.
Why use an opaque background?
A solid background gives you control over the color around a transparent logo and avoids unexpected colors being used for transparent areas.
Do I need to round the corners first?
Usually not. This tool creates a standard square PNG so the device can apply its own icon appearance.
How do I use the downloaded icon?
Copy the generated HTML from the results and put each icon at the matching path. The default 180×180 file is apple-touch-icon.png; additional sizes use their own generated filenames.