When users add a website to their home screen, the browser requests a specific asset to represent the site in the app-like environment. This shortcut icon, known as the Apple touch icon, must be delivered in precise dimensions to ensure clarity on every device. Choosing the correct sizes is a fundamental part of progressive web app setup and iOS user experience design.
Standard Apple Touch Icon Sizes
The core specification for Apple touch icon sizes centers on 180x180 pixels. This resolution corresponds to the Retina display density found on modern iPhones, providing a sharp image when the home screen zoom level is set to 2x. Delivering a 180px icon ensures the graphic remains crisp on devices with high pixel densities, avoiding the blurry upscaling that occurs when a smaller image is stretched to fit a large tile.
Recommended Sizes and Density Breakpoints
While 180x180 is the current standard, a robust implementation includes a range of Apple touch icon sizes to accommodate different devices and legacy iOS versions. Developers should provide multiple resolutions to cover 1x, 2x, and 3x display scales. Supplying these variations prevents the operating system from performing internal scaling, which can degrade visual quality or increase load times. The following table outlines the most common dimensions and their typical use cases.
Implementation Best Practices
To apply these Apple touch icon sizes correctly, developers use the rel="apple-touch-icon" link tag within the document head. It is standard practice to include a fallback to a generic icon if the specific sizes are unavailable. The order of declaration matters; placing the largest size last ensures that modern browsers select the highest resolution source available without prematurely stopping the lookup process.
