How to Create Buttons to Shortcuts

When you create a shortcut to a Web page (called a "webclip") on an iPhone, the phone creates its own button for it, which is usually based on the website's own button settings. Sometimes it's just a tiny copy of the entire Web page. You can create your own buttons for those webclips with a free Web-based service and any graphics program that will save Portable Network Graphics (PNG) files. The resultant shortcut button looks absolutely professional---it even has the 3-D lighting effect used for high-end iPhone buttons.

Things You'll Need

• iPhone with updated OS
• Computer with Internet access
• PNG-compatible graphics program (e.g., Photoshop, Windows Paint)

Instructions

1. Create your shortcut icon in a graphics program. The icon should be 57-by-57 pixels. Save this image as a .png file.

2. Navigate to the iPhone Webclip Icons site on your computer (see Resources), and scroll down to "Create a new webclip icon."

3. Upload your .png file by clicking the "Browse" button next to the "Upload image" field and selecting the name of the file. Also enter the name you want to give your shortcut, the URL of the website to which the shortcut directs you, and an email address that you can receive on your iPhone. Then click "Create shortcut."

4. Open the email the website sends you on your iPhone, and tap on the link indicated. This displays a Web page that shows your icon.

5. Add the icon to your iPhone's home screen by tapping the "+" symbol at the bottom of the Safari browser and then tapping the button that says "Add to Home Screen." The icon for your shortcut will now appear on your iPhone's home screen.

Tips & Warnings

• If you don't want to use a third-party service and you're handy with HTML programming, you can create your own website that redirects to the page to which you're shortcutting. Then set the iPhone button for that page to the graphic you want by adding the following line to the Web page:

• "<link rel="apple-touch-icon" href="iconname.png"/>"

• You can turn any graphic you like into a button by copying it into your graphics page and resizing it to 57-by-57 pixels. Then just save it as a .png file.

• Stick closely to the 57-by-57 pixel dimensions; larger graphics will get fuzzy when they are converted into iPhone buttons.

References

• iPhone Webclip Icons
• Pixelspread: Override Webclip Icons
• Dan Dickinson: iPhone Webclip Icons

Resources

• iPhone Hacks
• iPhone Webclip Icons