How do I create & add a favicon to my website?

There are two ways to do this.

My Preferred Method

  1. Create an image with the same width & height, resize image to 16×16 pixels.

  2. In Photoshop, File-> Save for Web as a PNG-24, check Transparent if you want to.

  3. 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).

Back to Blog