Apple Touch Icon Generator
Create a 180x180 Apple touch icon for iPhone and iPad home screens from a single image, with optional iOS splash screens and ready-to-paste meta tags.
What is an Apple touch icon?
When someone adds your site to their iPhone or iPad home screen, iOS uses the apple-touch-icon as the app icon. Safari also uses it for bookmarks and frequently visited sites. Without one, iOS shows a screenshot of your page instead.
Size and background
A single 180x180 PNG covers every current iPhone and iPad; iOS scales it down for smaller screens. iOS does not support transparency in home screen icons and fills transparent areas with black, so this generator always paints your chosen background color behind the logo.
You do not need to round the corners yourself. iOS applies its own rounded mask, so the icon should be a full square.
Add the Apple touch icon to your HTML
Add one link tag to the head of every page. The file can live anywhere on your site as long as the href points to it. iOS also looks for /apple-touch-icon.png in the site root when no tag is present, but the tag is more reliable.
HTML head
<link rel="apple-touch-icon" href="/icons/icon-180x180.png">
<meta name="apple-mobile-web-app-title" content="My PWA App">Older Apple touch icon sizes
Guides written for earlier devices list many sizes, each matching a screen of its time. One 180x180 file now covers all of them, so the extra tags are only needed if you support very old devices.
| Size | Introduced for |
|---|---|
| 57x57 | Original iPhone |
| 114x114 and 120x120 | Retina iPhones |
| 152x152 | Retina iPad |
| 167x167 | iPad Pro |
| 180x180 | iPhone 6 Plus and later. The size to use today. |
Splash screens for iOS
Turn on Generate Splash Screens to also create launch images for popular iPhone and iPad sizes in portrait and landscape. The download includes the apple-touch-startup-image link tags with the right media queries for each device.
The splash screen generator lists every size and explains the tags.
Everything You Need for PWA Assets
- All icon sizes from 16x16 to 512x512 pixels for every PWA requirement
- A live preview of every icon, each maskable shape and the splash screens before you download
- A real use preview of your icons in a browser tab, a search result and on Android and iPhone home and launch screens, also included in the ZIP
- A one-click demo with a sample logo, so you can try the generator before uploading anything
- Maskable icons for Android adaptive icons, with a proper safe zone
- iOS splash screens for popular iPhone and iPad devices in both orientations
- A ready-made manifest.json with all icon references included
- HTML meta tags for PWA icons and splash screen declarations
- A built-in logo maker for initials or an emoji, if you have no logo yet
- Images processed in your browser and never uploaded to a server
- One-click download of all assets as an organized ZIP file
How It Works
- Upload your logo as a PNG, JPG, SVG, or WEBP file, or make a simple one from initials or an emoji.
- Choose which assets to generate, adjust padding and background color, and check the live preview and the real use preview.
- Download a ZIP with icons, splash screens, manifest.json, and HTML meta tags.
Frequently Asked Questions
What size is an Apple touch icon?
180x180 pixels is the recommended size and works on all current iPhones and iPads.
Why does my Apple touch icon have a black background?
iOS replaces transparent pixels with black. Pick a Background Color here and the 180x180 icon is exported with that solid color instead.
How do I add the Apple touch icon to my site?
Copy the icons folder to your public directory and add the apple-touch-icon link tag from meta-tags.html to the head of your HTML.
What image format should I use?
We recommend using PNG or SVG formats for the best quality. PNG works well for photos and complex images, while SVG is ideal for logos and icons as it scales perfectly. JPG and WEBP are also supported but may not preserve transparency.
What is the recommended image size?
For best results, use an image that is at least 512x512 pixels with a 1:1 aspect ratio (square). Larger images will be scaled down, and smaller images may appear blurry at larger icon sizes.
Can I preview the icons before downloading?
Yes. As soon as you add an image, the preview shows every icon size, the maskable icons cropped to a circle, a rounded square and a squircle, and the splash screens for each device. It updates as you change the padding and background color, so you only download once it looks right. The "See your icons in real use" button goes further and shows them in a browser tab, a search result, a desktop shortcut and on Android and iPhone home and launch screens. The ZIP includes that page as preview.html.
Can I use this tool without a logo?
Yes. Choose "No logo yet?" under the upload box, or open the text and emoji icon generator, to make a simple logo from your initials or an emoji on a colored square, rounded square or circle, with an optional gradient. It is drawn in your browser and then goes through the generator like any uploaded image. To just see how the tool works, choose "Try the demo" under the upload box: one click loads a sample logo with a name and colors and generates every asset, splash screens included.
What are maskable icons?
Maskable icons are a PWA feature that allows your icon to adapt to different shapes on Android devices. They include a safe zone so the icon looks good whether displayed in a circle (Pixel), rounded square (Samsung), or other shapes. This tool fills the background with your chosen colour and keeps your logo within the center 80% of the image.
Do I need splash screens?
Splash screens provide a native app-like experience on iOS devices. When a user adds your PWA to their home screen and opens it, the splash screen shows briefly while the app loads. They're optional but highly recommended for a polished experience.
How do I implement the generated assets?
Download the ZIP file and extract it. Copy the icons/ and splash/ folders to your project's public directory. Copy manifest.json and favicon.ico to your root/public folder. Then add the HTML code from meta-tags.html to your index.html <head> section.
Is this tool free to use?
Yes! This PWA Icon Generator is completely free. All processing happens in your browser - your images are never uploaded to any server. You can generate unlimited assets for personal or commercial projects.
Does this tool store my images?
No. All image processing happens locally in your browser using Canvas API. Your images never leave your device, ensuring complete privacy and security.