Bookmarking Icons for your Homescreen
Apple iPhones, iPod Touch and iPad, and Windows 8 internet-enabled devices all have the ability to save individual bookmarks (or Favorites as Windows calls them) to the Homescreen (Metro Start Screen in Windows). You may create and add custom icons to your website which will be appear when a user adds your bookmark link to their Homescreen.
Create your icons
Firstly you will need to create your icons. You may either use a template to design your icon or create your own in Photoshop or Illustrator.
You will have to create the icons in a number of sizes to fit different Apple and Windows 8 devices. You will need specific filenames to make this work:
|Device(s)||Display||Size (in pixels)||Filename|
|iPhone / iPod Touch||Standard||60×60||touch-icon-iphone.png|
When designing your icons please bear in mind you do not have to create the rounded corners or other native styles as iOS and Windows 8 will add styles automatically. If you do want to specify the effects used in your icon you must add –precomposed to the end of the file name (before the file format suffix) e.g. touch-icon-iphone-precomposed.png; turning off defaults.
Upload your icons
Using an FTP program such as Filezilla, upload your icons to the root folder of your website (in the public_html or www folder).
Adding the code
The good news for Windows 8 is that once you have uploaded your image with the correct file name you are done. You must however add a few lines of code to the <head> section of your website to make this work with iPhone, iPod Touch and iPad.
As we at DesignWrite use the Genesis Framework from StudioPress with all our websites, we have included here how to add the code using the settings for this framework. The Genesis framework is available through this affiliate link.
Go to the Genesis Theme Settings and scroll down to ‘Header and Footer Scripts’ section. Enter the following code into the first field labelled ‘Enter scripts or code you would like output to wp_head()’
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Now ‘Save Settings’
You now have your Homescreen bookmarks all set up for Apple and Windows 8-enabled devices.
If you do not have the Genesis Framework the easiest way to add this code would be to install a plugin such as Insert Headers and Footers or similar.
If you are only adding one icon size you do not need to set the sizes attribute. The element’s size defaults to 60 x 60 pixels.
If there is no icon that matches the recommended size for the device, the smallest icon available that is larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
If no icons are specified using a link element, the website root directory is searched for icons with the touch-icon-i…. prefix.
Share this post and your thoughts!
Do you know an easier or better way of adding Homescreen Icons to your website? I would love to hear your comments.
Please share this quick tutorial on your social media networks.