Favicon Tutorial
A favicons (favorite icon) is a the 16x16 pixel square icon that is associated with a website. Is usually displays next to the URL in the address bar of your browser or in your bookmarks menu. This tutorial will show you how to create one and put it on your site.
- Open Photoshop and create a new image. It should have a transparent background and be 64x64 pixels. You can also make it 128x128 pixels or any other multiple of 16 that you want. The idea is to make it larger but still proportionate so that you have a larger canvas to work in. Favicons may have transparency, so your icon does not necessarily have to be a square. It merely needs to fit inside the box.
- Create some sort of graphic to be your favicon. It may easiest to find a good font and use your initials in colors complementing your site - you want your favicon to be unique and relevant to your site. There are good free fonts at dafont.com. Also keep in mind that 16x16 pixels is very small and cannot show much detail.
- To see what your favicon will look like at size, zoom out until it is 16x16 pixels (25% if you are working in a 64x64 pixel space).
- Once you are happy with your results, save your images using File-Save for Web and Devices. You should use the PNG-24 preset, located in the upper right corner, and name it favicon. Save it anywhere you like, although you should keep track of it for future editing. It may not be a bad idea to keep it in your website folder.
- Most browsers now allow for favicons to be in GIF or PNG format, but to keep it simple and give you the best chance of having it work, we will convert your image to an icon (.ICO) file. There is an online generator at Dynamic Drive. All you need to do is upload the file and then save the file it generates for you. You will want to save it in the root (home) folder of your website (where your index.php file is located).
- Upload (put) the favicon.ico file onto your website. Check to make sure that it is there by going to http://www.YOURSITE.com/favicon.ico. If it shows or gives you the option to download it, you have successfully uploaded it to your site.
- In order to have browsers associate your favicon with your site, you will need to add just one line of code to your site. You will want to add it in the head of your page, which should be located in the _top.php file for your site. It will probably be easiest to keep it near the <head> tag. Here is the line for you to copy and paste in:
<link rel="shortcut icon" href="/favicon.ico"> - Go to your site and the favicon should show up. It may take a couple of refreshes before the browser picks it up, but if you have followed all the steps, you should see it.
For examples of good favicons, see this article and the other parts of it at Smashing Magazine.