iOS Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Web Clip Icons

If you have a web app or a website, you can provide a custom icon that users can display on their Home screens using the web clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.

iOS also displays web clip icons in Safari Favorites, which is the grid of icons that appears when users tap the URL field or open a new tab in Safari.

If your web content is distinguished by a familiar image or recognizable color scheme, it makes sense to incorporate it in your icon. However, to ensure that your icon looks great on the device, you should also follow the guidelines in this section. (To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.)

For iPhone and iPod touch, create icons that measure:

  • 120 x 120 pixels

  • 60 x 60 pixels (standard resolution)

For iPad, create icons that measure:

  • 152 x 152 pixels

  • 76 x 76 pixels (standard resolution)