1. Make a picture file in Photoshop - it can be any size, but keep in mind the finished product is going to be 16px square, so choose an appropriate picture file size. Something like 300 x 300px works pretty well to design with. I prefer to make the background transparent, but that is optional - I think it looks better in the address bar and if saved on a link toolbar the background is still transparent.
2. After you get your picture file designed, there are two things you can do:
a. Save for web -> size your file to 16 x 16px
b. Save for web -> then use a favicon generator
I recommend Dynamic Drive's Favicon Generator:
3. Upload the file to your website's root.
4. In the <head> tag of your page you need to specify the location of the favicon:
For HTML use:
- Code: Select all
<link rel="icon" href="favicon.ico" type="image/x-icon">
If you are using XHTML then use:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Which is the same thing, but has a slash on the end of the tag
You can then see the favicon when you load or refresh the page. Some browsers take a bit longer for the favicon to show up in the address bar. I notice IE takes a couple of tries, but Firefox will usually load it right away. If you create a favorite the favicon will show up right away in Firefox, but takes a couple of tries in IE.
That's it - very easy and it adds a little pizazz to your site. For more info, the Wikipedia gives a good explaination on usage and standards.
http://en.wikipedia.org/wiki/Favicon
That's it!