Yesterday I wrote about bookmarking a website to your iPad desktop, which I think is a much more convenient place to keep shortcuts for frequently visited websites than in Safari’s bookmarks menu (this is also called the “Home Screen”). Safari takes a screenshot of the page in order to create the desktop icon, which leads to another question:
If you’re a website owner or blogger, how do you create your own custom icon for the iPad?
Doing so is a simple three step process:
- Create the icon.
- Upload it to your site, preferably in the root public accessible directory.
- Specify its location in your HTML header with the <link> tag.
Create the icon
The size of an iPad Home Screen icon is 72×72 pixels. The iPad’s display is 132 pixels per inch, so that’s where I set my image’s DPI. Going from there, I just created a square with rounded corners (20 pixel radius) and filled it in with a few simple colors and the title of your site or a little graphic.
To help you get started, I’ve created a sample icon in Photoshop which you are free to use. The edges have a slight bevel and the background has that reflective “gel” look seen on so many of Apple’s buttons and icons. Feel free to use this as a starting point for your own icon. You can change the fill color of the rounded rectangle or adjust the colors of the gradient overlay, change the text to the name of your site, or replace it with some sort of graphic. Click the image to download the .PSD file.
Upload the icon to your site
When you’ve finished designing your icon, export it as a transparent PNG named apple-touch-icon.png and upload it to your site. It is recommended that you place the file in the root public accessible directory.
Specify the icon in your HTML header
As a final touch to make sure the iPad knows where to find your icon, add the following tag in the <head> section of your HTML header:
Change the value of the href attribute to reflect the URL to your site’s icon. Be sure to change example.com to your own domain name.
Instruct your visitors
Now your site has a custom icon that can be displayed on the iPad’s desktop. In order for a visitor to add it, they must click the “+” button in Safari and tap “Add to Home Screen”. “Bookmark a Website to Your iPad Desktop” contains more detailed instructions and screenshot of this process.
Also compatible with iPhone and iPod Touch
This icon is also compatible with the iPhone and iPod Touch. The size of the icons on those displays is 57×57, but you do not have to create an alternate version. Those mobile devices will shrink down your 72×72 icon automatically.
