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.
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.
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 🙂
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.
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 🙂
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.
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.
Ok, this might be a stupid question, but I’m a newbie. I have created my favicon, but I don’t know where I find the header.php folder to insert it. I looked in the Genesis folder on my hardrive, and found header.php, but when I opened it it said I should make all modifications in my child theme (agentpress). Help?
Hey Clay, not a dumb question at all… I don’t think AgentPress has a header.php folder. Your best bet is to log into your site via FTP, go to WP Contents >> Themes >> AgentPress >> click on Images. In there, you’ll want to replace the favicon.jpg image that’s there (the default Genesis favicon) with your own image – you’ll want to title it the same.
Let me know if that makes sense…
wow thanks for this information 🙂
Nice Tutorial.