How do I create & add a favicon to my website?
There are two ways to do this.
My Preferred Method
-
Create an image with the same width & height, resize image to 16×16 pixels.
-
In Photoshop, File-> Save for Web as a PNG-24, check Transparent if you want to.
-
Add this bit to your <head> tag.
The Other Way
I usually create a .ico as a backup anyway, but the previous method works just fine. I like to use Dynamic Drive Favicon Generator. If you take this route you’ll want to use this code in your <head> tag instead.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
For examples of favicon design, check out Smashing Magazine.
If my code helped you out, I’d like to know, please leave comments below (no registration needed).