<
zhead
>

Early Access

Link

apple-touch-icon

Learn how to use the apple-touch-icon rel link tag to improve your site.

Used to define a custom icon for web applications when added to the home screen on Apple devices. This icon represents the application and improves its appearance on the device screen.

Code Examples

<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon.png">
Correct use including sizes attribute for high-resolution displays.
<link rel="apple-touch-icon" sizes="76x76" href="/path/to/small-icon.png">
Specifies a smaller icon size for devices with smaller screens or lower resolution, optimizing performance.
<link rel="apple-touch-icon" href="/path/to/icon.svg">
Uses an SVG without specifying sizes or ensuring no transparency, which may not render as expected.
<link rel="apple-touch-icon-precomposed" href="/path/to/icon.png">
Uses the outdated "precomposed" keyword, which is no longer necessary.

Recommendations

  • Specify Sizes
    Include sizes attribute to define the icon dimensions. It helps devices to select the best icon resolution, improving loading times and display quality.
  • Avoid Transparency
    Ensure your icon does not have transparency. Apple devices add a shadow and rounded corners automatically; a transparent icon would not render as expected.
  • Use Precomposed Images
    Although not mandatory, using precomposed images prevents iOS from adding extra effects like gloss on the icon.
  • Test on Multiple Devices
    Appearance can vary across devices. Test on different screen sizes and resolutions to ensure consistency.

Related Documentation