---

Create an Icon for Your Web Application or Webpage

In iPhone 1.1.3 and later, you can provide a custom icon that users can display on their Home screens using the Web Clip feature. You can create an icon that represents your website as a whole or an icon that represents a single webpage. Users tap the icon to reach your web content in one easy step.

Users can display as many custom icons on their Home screens as they want, so you should design an icon that is:

• Attractive, so users want to keep it on their Home screens

• Distinctive, so users can easily find it among all other icons

If your web content is distinguished by a familiar image or memorable color scheme, it makes sense to incorporate it in your icon. However, to ensure that your icon looks great on iPhone 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 "Specifying a Webpage Icon for Web Clip" in Safari Web Content Guide for iPhone.)

When a user decides to display your icon on the Home screen, iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:

• Rounded corners

• Drop shadow

• Reflective shine

For example, Figure 4-1 shows a simple icon as it might be provided by a webpage:

Figure 4-2 shows the same icon as it is displayed on a Home screen by iPhone 1.1.3:

To ensure that your icon can take advantage of these visual enhancements, provide an image in PNG format that:

• Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone 1.1.3 scales it)

• Does not have any shine or gloss

As with other user interface elements on iPhone, icons that use bold shapes and lines and pleasing color combinations work best. It’s advisable to spend some time simplifying your icon design so it clearly conveys the essence of your web content. Also, it’s a good idea to investigate how your choice of image and color might be interpreted by people from different cultures.

---