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):

Amos Wong's Favicon

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:

Amos Wong's Sample Favorite

If you do not have a favicon currently and you are interested to, here’s how to can do it.

  1. 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).
  2. Go to Chami.com’s Favicon Tool page.
  3. Upload you image by clicking the “Browse” button and click “Generate Favicon”
  4. 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”
  5. Unzip the contents you have just downloaded and upload the favicon to your webhost (“public_html” folder, for most of you).
  6. 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:

    Link Code

  7. Save your header.php file
  8. 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. 🙂

If you like this:
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • email
  • Facebook
  • Google Bookmarks
  • Print
  • Reddit
  • Twitter

177 Comments »

  1. 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

  2. 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.

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

  4. 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.

  5. D.T. Kelly said,

    April 6, 2006 @ 12:55 am

    Thanks for the easy to follow instructions!

  6. 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?

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

  8. 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ı. […]

  9. 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?]

  10. 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 🙂

  11. Stephanie said,

    December 11, 2006 @ 7:29 pm

    Hey – thank you so much! I now have an icon!!! Really great – thanks for posting this!
    🙂

  12. 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.. 🙂

  13. Sergio Pinna said,

    February 6, 2007 @ 8:10 pm

    Thank you very much!
    😉
    Sergio.

  14. 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…

  15. 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. 🙂

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

  17. 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

  18. Mara Mei said,

    March 13, 2007 @ 5:18 pm

    nice tips. thx.

  19. 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. […]

  20. 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) […]

  21. Matt Vapor said,

    April 24, 2007 @ 10:54 am

    Thanks!

  22. Sandy said,

    May 5, 2007 @ 8:45 pm

    Where in the header.php file do you paste the link?

  23. amos said,

    May 6, 2007 @ 1:25 am

    Hi Sandy,
    You many place the code anywhere as long as it is between the and tags.

  24. 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 […]

  25. 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! […]

  26. 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!

  27. 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?

  28. 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.

  29. 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.

  30. 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.

  31. 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.

  32. sam said,

    June 17, 2007 @ 9:11 am

    Sweet. So simple. So perfect! Thanks for sharing!!

  33. 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.

  34. Script-Diver said,

    July 9, 2007 @ 1:11 am

    An excellent tutorial. Thank you very much.

  35. 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. […]

  36. 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:)

  37. 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.

  38. 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 […]

  39. 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 🙂

  40. 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 🙂

  41. 随便说说 - 范海鹏的博客 » Blog Archive » 如何向WordPress博客中加入Favicon(翻译) said,

    August 15, 2007 @ 7:06 pm

    […] 刚刚给自己的博客加上了最喜欢的汽车人Favicon,是按照在google上找到了一篇英文的HOWTO文章一步一步做的,在这里翻译出来共享给blogger们。 […]

  42. 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.”

  43. 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

  44. 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. 🙂

  45. 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.

  46. donjuan said,

    September 11, 2007 @ 6:11 am

    This was the most concise information I’ve found for creating a facivcon. Works perfectly. Thanks

  47. 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

  48. 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! 🙂

  49. Tom said,

    December 15, 2007 @ 4:08 am

    Thanks. It helped for me.

  50. 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

  51. 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.

  52. 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.

  53. 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. […]

  54. Patricia said,

    February 8, 2008 @ 10:21 pm

    thanks for the tutorial!!

  55. 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?

  56. 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

  57. 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

  58. 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.

  59. 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. 

  60. 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.

  61. 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 […]

  62. 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

  63. How to add a favicon to a Wordpress Blog said,

    March 18, 2008 @ 6:22 pm

    […] Source: Amos Wong […]

  64. 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…. […]

  65. 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

  66. 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. […]

  67. 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. […]

  68. Favicon | Thakoor’s blog said,

    May 12, 2008 @ 5:17 am

    […] http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html     […]

  69. Importance Of Weblog Design - Weblog That Stands Out From The Crowd | TheWeblogZone said,

    May 16, 2008 @ 6:20 pm

    […] Don’t you think sites with icons on the address bar before the website’s URL are cool- Many people do. These favicons add a professional look to the URL. These can easily be done with less efforts. Here’s a simple guidelines of adding a favicon to your blog. […]

  70. Jason said,

    May 22, 2008 @ 12:04 am

    Hi Amos,

    I tired this and it doesn’t work do u mind shedding some light on the situation?

  71. ElRaffa said,

    May 22, 2008 @ 4:20 am

    Hey, thanks to you I finally did it! Couldnt get to do it, found this site and finally added the blessed favicon to my blog! Thanx again.
    Fred

  72. Dan said,

    June 8, 2008 @ 8:17 am

    Just so everyone knows you have to post the favicon script in each of your php templates that includes your page header.

  73. KopiOnline said,

    June 8, 2008 @ 10:34 am

    Hi Amos,
    I’ve been googling to find the best way to put my favicon on my blog. I Found a plugin which help me to do, unfortunately it taken much step and even bigger file to upload. Then I came here and find yours as the simplest one. I’ve tried and It’s done. So thank you

  74. Cooked On Education » Blog Archive » links for 2008-07-01 said,

    July 1, 2008 @ 9:45 am

    […] How to Add a Favicon in WordPress Blog A quick tutorial for adding a favicon to a blog or website. (tags: webdesign tutorial tools howto design blog) […]

  75. Kenda said,

    July 20, 2008 @ 2:33 am

    Hi Amos ~

    I have a ProPhoto theme added to my WordPress blog and my header.php is rather complex. I uploaded the favicon to my public root on my blog and pasted the code just somewhere in all of the codes on my header.php yet it’s still not showing up. I am wondering if there is a specific place I should post the code in the header.php since ProPhoto has so many codes there?? Any help is appreciated.

    amos replied,
    Hi Kenda, nice blog you have there. I love your photos; you are very talented.
    As to your favicon problem, I’ve checked through your blog and noticed that your blog is in a subfolder called “/blog”.  As such, you will need to place your favicon2.ico file in the “/blog” directory. 😉

  76. weeknds » Blog Archive » favicon said,

    July 24, 2008 @ 5:29 am

    […] here is a link for how to do it, and here is another one for how to generate a favicon […]

  77. RobbieC said,

    July 25, 2008 @ 7:08 am

    Hi Amos,
    When you say put the code “between the and tags” what does that mean?
    Thanks,
    Robbie C

  78. suicidalsam said,

    August 13, 2008 @ 2:23 am

    wow, that was really easy to do. I am a relatively new wordpress user and only know how to place favicons in a blogger.com blog.

    I used to use a plugin to place favicon in my blog but your way is really easy. thanx for the info.

  79. Como colocar favicon em seus sites said,

    November 8, 2008 @ 8:06 am

    […] How to Add a Favicon in WordPress Blog […]

  80. Heather said,

    December 1, 2008 @ 10:03 am

    I am pulling my hair out trying to get this to work. I don’t have a “Public_HTML” folder, so I put in in my root directory “/sumnerrain.com” and I can see it (and it changes my favicon when I go to http://www.sumnerrain.com/favicon.ico, but not on my main page. To add the script I go to my blog’s admin page>design>theme editor>header.php and add “” or your code, or any of the other countless codes out there that are not working, between the head profile code and the /head. I feel like I am missing something here and am slowly going insane. Can you spare a moment to help?

  81. Heather said,

    December 1, 2008 @ 1:01 pm

    Never mind, apparently the solution is to beg to a stranger for help and it fixes itself. 🙂

  82. IP said,

    December 5, 2008 @ 8:13 am

    Thanks !!!!! i was wondering how to do that for ages !!

    Great

  83. Tyler said,

    December 20, 2008 @ 11:26 am

    I wrote a similar tutoral with specific screen shots for changing your Favicon icon in WordPress 2.5.1

    http://tystips.com/archives/30/how2-change-your-wordpress-251-favicon-icon/

    For those of you who like pictures, I tried to make it easy to follow.

    Also, if you’re wondering how to create your own custom icon, I wrote a post on that too (with more juicy pictures!).

    http://tystips.com/archives/32/how2-create-a-favicon-icon-for-your-web-site-or-blog/

    Thanks for letting me share!

  84. flick harrison said,

    December 23, 2008 @ 1:57 am

    Alright = thanks for this. I knew how to do a favicon but it didn’t work, followed your instructions to confirm absolutely I was doing it right.

    The trick for me was to quit firefox and restart – apparently it wasn’t re-checking the favicon even if I refreshed the page.

    Thanks!

  85. Sakura Martinez said,

    January 8, 2009 @ 1:24 pm

    Hey, Amos! Thanks for the easy to follow tutorial on how to change our favicon in wordpress. It really helped me make my blogsite feel a little more different, lol. I was troubled when the icon of my site didn’t change even after pressing CTRL+F5. But I did what flick harrison did and restarted the whole browser and it works now. Thanks!

    I’m using Mozilla Firefox.

  86. My Spatial Journal » Creating a Favicon in Wordpress said,

    January 22, 2009 @ 12:47 am

    […] I am deeply in debt to these awesome sources http://codex.wordpress.org/favicon.ico http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  87. Victor said,

    January 29, 2009 @ 12:41 am

    Thanks for all the advice here. I was struggling for days to get my favicon to work in IE7 (Firefox and Chrome were ok). In the end it turned out to be a problem with the ico file itself. Once I had resaved it using IrfanView (I had originally created it using another programme) and uploaded it, all was well.

    Thought this might be worth mentioning in case it helps someone else.

    V

  88. Peter said,

    February 4, 2009 @ 7:40 am

    Same problem for me as for someone previously. I have my favicon showing fine on my index page but can’t get it to show in any other pages. But if I look at my source I can see the code right there in the header for every page.

    Any ideas?

  89. Alykhan Virani said,

    February 9, 2009 @ 2:30 pm

    Just used it on my site worked like a charm. Thanks for the simple instructions.

  90. Chris Reid said,

    February 26, 2009 @ 11:25 pm

    I’m having the same trouble that Alykhan has, namely I cannot get my favicon to display on any page except for the main page. Permalinks to posts as well as any extra pages added to my nav bar do not display the favicon. I’m sure there is some special way to structure the PHP so that all pages look for the icon in the same place, I just have no idea what that might be. Any thoughts? Much obliged for the help.

  91. Michael Chin said,

    March 23, 2009 @ 8:55 am

    Thanks! This is awesome and helped me tremendously.

  92. Albert said,

    March 29, 2009 @ 3:47 am

    Hello Chris Reid, if you have WordPress, I think I have found the solution, add /favicon.ico” /> in between your header and after you have uploaded a favicon.ico in your blog/theme file.

    If you are grateful for this, take a second to visit our blog at Mooladays.com 🙂

  93. Albert said,

    March 29, 2009 @ 3:48 am

    Something went wrong with the code, you can look for it here. http://codex.wordpress.org/FAQ_Layout_and_Design#How_to_add_a_favicon_to_your_site

  94. YouonPictures said,

    April 1, 2009 @ 8:38 am

    Thank you. It work perfectly. I knew how to do this on HTML in Dreamweaver, but not with php on my word press! thanks!!! =D

  95. robert said,

    April 13, 2009 @ 6:46 am

    Thank you very much for this tip. It worked like a charm.

  96. Add a FavIcon to Your WordPress Blog | Unwise1 said,

    May 6, 2009 @ 3:53 pm

    […] Author: Unwise1 Categories: Web Design, WordPress Tags: favicon, WordPress Comments (0) Trackbacks (0) Leave a commentTrackback […]

  97. Knox Bronson said,

    June 1, 2009 @ 3:24 am

    Why did you make the favicon tag a graphic? Don’t you think it would make it easier for people to copy-and-paste? Thanks for the tutorial, but I just don’t get that.

  98. AnnaNoble said,

    June 5, 2009 @ 4:43 pm

    I found the best thing to my sister’s birthday… It’s really hard to find cool and still unique.
    So today I saw this thing from ZTARLET on facebook where you can name a real star in the sky and have the certificate and a teddy bear sent to you and pay it by a single SMS. So awesome 🙂

  99. Customize your Blogger, WordPress or Tumblr blog — remarkably clever said,

    June 11, 2009 @ 12:01 am

    […] Custom favicon on WordPress […]

  100. Vactaleclox said,

    June 11, 2009 @ 10:28 pm

    Hi,

    What is the best web hosting company?

    I’m trying to set up a web site for my new business.

    thank you in advance,

    -Wendy

  101. mixx said,

    June 28, 2009 @ 10:25 pm

    but where’s the theme folder?? u mean we have to edit CSS? so its impossible on WP hosted blogs?

  102. mscris said,

    July 2, 2009 @ 12:26 pm

    This was awesome!! Thanks so much ~*^_^*~

  103. Neivin said,

    July 11, 2009 @ 5:34 am

    Can you tell me how do I get to this public.html folder ….Please I am a complete novice and need step by step instructions….Can you please help 🙂

  104. Blev lige inspireret « Lille mig i den store verden said,

    July 22, 2009 @ 11:29 pm

    […] Og her har du en rigtig god vejledning til hvordan man gør – trin for trin. […]

  105. Rick said,

    July 24, 2009 @ 11:46 pm

    Thanks for the advice

    BTW the only part that would have been useful to select-copy was the only part that could not be copied (line of code is an image?)

  106. Agregar Favicon a Blog de Wordpress | Bloguibel said,

    July 26, 2009 @ 2:10 am

    […] Fuente: How to Add a Favicon in WordPress Blog […]

  107. Como criar um favicon facilmente | 4server said,

    July 27, 2009 @ 11:50 pm

    […] Este guia dá uma ajuda: http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  108. How to create a Favicon to increase your website visability. | Personal Computer Tutorials said,

    August 5, 2009 @ 8:10 am

    […] http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  109. Dudy Adityawan said,

    August 7, 2009 @ 10:28 pm

    Thanks For You Sharing… Now my blog can use favicon and i like this …!!!

  110. adambacon said,

    August 12, 2009 @ 10:18 pm

    Hey there. Thanks for the awesome advice, it adds some classiness to my site now! Hahaha!

    Adam

  111. How to Add A Favicon said,

    August 14, 2009 @ 8:46 pm

    […] Source Posted in Technology […]

  112. mimzyx said,

    August 15, 2009 @ 8:47 pm

    Thank you amos,my fist name is guo,so i use g for my blog’ favicon.

  113. Jason Saggers said,

    September 7, 2009 @ 12:14 pm

    Thanks for the tip. Works great on my site.
    IE8 doesn’t seem to display it but other browsers do.

  114. Chris said,

    September 9, 2009 @ 4:46 am

    I thank you for a wonderfully simple tutorial on how to add a favicon to my blog, I’ve had one on my main site for a while but nothing on the blog, a subdirectory to the Drupal installation.

  115. Ashley said,

    September 28, 2009 @ 8:24 pm

    Hi!
    Thanks for the tutorial – nice little finishing touch to our site.
    Only thing is is for some reason our web designer made a new head for each page, therefore a tedious copy and pasting exercise later, we have favicons on each page.

    Thanks again

    Ashley

  116. Ophélie said,

    October 2, 2009 @ 10:11 am

    Very cool! I tried this out with a picture, and now that I know how to do this, I can play around and make another one. I wouldn’t have known it was this simple if I hadn’t stumbled upon this tutorial. Thank you!

  117. Chole Ray said,

    October 23, 2009 @ 1:36 am

    Thanks. It had been a while since I added favicons to my sites so I forgot how.

  118. Ali said,

    October 27, 2009 @ 9:33 am

    Thanks Alot !!

    Just Added Favicon to My Site After Reading your Tutorial.

    Ali

  119. Neo’s Lab » Blog Archive » Favicon 설치 said,

    November 26, 2009 @ 1:33 pm

    […] Favicon 설치에 대해서 잘 설명해준 블로그가 있어서 도움을 받았다. Category: Blog  |  Comment (RSS)  |  Trackback […]

  120. Duane Careb said,

    December 2, 2009 @ 7:06 am

    Thanks, too, for the great topic!

    I have the following line – among others relating to favicon – in the header.php of my golden Essence theme for WP:

    echo “\n”;

    Should I delete it and replace it by the line you recommended?

    I placed the favicon (.ico) in the public_htm directory but I notice that there is also a .ico in the theme’s folder as well.

    I’m confused. Please help.

    Blessings

  121. dae said,

    December 4, 2009 @ 3:21 am

    it’s still not working out for me. i went to the header php in my wp blog. and what do i do now, just drop the code in there? i saved it and refreshed it, but it’s not showing up.

    i did add the favicon to my php_html folder. my question is, do i upload to ico file to the themes sub folder in that phh_html folder?

  122. Constance said,

    December 24, 2009 @ 3:53 pm

    Thanks for this, it works greatly! 🙂

  123. yiannis said,

    December 27, 2009 @ 9:38 pm

    worked only when favicon.ico was put on theme’s directory ( ……..\wp-content\themes\THEMENAME\ )

    nice tip!

  124. Hillary Wright said,

    January 17, 2010 @ 2:21 pm

    Thanks for this info! It worked.

  125. Maos Pad said,

    January 20, 2010 @ 2:09 am

    thanks now I can customize my site’s favicon. been using the my default theme favicon for 5 months! tnx again..

  126. Afnan said,

    February 10, 2010 @ 12:04 am

    Yeayy thanks a lots 😀 need to restart my Firefox before it works 🙂

  127. Tutorial - Buat Icon Sendiri di Blog | fiezaradzi.com said,

    February 11, 2010 @ 12:17 pm

    […] Kredit to: amoswong […]

  128. Tony said,

    February 14, 2010 @ 5:00 am

    Very easy to follow, thanks.

  129. stefan said,

    February 16, 2010 @ 7:22 am

    Thanks a lot for an easy tut! thanks!

  130. alstonian said,

    February 17, 2010 @ 12:08 pm

    Hi, there

    Followed your direction all the way and still don’t see the favicon, what did I do wrong? I uploaded the file to /public_html/mysite.com/wp-content/themes/straightforward

    straightforward is the theme

  131. alstonian said,

    February 17, 2010 @ 12:13 pm

    Okay, i was looking at the other tutorial and find out this is the code they suggested, it worked out for me though.

    Thanks Amos for the tutorial!

    /favicon.ico” />

  132. dangson said,

    March 14, 2010 @ 11:44 am

    Very helpful! Thanks so much!

  133. DeDu said,

    March 15, 2010 @ 6:54 pm

    Thanks for this easy Tutorial!

    DeDu

  134. Greg Daniels said,

    March 18, 2010 @ 4:29 am

    Great post,

    The hard reset made all the difference!

    Greg

  135. N98 said,

    March 18, 2010 @ 4:44 am

    Thanks mate. Worked fine.
    Used chami.com animated favicon.

  136. Suresh Khanal said,

    March 23, 2010 @ 10:00 pm

    To apply favicons and even to generate or apply our gravatar as favicon, there are plugins available, its just a matter of few searches.

    I was wondering and I don’t know it yet what it is called for that rectangular part at the beginning of address bar itself. It is much larger than favicon and rectangular in shape like that of paypal site. Do you know what it is called and how to do that?

  137. Master Ange said,

    April 5, 2010 @ 5:30 pm

    For some reason I cannot get the favicon to display on my site. I can get one to display on the admin page but not the site itself. Can I get help with this?

  138. Kamal Hasa said,

    May 6, 2010 @ 10:58 pm

    I just use Shockingly simple favicon for all of my WordPress blog for all my favicon needs.

  139. mehdi said,

    May 8, 2010 @ 9:54 am

    Greate post! my favicon run now. But i have second problem that i cannot see my favicon at admin panel. Favicon of my site’s hosting company is seen on the admin panel of wordpress. i think must paste not only header.php but also some other php files of wordpress.

  140. zubair said,

    May 22, 2010 @ 6:39 pm

    Thank you so much for your article. It has helped me get my favicon done and posted very quickly.

  141. steve said,

    May 31, 2010 @ 11:17 am

    thanks!
    my own favicon made in gimp, but the one from chami.com did work.
    i have two wordpress blogs on my site. i edited both header.php files as above with different names for the two icons. both icons are present in the root of my site. BUT…both blogs appear with the same icon…the second one does not show. any ideas?

  142. sandeep said,

    June 19, 2010 @ 12:10 am

    Hi, I am a student and making blog in wordpress. I dont have knowledge of CSS & HTML so how can I add my favicon to my blog without using CSS & HTML, is there any option in wordpress to do so????????

    Please tell me.

  143. mazdak said,

    June 19, 2010 @ 2:41 am

    hi, i have tried everything but my website doesnt show teh favicon !!!
    in ctrl+u it shows favicon code but no picture beside address bar !!!
    plz tell me what to do ????

  144. victoria said,

    June 29, 2010 @ 12:48 am

    Hi. Thanks for the helpful tutorial. I added the code to my theme header in wordpress and have the favicon showing on my main page, but HELP it does not appear on any sub pages or archive files. How do I sort this out? I’ve tried closing the browser and reloading. Can you advise?

  145. Fedoran said,

    June 29, 2010 @ 9:32 am

    Hi Amos,

    I followed your steps but my favicon is not showing up, I added it on my /public_html/wp-content/themes/mytheme and placed the code your provided on my header.php, did the crtl f5 several times but it’s not working, im using WP 3.0 and Chrome. I tried it on IE but it’s not showing my favicon either. Help please.

    Fedoran

  146. Tracy said,

    July 2, 2010 @ 6:12 am

    Thanks for the step by step instructions. Very Nice! However I can’t seem to see my icon in the explorer, the browser I use most. I can see it in firefox????? Is there a way to fix this?

  147. Common Blogger Pitfalls: Lesson One | Zoe Corkhill said,

    July 20, 2010 @ 9:11 pm

    […] How to add a favicon to your wordpress blog (self hosted) […]

  148. Parag Khare said,

    September 2, 2010 @ 3:29 am

    Thank you, it works !!!!

  149. tony said,

    September 16, 2010 @ 7:15 am

    thanks, this was driving me nuts but you helped 🙂

  150. Brent said,

    September 23, 2010 @ 9:18 am

    Hey, Amos. I am pretty new to html, hence my use of wordpress to take care of most of the gruntwork. I would like to add a favicon to my site at http://www.classicccitycrossfit.com (classiccitycrossfit.wordpress.com), but when I followed the instructions, trouble ensued. First it would not let me to upload the favicon.ico file. When I tried to, an error message popped up:

    “ favicon.ico” has failed to upload due to an error
    This file type is not allowed. Please try another.

    It would, however, let me upload my animated favicon (.gif) file. I tried to proceed and change the header, per step 6, but could not find access to the header in my theme (greyzed). I’m hoping that my choice of theme does not preclude my use of a favicon.
    Any help would be greatly appreciated! Thanks in advance
    Brent

  151. Trinn Locks said,

    September 23, 2010 @ 7:45 pm

    Wonderful article, I’ve been looking for help on this. I have a website with a favicon which I’ve been looking at using on my WordPress blog too and now I can thanks!

  152. Sue said,

    September 29, 2010 @ 12:32 pm

    Hi Amos,

    Just wondering, does this work in WordPress.com blogs (free blogs hosted by wp)? You can’t edit much in there, right?

    Thanks!

    Rgds,
    Sue

  153. Sanjaya said,

    October 6, 2010 @ 9:11 am

    hello,
    Thanks for the blog. After adding favicon to blogger I moved onto adding one to wordpress; however, I could not find the edit html area- where i can add the url of my favicon…………It must be quite simple thing that I am missing, but still would appreciate your help.
    Thanks

    Sanjaya

  154. How to Add a FavIcon to your Wordpress Site Easily said,

    October 7, 2010 @ 4:35 pm

    […] For the technical way, that is coding in PHP in the WP header file. Here’s a great HOW TO here. […]

  155. favicon and how to generate them | Bugdrome said,

    October 8, 2010 @ 6:28 am

    […] http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  156. My New WordPress Theme - Jared Ruppert said,

    October 12, 2010 @ 1:46 pm

    […] After reviewing the tutorial and Googling solutions, I found an html code that would allow customizable Favicons from my Media files.  I quickly stumbled upon my answer through Google to Amoswong.com.  I personalized the code: “<link rel=”shortcut icon”  href=”favicon.ico>” to fit my selected Media and pasted the  into the General Header section of WordPress. The result was successful and I’m satisfied with my new theme. […]

  157. SIMPLISM.KR » Blog Archive » [WordPress] 워드프레스 파비콘 설정 - Simple is the Best! said,

    October 29, 2010 @ 10:38 pm

    […] http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  158. Rachel said,

    November 10, 2010 @ 1:03 am

    I am just not able to figure this out, though I thought it would be so easy. I’ve uploaded the new favicon.ico to every folder imaginable, but can’t seem to update the header.php correctly in order to have the favicon actually appear. Any advice for a coding newbie on where to paste in the ?? Do I just skip a line at the end of the code and add there? Any help is appreciated! Thanks!

  159. Joy said,

    December 2, 2010 @ 3:15 pm

    Thanks so much for this! I was pulling my hair out trying to figure out the trick to adding that favicon. You’re a lifesaver. 🙂

  160. Blog Improvement Project: blog basics (update) | She Is Too Fond Of Books ... said,

    December 5, 2010 @ 12:19 pm

    […] I must figure out how to get my pic (for lack of a better symbol) on the URL bar – yay!  Success!  My favicon should be looking at you right now   I found the step-by-step at amoswong.com. […]

  161. Faviconi lisamine | SetUp Wiki said,

    December 28, 2010 @ 3:37 pm

    […] Alternatiivne õpetus: http://www.amoswong.com/how-to-add-a-favicon-in-wordpress-blog.html […]

  162. Justin H said,

    February 5, 2011 @ 4:51 am

    Hi there, I have followed all the steps to change the favicon but I am unable to change any detail in the header php section…I have read that you have to change the codex but i really dont know how to change premissions….

    Any ideas please would be most grateful
    Best regards and thanks

    Justn

  163. Syao C said,

    February 10, 2011 @ 4:55 pm

    Hi Amos,

    Thank you so much for this easy-to-understand tutorial! And it’s really nice of you to post individual replies to everyone who’s having trouble with the tutorial. 🙂

    @Everyone
    Sharing my experience here, it might help some folks. 🙂

    …. SPECS ….
    Google Chrome 9.0
    Hosted WordPress 3.0.5
    Blog’s directory: http://www.syaochan.com/wp

    Attempt 1
    1. Added line code to header.php (under Apperance > Editor), right above the tag.
    2. Uploaded *.ico file to public_html
    3. Press CTRL+F5 several times.

    Result: Ico does not show up on website, ico only shows on WordPress Admin

    Attempt 2
    1. Uploaded *.ico file to blog directory (so that’s in my wp folder)
    2. Pressed CTRL + F5 several times

    Result: Success!

  164. Spicytee said,

    February 11, 2011 @ 11:06 pm

    Wow..It really work fine with me.
    I’ve used the code on my wordpress blog and my bluehost website..
    They are showing on my IE but nothing yet on Firefox

    Thanks Amos…
    Keep ’em coming.

  165. Daniel said,

    February 13, 2011 @ 2:26 pm

    Hi followed your steps and added the code into the head tags of my header.php.
    The problem I have is is only aded the favicon to my root page and not any subpages, even main navigation pages.

    Do I have to keep coping the code for every page or is this a side effect of using a different theme.

  166. Toby Barnett said,

    February 16, 2011 @ 6:00 am

    The favicon tool works slick and thank you for having it available. In conjuction with the favicon tool I used the Shockingly Simple Favicon WordPress plugin http://wordpress.org/extend/plugins/shockingly-simple-favicon/ instead of editing the html in the theme.

  167. Muneer said,

    March 7, 2011 @ 2:11 pm

    Amazing
    Thanks alot

  168. Way to change Wordpress favicon | Linux tutorials said,

    July 1, 2011 @ 12:02 pm

    […] You can read a different explanation of adding a Favicon to your WordPress blog here […]

  169. Willem said,

    July 19, 2011 @ 3:31 pm

    My one only works in Firefox.
    Any suggestions?

    Thanks 🙂

  170. Rhea Buenavista said,

    September 9, 2011 @ 4:30 pm

    Hi Amos,

    This post helped me a lot. Thank you!

    Hugs,
    Rhea

  171. Naiwen said,

    September 14, 2011 @ 11:21 am

    OMG, I’ve been wanting to add that like forever! So glad I found this. How did you design your blog, btw?

  172. Michael Nunn said,

    December 31, 2011 @ 4:01 am

    Hi, this was pretty useful, cheers. However, I couldn’t get my favicon to show up until I edited the code a lil bit. I had to make it:

    link rel=”shortcut icon” href=”http://mydomainname/favicon.ico”

    for it to work. But now is all good. Thanks for the post.

  173. ela said,

    January 8, 2012 @ 10:37 pm

    Hi! I work on getting favicon already second day.
    I can’t uload the icon in the directory. It shows “Starting upload” and never ends.
    Any ideas what’s wrong?

  174. How to Add a Favicon in Wordpress Blog - Asian Tiger said,

    January 31, 2012 @ 11:13 am

    How to Add a Favicon in WordPress Blog – Asian Tiger…

    […]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.[…]…

  175. How can I change Favicon for my wordpress site | Neotutorials.com said,

    March 11, 2012 @ 10:40 pm

    […] You can read a different explanation of adding a Favicon to your WordPress blog here […]

  176. Syakila said,

    June 2, 2012 @ 2:30 am

    thanks for the helpful tutorial..

  177. How to Change your WordPress Favicon | Internet Design Solutions said,

    September 10, 2012 @ 2:21 pm

    […] You can read a different explanation of adding a Favicon to your WordPress blog here […]

RSS feed for comments on this post · TrackBack URI

Leave a Comment

 Subscribe to AmosWong.com

Buy Amos A Cup of Coffee

 
Locations of visitors to this page