How to Add A Custom Favicon to Your Wordpress Blog

How to Add A Custom Favicon to Your WordPress Blog

A favicon is a small graphic/image that is associated with a page or a website. Most website favicons are designed as a smaller image of the site’s logo or other branding. The name favicon (pronounced: fah-vih-kahn) came from Internet Explorer which calls it’s bookmarked sites “favorites” and the favicon icon was displayed in the favorites menu.

Today’s Tutorial – How to Add a Custom Favicon to Your WordPress Blog

First Step: Generate your own custom favicon image.

The most common sizes for favicon images are: 16×16, 32×32, 48×48, 64×64, 128×128. If you can’t design the images and resize them yourself in photoshop, don’t worry, there are services on the web that allow you to upload and resize the images. One service I like is: http://www.genfavicon.com

Second Step: Insert your new image into your website.

First, add the image to your Media Library. It’ll render an image url for your favicon. Copy that url as you will be inserting it into the header.php code of your wordpress site. Locate your header.php folder and edit the file in the following manner:

<link rel=”shortcut icon” href= “favicon.ico” >

Note: replace “favicon.ico” with your new image url.

Then, you’ll want to save your header.php file and do a hard refresh on your browser. At this point you should be able to see your favicon next to your url as in the sample image above.

http://www.denver-realestateonline.com Steve Scheer

Nice instructions on favicons. While I have one, someone put it there for me way back when, and I have been wanting to update it. I'll be using your instructions to get that done. Great to finally meet you last month.
http://www.ricardobueno.com Ricardo Bueno

Hi Steve, pleasure to meet you as well.

The image generator above is pretty easy to use (you'll just have to edit the image if you don't have one designed already. The favicon generator above will resize it to the appropriate height/width for you. From there, the rest is pretty easy, just a matter of locating the code hi-lighted above in your header.php file.

Glad it helps now go pass it along
http://www.denver-realestateonline.com Steve Scheer

Nice instructions on favicons. While I have one, someone put it there for me way back when, and I have been wanting to update it. I'll be using your instructions to get that done. Great to finally meet you last month.
http://www.ricardobueno.com Ricardo Bueno

Hi Steve, pleasure to meet you as well.

The image generator above is pretty easy to use (you'll just have to edit the image if you don't have one designed already. The favicon generator above will resize it to the appropriate height/width for you. From there, the rest is pretty easy, just a matter of locating the code hi-lighted above in your header.php file.

Glad it helps now go pass it along
http://www.sukhrajbeasla.com Sukhraj Beasla

Guess what? I noticed your favicon and all the changes you made recently! Way cool! I'm going to be making one soon. By that way, I was going to ask you how to make one but glad you already addressed this.
http://www.asiantv.org Asian Tv

Awesome! works like magic, its currently working well on my site using
your updated code but it seems to only work in Firefox and not in IE.
How wonderful it would be to see an update to this tutorial that also
works in IE. In any case, I pass the full credit to you for sharing
this. All the best.