John Alexander Rowley » icon http://www.johnalexanderrowley.com computer specialist and online marketing professional Thu, 02 Feb 2012 18:34:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Custom iPhone icon for websites! http://www.johnalexanderrowley.com/custom-iphone-icon-for-websites/ http://www.johnalexanderrowley.com/custom-iphone-icon-for-websites/#comments Sun, 29 Nov 2009 18:40:45 +0000 John Alexander Rowley http://www.johnalexanderrowley.com/?p=153 So, with mobile browsing becoming more and more popular, it’s increasingly important to optimize your site for a variety of screen resolutions.

Another nice little feature which I have recently implemented for both work and my personal site is the addition of an iPhone icon, so that when the website is saved to the home-screen on the iPhone it shows a sexy icon rather than a screenshot of the website.

To do this, I simply created a 57px x 57px box, with a transparent background in Photoshop. I used the rounded rectangle tool to create a nice little box, added a gradient and a light curve at the top to resemble the reflection. I finally added some symbols to the icons, and hay presto, its created!

To implement the icon couldn’t be simpler! Just upload the icon to the root of your site and re-name it to ‘apple-touch-icon.png’. Safari automatically checks the root for a .png of this name! If you don’t want the icon in the root of your site, just add the following code to your page/s:

<link rel=”apple-touch-icon” href=”LOCATION/apple-touch-icon.png” />
Custom iPhone icon for websites!

]]> http://www.johnalexanderrowley.com/custom-iphone-icon-for-websites/feed/ 0