Understanding apple-touch-icon-precomposed.png: what it is and current best practices
A quick guide to the apple-touch-icon-precomposed.png icon, its role in iOS home screens, and what to use today.
What is apple-touch-icon-precomposed.png?
The apple-touch-icon-precomposed.png file is a variant used by Apple devices for home screen icons. In older iOS versions, if this file was present and linked, iOS would display the icon as-is, without applying its own glossy overlay or rounded corners.
A quick history
Historically, iOS applied a glossy style to home screen icons. Using the precomposed variant was a way to opt out of that treatment by providing an image that already included the desired look.
How it differs from apple-touch-icon.png
The standard apple-touch-icon.png is the icon without a specific precomposed instruction; iOS would apply its default styling. The precomposed variant signals that the image is already finalized and should be displayed as-is.
How to implement
To use a precomposed icon, place the file on your site and declare it in the HTML head: <link rel='apple-touch-icon-precomposed' href='/apple-touch-icon-precomposed.png'> In many sites today, you may instead see the standard icon declared as: <link rel='apple-touch-icon' href='/apple-touch-icon.png'> You can also include multiple sizes using the sizes attribute, for example: <link rel='apple-touch-icon-precomposed' sizes='180x180' href='/apple-touch-icon-precomposed-180.png'>
Is it still needed today?
Modern iOS versions have moved away from the glossy treatment, and Apple generally recommends using the standard apple-touch-icon approach. The precomposed variant remains in documentation for compatibility, but its practical use has declined. If you must support older devices, you might still provide a precomposed icon; otherwise, focus on a clean, properly sized icon.
Best practices
- Provide icons in multiple sizes to cover different devices.
- Prefer the standard apple-touch-icon if you’re not tied to an older device.
- Include the App Store icon (1024x1024) for completeness, and consider also providing a web app manifest for non-iOS platforms.
Share This Article
Spread the word on social media
Anne Kanana
Comments
No comments yet. Be the first to share your thoughts!