What size should the Apple Touch Icon be?

180x180 pixels is the recommended size. It covers all current iPhone and iPad models including Retina displays. FreeFaviconGen generates this size automatically alongside all other favicon sizes.

Should the Apple Touch Icon have rounded corners?

No. iOS automatically applies rounded corners and a slight shadow. Your icon should be a full square with no rounded corners, no transparency, and no added shadows.

Does the Apple Touch Icon show in browser tabs?

No. The Apple Touch Icon is only used for iOS home screen bookmarks. Standard browser tab favicons (16x16, 32x32) are separate files.

What if I don't add an Apple Touch Icon?

iOS falls back to taking a screenshot of your page, which is scaled down to icon size. It almost always looks terrible. Adding the proper 180x180 Apple Touch Icon takes 2 minutes and makes a significant difference.

Apple Touch Icon: What It Is and How to Add It to Your Website

What Is the Apple Touch Icon?

When a user taps 'Add to Home Screen' in Safari on iPhone or iPad, iOS creates a home screen shortcut. The icon used for that shortcut is the Apple Touch Icon — a 180x180 PNG file referenced in your HTML head. Without it, iOS takes a screenshot of your page, which almost never looks good as a home screen icon.

Why Size and Format Matter

The Apple Touch Icon must be exactly 180x180 pixels for full Retina display support on iPhone 6 and newer. Use PNG format. Apple automatically adds rounded corners and a subtle drop shadow to your icon, so do NOT pre-round the corners yourself. The resulting icon will have double-rounded corners and look wrong.

Solid Background Required

If your icon has a transparent background, iOS renders it as black. This is one of the most common Apple Touch Icon mistakes. Always use a solid background color that matches your brand. FreeFaviconGen's Text/Emoji creator always generates icons with a solid background.

Adding the Apple Touch Icon to Your Site

After generating your Apple Touch Icon with FreeFaviconGen, download the 180x180 size and rename it apple-touch-icon.png. Place it in your website's root directory. Add this tag to your HTML head: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. FreeFaviconGen's HTML code snippet includes this tag ready to copy.