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

Say Hello

You can reach me by email, I'd love to hear from you.