subject: How To Make An Ipad Icon For Your Website Or Blog By Www.batteryfast.co.uk [print this page] How to Make an iPad Icon for Your Website or Blog by www.batteryfast.co.uk
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 Safaris 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 youre a website owner or blogger, how do you create your own custom icon for the iPad?
Doing so is a simple three step process:
1. Create the icon.
2. Upload it to your site, preferably in the root public accessible directory.
3. Specify its location in your HTML header with the tag.
Create the icon
The size of an iPad Home Screen icon is 7272 pixels. The iPads display is 132 pixels per inch, so thats where I set my images 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, Ive 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 Apples 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 youve 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 section of your HTML header:
Change the value of the href attribute to reflect the URL to your sites 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 iPads 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 5757, but you do not have to create an alternate version. Those mobile devices will shrink down your 7272 icon automatically.
