Adding an iOS Bookmark Icon

iOS gives users the ability to bookmark a website and add it to their home screen, these are known as “Web Clips”. To add your own iOS bookmark icon, you need to create a few .png files, so that you can support multiple resolutions and devices.

  • 76 x 76 — iPad 2 and iPad mini (@1x)
  • 120 x 120 — iPhone 4s, iPhone 6 and iPhone 5 (@2x)
  • 152 x 152 — iPad and iPad mini (@2x)
  • 180 x 180 — iPhone 6 Plus (@3x)

Then just add them inside your head tag on your website.

<link rel="apple-touch-icon" href="image-path/apple-touch-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="image-path/apple-touch-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="image-path/apple-touch-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="image-path/apple-touch-180.png" />

Source #1: Apple: Icon and Image Sizes
Source #2: Apple: Configuring Web Applications

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"