How to Add a Favicon in Wordpress Blog
To all my dear readers: Happy New Year!! May the year 2006 bring you good fortune and success.
In conjuction with the new year, I have added a favicon to my blog. If you do not know what a favicon is; it is the little picture beside the URL of this blog. Here’s a screenshot of AmosWong.com’s favicon (in red circle):
Some say that having a favicon is like putting on cosmetics. This is only partly true. More importantly, having a favicon on your blog allows the visitors to quickly identify your site in their Favorite folder among the other bookmarked site. Take a look at the example below:
If you do not have a favicon currently and you are interested to, here’s how to can do it.
- First, you will need an image. Any image will do provided that it is royalty-free and not copyrighted (meaning, you cannot use Coca-Cola’s corporate logo as you favicon).
- Go to Chami.com’s Favicon Tool page.
- Upload you image by clicking the “Browse” button and click “Generate Favicon”
- After Chami’s tool completed the generation, you will be presented with the link to download you favicon. Click the download link and save the favicon on your computer. (You can also test your favicon by clicking on the “Test in Browser”
- Unzip the contents you have just downloaded and upload the favicon to your webhost (”public_html” folder, for most of you).
- You will now need to edit your header.php of your wordpress blog. Depending on the theme you use, locate the header.php folder and edit the file by adding the following code:
- Save your header.php file
- Hard refresh your browser by pressing the Ctrl+F5 keys. You should now be able to see your favicon next to your URL.
Note: If you wish to change your favicon, simply replace the .ico file with another. Enjoy. 
Paul Smith said,
January 7, 2006 @ 12:39 am
Amos, first of all, very nice looking blog. Secondly, thank you for the favicon information. The favicon I have is pretty primitive, and I haven’t yet added one toOutdoor Weblog my WP directory - which exists as a subdirectory to my main website root directory. I don’t have WP 2.0 - do you know if there are any issues with WP 1.5 and the above favicon utility?
By the way - good luck with your child. I remember when mine was a mere month old. Too many years ago now.
Paul
amos said,
January 7, 2006 @ 7:58 am
Hi Paul,
Thanks for stopping by. The utility basically converts images into icons and as such, would not cause any issue regardless of versions you use.
Thanks for your wishes and nice blog you have there.
Anangga Pratama said,
February 19, 2006 @ 7:36 pm
Dear Amos,
On Behalf of Raison D’etre Management, i would like to say thank you for your nice tutorial. Now, our site can use Favicon ^_^. Thanks a lot. Wish you all the goodluck ^_^.
Anangga Pratama,
-Raison D’etre Management-
charri said,
February 27, 2006 @ 1:49 pm
Wonderful tutorial there; I’ve been looking for something like this. Thanks a lot! It’s much appreciated on my side.
D.T. Kelly said,
April 6, 2006 @ 12:55 am
Thanks for the easy to follow instructions!
rem said,
October 11, 2006 @ 3:44 pm
I really couldn’t find where to upload my favicon.ico, I can’t find my ”public_html” folder and I’m not sure if I have one?
ftp://benyaptim.org/www/ is it the right directory for me?
amos said,
October 13, 2006 @ 7:01 am
Hi rem,
I checked your site and saw a nice little favicon.
Great to see that you have managed to place the file correctly.
benyaptim.0r9 - seni çok! » Blog Archive » favicon nasıl yapılır? [guugıldan gelenlere özel] said,
October 13, 2006 @ 2:49 pm
[…] ne diyordum, ben favicon’um olmasını istiyordum. her gün güne 78 kere favicon diyordum çünkü söylemesi de çok zevkliydi. ama nasıl yapılacağını bilmiyordum. neyse ki dostum amos yardımıma koştu. chami.com‘da istediğim resmi favicon yapabilmem için kullanımı çok kolay bir tool vardı. amos’ın sayfasında yer alan direktifleri takip ettim fakat o sırada internet explorer kullandığımdan başarılı olup olamadığımdan emin olamadım. [favicon’lar malesef ie browser’ında çalışmıyor] bir de favicon.ico file’ımı ftp’de doğru directory’e attığıma dair şüphelerim vardı. […]
rem said,
October 13, 2006 @ 6:59 pm
hi amos,
happy to see your track back here
i reviewed the instructions above once more and i realized that i was making a pretty silly mistake! finally i managed and now my favicon works not only with ff but even works with ie!
but i wonder if there is a way for it to show up in the title bar at the top of the browser and not just in the url address bar?]
amos said,
October 16, 2006 @ 12:28 pm
Title bar? I doubt that it can be done but someone knows how to get it done, I’ll love to implement it too.. hehe
Stephanie said,
December 11, 2006 @ 7:29 pm
Hey - thank you so much! I now have an icon!!! Really great - thanks for posting this!
:)
amos said,
December 20, 2006 @ 7:20 pm
Hi Stephanie,
Thanks for dropping a note here.
Love that favicon of yours. Simple and yet eye-catching… OZ..
Sergio Pinna said,
February 6, 2007 @ 8:10 pm
Thank you very much!
;-)
Sergio.
Sergej Pinka said,
February 6, 2007 @ 8:12 pm
Aggiungere una favicon ad un blog Wordpress
Visto che volevo aggiungere una favicon al mio blog ho tradotto l’articolo How to add a favicon in wordpress blog.
Se non sai cosa è una favicon, è la piccola immagine accanto all’URL di questo blog. Questa è una screenshot della favicon di sergej…
Deas said,
February 9, 2007 @ 7:20 pm
Thanks for the help - this was easier to follow than the threads I found on the official Wordpress sites. Nicely done.
roland said,
February 28, 2007 @ 6:41 am
hi
thanks for posting this helpful post.
is it possible that this only works in the blog and not in the sites?
i did everything like you wrote, but it only works in my blogstuff (on my site called news).
amos said,
March 1, 2007 @ 4:15 pm
Hi roland,
Thanks for stopping by and I’m glad you’ve got your favicon to work.
If you want to have favicons in your other sites, put the files and code in your index or homepage instead of header.php
Mara Mei said,
March 13, 2007 @ 5:18 pm
nice tips. thx.
The Man, The Myth, The Legend…Cody Willner » Blog Archive » Something new to my blog said,
April 3, 2007 @ 10:51 am
[…] Hey everyone. Just letting you know that I added one of those “favorite icons” to my web address bar. Look up at the web bar and you can see a mini pic of me haha. I thought it was pretty cool. If you get bored and want to do something like that, I got the information from this guy here. Take a peek and try it out. […]
links for 2007-04-21 « Coruxa Xusticiera said,
April 22, 2007 @ 7:29 am
[…] How to Add a Favicon in Wordpress Blog (tags: wordpress favicon tutorial) […]
Matt Vapor said,
April 24, 2007 @ 10:54 am
Thanks!
Sandy said,
May 5, 2007 @ 8:45 pm
Where in the header.php file do you paste the link?
amos said,
May 6, 2007 @ 1:25 am
Hi Sandy,
and tags.You many place the code anywhere as long as it is between the
104 weeks » Blog Archive » favicons, favicons! said,
May 7, 2007 @ 7:17 am
[…] 104 weeks now has a favicon! You’ll notice that, next http://mwengerd.blog…… in the address bas is a tiny version of the bass clef here. This website will convert a photo file into a favicon.ico file and this webpage has instructions for installing your favicon into a Wordpress blog. Now everyone can have a favicon! […]
Tempus Rerum Imperator said,
May 7, 2007 @ 10:45 pm
[…] Ok, there have been numerous sites talking about adding favicon.ico on Wordpress. I came across one by Amos Wong which was interesting but a little complicated for me and I’m sure for some to understand. So I’ve come to a conclusion that I will add in more pictures in this step by step guide to adding favicon.ico on Wordpress […]
ozlady.com » Thanks to Amos Wong said,
May 21, 2007 @ 12:42 am
[…] A thanks has to go to Amos Wong again who, through his web site, taught me to add a favicon to my web site URL - it looks way kewl! […]
Stephanie said,
May 21, 2007 @ 12:43 am
Thanks again-I’ve updated my site, which meant I needed a new favicon, so I came back here… I have even added an animated one!
Thanks again Amos!
KCLau said,
June 15, 2007 @ 9:30 am
HI,
Great tips! I added the favicon and code at the header.
But funny thing is I saw the favicon when I login to the dashboard. But can’t see it a the homepage. Do you have any idea what happen?
amos said,
June 15, 2007 @ 9:16 pm
Hi KCLau,
What browser are you using? If it’s IE, sometimes, it doesn’t play well with favicons. Only sometimes. I’ll seeing it well with FireFox and Safari but not IE.
Try this: copy the favicon.ico file and put it into /public_html/{yourKCLAUfolder}/wp-content/themes/{yourTHEMEname}/
Remember to hard-refresh your browser.
Spence said,
June 15, 2007 @ 11:48 pm
I really cannot find a public.html folder. I don’t know what to do now. can you jelp me. I would appreciate it.
Spence said,
June 16, 2007 @ 5:02 am
I posted earlier and somehow it was taken off, oh well. I cannot find the public folder, so I don’t know exactly where to place the favicon file. can anyone help.
amos said,
June 16, 2007 @ 7:29 am
Hi Spence,
Your comments were not taken off. Every comment here goes through a process of moderation
I’ve sent you an email to help you.
sam said,
June 17, 2007 @ 9:11 am
Sweet. So simple. So perfect! Thanks for sharing!!
cady said,
June 25, 2007 @ 10:32 am
hi. i followed your instructions for creating a favicon, but it didn’t seem to work. i can’t see it. can you please help me?
thanks.
Script-Diver said,
July 9, 2007 @ 1:11 am
An excellent tutorial. Thank you very much.
celedyr.net » Favicon said,
July 9, 2007 @ 1:14 am
[…] Dank diesem einfachen Tutorial hat die Seite nun auch ein Favicon. Vorerst bleibts bei einem Kanji. Ich hoffe, man kann es auch erkennen. Werde das mal an einem Japanologiestudenten meines vertrauens testen. Sollte es zu unleserlich sein gibts vielleicht bald ein neues. […]
Preyanka said,
July 12, 2007 @ 1:20 am
Hi–great tutorial–thank you. One problem: when I type www in front of my domain the icon reverts to the old one. Do you know how to fix this?
Here’s my site: http://preyanka.com
Thanks:)
amos said,
July 13, 2007 @ 2:18 pm
Hi Preyanka, your welcomed. As to your problem, try pressing Ctrl+F5 simultaneously to hard refresh your browser.
Como colocar um favicon no blog at E-Metropoli - blog said,
July 16, 2007 @ 4:02 pm
[…] How to Add a Favicon in Wordpress Blog […]
Josh said,
July 22, 2007 @ 8:21 am
wow! thanks so much for the great info! I always wondered how to do this, thanks for taking the time to make a tutorial of it
Shypy said,
August 14, 2007 @ 4:55 am
Just another hint. If you’re having multiple(add-on) domains on the same host, you will need to upload the favicon.ico file to the sub-directory for that particular domain within the public_html directory.
Hope this helps
随便说说 - 范海鹏的博客 » Blog Archive » 如何向WordPress博客中加入Favicon（翻译） said,
August 15, 2007 @ 7:06 pm
[…] 刚刚给自己的博客加上了最喜欢的汽车人Favicon，是按照在google上找到了一篇英文的HOWTO文章一步一步做的，在这里翻译出来共享给blogger们。 […]
joseph hollak said,
August 16, 2007 @ 12:31 am
Here’s another “thank you” comment for this informative post.
It’s great to be able to google “Wordpress favicon” and there is your post with great instructions as to how we can fix the look of our own site.
So, “thank you.”
Karl said,
August 18, 2007 @ 6:55 am
Hey guys,
I just tried adding my own favicon. I uploaded the favicon into numerous folders, it doesn’t seem to be working though.
I’m using the yourblog20 theme. Thus I uploaded favicon.ico into html/, as well as /html/wp-content/ as well as html/wp-content/themes/yourblog-20-theme AND
html/wp-content/themes/yourblog-20-theme/images.
I changed the file header.php in the yourblog-20 folder.
I’d be thankful for any advice.
Karl
amos said,
August 21, 2007 @ 8:07 pm
Hi Karl,
Try to hard refresh your browser. If that fails, empty your cache and access your blog again.
SaeedM said,
September 7, 2007 @ 12:28 am
Thanks for the very good tutorial. I had trouble finding out which header to put it into before I found your site.
donjuan said,
September 11, 2007 @ 6:11 am
This was the most concise information I’ve found for creating a facivcon. Works perfectly. Thanks
Simon said,
September 11, 2007 @ 5:42 pm
Hi there, wow handy link. I am uncertain on how to acess the public root file of my blog? I thought with word press you could only edit the css? I really need to pop a favicon but do not know how to acess the php file. Some help would be great and much appreichiated!
Cheers
Si
amos said,
September 12, 2007 @ 10:33 pm
Hi Simon,
You will need to check with your webhost on the procedures to access your blog’s root directory.
Different webhosts have different methods. If you need my help, send me an email.
Good luck!
Tom said,
December 15, 2007 @ 4:08 am
Thanks. It helped for me.
Matthew Casey said,
December 21, 2007 @ 2:23 am
Many thanks for this
I was able to make a more suiting icon for my website and now it displays ok
Many thanks
Red said,
February 1, 2008 @ 1:04 am
Hey, thanks for the tutorial. The favicon is working… but I’ve noticed that it only works sometimes. There will be like two whole days that it won’t work and then it will randomly show up. I’ve hit refresh about a million times. I don’t know how to get it to show up 100% of the time.
amos said,
February 1, 2008 @ 3:03 pm
Hi Red,
Thanks for your comment.
You can try to empty your browser’s cache and try again.
celedyr.net » Favicon auf der Seite said,
February 4, 2008 @ 7:06 am
[…] Dank diesem einfachen Tutorial hat die Seite nun auch ein Favicon. Vorerst bleibts bei einem Kanji. Ich hoffe, man kann es auch erkennen. Werde das mal an einem Japanologiestudenten meines vertrauens testen. Sollte es zu unleserlich sein gibts vielleicht bald ein neues. […]
Patricia said,
February 8, 2008 @ 10:21 pm
thanks for the tutorial!!
cady said,
February 12, 2008 @ 11:23 pm
i followed your tutorial and placed the code, but my favicon still isn’t working. do you have any idea why that could be?
Darren said,
February 17, 2008 @ 11:50 pm
Is there a way to test the favicom without it being uploaded to the web as i dont yet have a website just designing one at present & it doesn’t show up when i preview in ie firefox or opera. i have the file placed in my root folder. thanks
Darren said,
February 17, 2008 @ 11:58 pm
sorry got it working in firefox and opera but not working in ie7 any ideas i just added the link rel code in the head to get it working in the other 2 browsers cheers
amos said,
February 18, 2008 @ 2:03 pm
Hi Cady,
Looks like you sorted your problem. Nice favicon..
Hi Darren,
Your 1st question: Preview the Favicon.
Yes, you can do that using Chami’s tool.
Your 2nd question: IE7 problem.
Try 2 things. First, hard refresh your IE7 browser by hitting Ctrl+F5 simultaneously.
Or secondly, delete all the cached files in your Internet Explorer.
To do that, go to Tools > Options > Advanced > Clear Now.
cady said,
February 18, 2008 @ 10:34 pm
actually, that’s my old favicon. i can’t get my new one (which matches the flowers on my sidebar headers) to work.
amos replied,
Hi cady, you will need to locate your old favicon and copy your new favicon over it.
Darren said,
February 19, 2008 @ 3:54 am
Thanks for the reply have tried both your suggestions but still doesn’t show any suggestions?
amos replied,
Hi Darren,
Try copying a copy of the favicon.ico file to the root of your site; i.e. in the “public_html” folder. Then, clear your browser cache and see if the favicon appears.
Computer Realm | How to change your Wordpress Favicon said,
February 26, 2008 @ 7:41 pm
[…] You can read a different explanation of adding a Favicon to your Wordpress blog here […]
The Dood said,
February 27, 2008 @ 5:29 am
Thanks for the info, Amos. I didn’t realize that php required a specific entry to make the favicon work.
The favicon generator link was especially helpful!
- The dood
http://www.gettingolderandwiser.com
How to add a favicon to a Wordpress Blog said,
March 18, 2008 @ 6:22 pm
[…] Source: Amos Wong […]
Tutorials you don’t need - unless you’re an idiot | Cranky.nu said,
March 22, 2008 @ 12:30 am
[…] Related Tutorials: Add a Favicon to Your Website How to Add a Favicon in Wordpress Blog How to Make and add a Favicon to your Blog How to add a favicon to your website (Dumbest video tutorial I’ve seen…. […]
bob said,
April 6, 2008 @ 12:46 am
Hey there,
Great tutorial! It worked (mostly) for me me. Just one question - the favicon only seems to appear on the homepage… if I click down into specific storied on my page, the favicon disappears… Also, it doesn’t seem to work in IE, just in firefox (believe me, I’m less concerned about IE. Once they get standards complaint, I’ll actually care…) Any workarounds for getting the icon to appear on all pages? I did do the hard refresh… Thanks again!
-Bob
Favicon? Neat! | The Weblog of David A Price said,
April 18, 2008 @ 1:50 am
[…] Thanks to this entry, and the steps outlined within, I’ve added a favicon to the site. Of course, I have to give a huge kiss to Braxton Harrison for sending me the caricature many moons ago. […]
The Simon Woodward Blog » Blog Archive » Adding a Favicon. said,
April 18, 2008 @ 5:41 pm
[…] Normally this code would live in the <head> section of a standard HTML file, but because WordPress is different, I wanted to double check where I needed to put the favicon. I did a quick Google search and found this website. It gave the instruction to add the code into the header.php file of your blog. I logged into my dashboard, navigated to Presentation and Theme Editor, and pasted the code into the <head> section of the header.php file. I then saved the file, and viewed my website in another window, and pressed Ctrl + F5 to get a forced refreshed to bring the latest data from the server. […]