KNOWRA

​

apple-touch-icon-precomposed.png

The `apple-touch-icon-precomposed.png` is an image file used as an icon when a website is added to the home screen of Apple iOS devices. Unlike the standard `apple-touch-icon.png`, the `precomposed` version instructs iOS *not* to apply its default visual enhancements like rounded corners, drop shadow, or a glossy overlay. It's included via a `<link>` tag in the HTML head and allows web developers full control over the final icon appearance on the home screen.

    Serves as the icon displayed on the home screen of Apple iOS devices (iPhones, iPads) when a user saves a website shortcut via Safari's 'Add to Home Screen' feature.
    The 'precomposed' variant signals to iOS that the provided icon image is already styled as desired and should not have Apple's default visual effects applied.
    These default effects historically included adding rounded corners, a subtle drop shadow, and a glossy sheen overlay to the icon artwork.
    Using the precomposed version ensures that the icon appears exactly as designed by the web developer.
    This feature was introduced by Apple to provide websites with a native app-like icon experience on their devices.
    Included in the <head> section of an HTML document using a <link> tag.
    The rel attribute must be set to apple-touch-icon-precomposed.
    The href attribute specifies the path to the icon image file (e.g., /apple-touch-icon-precomposed.png).
    Example tag: <link rel='apple-touch-icon-precomposed' href='/custom-icon.png'>
    Providing multiple sizes is achieved by adding the sizes attribute to the <link> tag, e.g., <link rel='apple-touch-icon-precomposed' sizes='180x180' href='/icon-180x180-precomposed.png'>.
    Introduced by Apple around 2007 with the initial iPhone and Safari's 'Add to Home Screen' feature.
    The original requirement was apple-touch-icon.png, which iOS would automatically 'glossify' and round.
    The apple-touch-icon-precomposed relation was added later (around iOS 1.1.3) to give developers control.
    Apple has significantly reduced or removed the automatic gloss and shadow effects in modern iOS versions, making the visual difference between apple-touch-icon and apple-touch-icon-precomposed less pronounced or non-existent visually.
    Modern web standards like the Web App Manifest (used by PWAs) often include icon definitions that can supersede or work alongside these older Apple-specific tags, providing icons for various platforms and purposes.
    iOS automatically detects and scales the largest provided icon that matches the apple-touch-icon or apple-touch-icon-precomposed relations if specific sizes aren't linked.
    Recommended sizes have changed over time; common modern sizes include 180x180 pixels (for iPhone Retina) and 152x152 pixels (for iPad Retina).
    Providing multiple sizes (e.g., 120x120, 152x152, 167x167, 180x180) using the sizes attribute ensures optimal display on different devices and screen densities.
    The image file should ideally be a square PNG with no transparency, as transparency areas are often rendered black or with unpredictable results on the home screen.
    Even without the automatic gloss in modern iOS, using precomposed is still a safe practice if you want absolute control over corner rounding and shadows, as iOS may still apply subtle rounding or shadows based on its OS design.

    No videos found