Geek Posted February 9, 2011 Posted February 9, 2011 <div class="KonaBody"><p><img src="http://osxdaily.com/wp-content/uploads/2011/02/custom-bookmark-homescreen-icon.jpg" alt="custom-bookmark-homescreen-icon" title="custom-bookmark-homescreen-icon" width="320" height="113" class="aligncenter size-full wp-image-12502" /></p> <p>If you have a website of your own or are developing one for someone else, you should customize the saved bookmark icon that appears on a users <a href="http://osxdaily.com/tag/ios/">iOS</a> home screen. In the screenshot above you’ll see the custom OSXDaily favicon sitting on the screen of an iPhone 3GS.</p> <p>Setting the Apple Touch Icon is a good idea because by default iOS will just save a small thumbnail of the site. The small thumbnails are often hard to identify and generally don’t look that great, so let’s set your own favicon image instead. <span id="more-12501"></span></p> <h2 style="font-size:1.2em;">How to Customize and Set an Apple Touch Icon for a Website</h2> <ul> <li>Create the icon, make sure it is a square, the one here on OSXDaily.com is 120×120 pixels, but you could choose other sizes</li> <li>Save the homescreen icon as a PNG file and label it: apple-touch-icon.png</li> <li>Drop apple-touch-icon.png into the root webserver directory, so it can be accessed at domain.com/apple-touch-icon.png</li> <li>Test your websites homescreen bookmark icon by visiting the site from Safari in iOS, and then tapping on “Add to Home Screen”</li> <li>Look at the iOS device homescreen and you’ll see the bookmark saved there with your new custom icon, like the screenshot above</li> </ul> <p>As long as the file is properly named and in the webservers root directory, Mobile Safari will know what to do with it so there is no further adjustment needed to get the iOS specific favicon to show up.</p> <p>For reference, here is our custom ‘apple-touch-icon.png’ image that we use for <a href="http://osxdaily.com">OSXDaily.com</a>:</p> <p><img alt="OSXDaily iOS Bookmark Icon" src="http://osxdaily.com/apple-touch-icon.png" title="OSXDaily Touch Bookmark Icon" width="120" height="120" class="aligncenter" /></p> <p>You’ll notice that the actual icon file does not have the light refraction saved onto the icon, iOS handles this on it’s own. You can use any image you want, but I’d recommend creating one that captures the familiar UI of existing iOS icons.</p> <p>This obviously isn’t the same as having a dedicated iOS app, but a decent mobile user experience from the web is a good idea and it avoids what can be the <a href="http://osxdaily.com/2010/09/07/iphone-development-costs/">high price of developing an iOS app</a>.</p> <p>And hey, if you’re concerned about stuff like this, you probably use Photoshop to at least design the icons right? So check out some <a href="http://osxdaily.com/2011/01/31/speed-up-photoshop-tips/">tips to speed up Photoshop</a> while you’re at it.</p> </div> <p><a href="http://feedads.g.doubleclick.net/~a/IVhua_D72dCXbNY1-LoSUqCAvck/0/da"><img src="http://feedads.g.doubleclick.net/~a/IVhua_D72dCXbNY1-LoSUqCAvck/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/IVhua_D72dCXbNY1-LoSUqCAvck/1/da"><img src="http://feedads.g.doubleclick.net/~a/IVhua_D72dCXbNY1-LoSUqCAvck/1/di" border="0" ismap="true"></img></a></p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=cvYyhtJqzxo:4P0w5-B8eeA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=cvYyhtJqzxo:4P0w5-B8eeA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/osxdaily?i=cvYyhtJqzxo:4P0w5-B8eeA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=cvYyhtJqzxo:4P0w5-B8eeA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/osxdaily?i=cvYyhtJqzxo:4P0w5-B8eeA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=cvYyhtJqzxo:4P0w5-B8eeA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=cvYyhtJqzxo:4P0w5-B8eeA:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=qj6IDK7rITs" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/osxdaily/~4/cvYyhtJqzxo" height="1" width="1"/> View the full article
Recommended Posts