Favicons and Apple Iphone Icons

For almost every web site that I design/build I tend to finish it off with creating 2 little icons that help to brand the company and add that finishing touch.  These are the favicon (the custom graphic that proceeds your web address in the address bar) and the apple-touch-icon (the custom graphic for when someone bookmarks your site on their iphone.)



Pretty easy to create. Here are the basic steps:

• Open your favorite image editing program (photoshop for me)
• Create a new document 64x64px (creating at this size will save you a step later when making the iphone icon)
• Design your graphic - This needs to be a very simple icon as the final image size is only 16x16px or 64x64px (for the iphone icon)
• Apple-touch-icon - File --> Save for Web --> set to .png and save file as apple-touch-icon.png
• Image --> Resize --> 16x16px
  
• File --> Save As --> favicon.ico (please note the ico extension)  
• You may need to download the .ico plug-in for photoshop.
  
• If this isn't an option for you save the image as a .jpg and use an favicon generator like ... favicon.cc
• You now have both graphic files
  

Now we need to get it online:

• Upload the favicon into your /root directory of your website (make sure that it isn't buried in any subfolder but resides freely in same directory as your index file)
• Put the following code on the pages that you would like the icon to reference.

<link href='http://yourdomain.com/favicon.ico' rel='shortcut icon' type='image/ico'/>
<link href='http://yourdomain.com/favicon.ico' rel='icon' type='image/ico'/>

•  Upload the new pages with the additional code to your web site.
  

Now your icon may not show up immediately ... if not try clearing your browser cache, closing your browser, and then reopening.

For some sites like blogger or wordpress the position of the code on your pages is relatively important and needs to be placed right before the opening tag.

Other Great Resouces:
http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
http://www.favicon.cc/