Continue..

This site uses cookies. By using this site without changing your browser cookie settings, you are accepting this. More information: privacy policy.

How To Add A Favicon (Favorite Icon) Image To A WordPress Blog

If you look at your browser address bar as you’re reading this blog, you’ll see my favicon image.

It’s the sweet-looking, small speech-bubble image, with the letter “K” inside. [now different]

And if you add this blog to your favorites or bookmarks (and I hope you will!), you’ll also see the image appear in your list of bookmarks,

This should help my blog to stand-out from the other sites.

If you would like to add a favicon image to your WordPress blog, here’s how to do it.

STEP 1

Make a 16×16 pixel image and save as an “ico” image. Call it favicon.ico

You can use the free graphics program GIMP to do this, if you don’t already have suitable graphics editing software.

If you don’t want to make your own image, you may download and use this favicon I’ve made.

download and use this favicon image

Just right-click and choose “save image as”, to save it to your desktop.

STEP 2

Upload the favicon using an FTP program to your server, at the top level of your blog.

Rename it to favicon.ico if necessary.

STEP 3

Login as admin for your blog. Ensure this line of code is in the header.php file, of the theme you are using.

Add this line of code line (below) using the theme editor, if it’s not there already.

<link rel=”shortcut icon” href=”<?php echo get_option(‘home’); ?>/favicon.ico” />

Here’s an image, showing the theme editor being used to edit the file header.php … (CLICK FOR LARGER IMAGE)

WordPress Favicon - Make sure this line of code is in your header.php file

WordPress Favicon needs this code in header.php file

STEP 4

Refresh your blog and check the favicon shows as expected.

Hope you like it!

New here? Don't miss the next. Get updates, how-to's and WordPress expertise by email (unsubscribe anytime)


We take your privacy very seriously (click for full policy)

64 responses to “How To Add A Favicon (Favorite Icon) Image To A WordPress Blog”

  1. JOgonan says:

    Thank you very much, this was the best, clearer and helping approach to the matter that I found on the web. Looking forward to other tips.

  2. Ajay Singh says:

    Thans sir it worked

  3. Mac says:

    You must know that your favicon.ico only appears on the tab in Chrome and Firefox and the WordPress favicon.ico appears on the address bar?

    Time for an update? IMHO

  4. meddle says:

    Cool, thank you!! It work well!

  5. this was very helpful, thanks a lot. its working on my site now.

  6. jocelyn says:

    thanks for the instruction. Works great :)

  7. tom says:

    Thanks so much I tried to do this several times and your code worked. Thanks again

  8. Jeremy says:

    I seem to have it set up right, but I’m not having any luck getting it to display.

    Thanks for the article!

  9. Hi Kevin…

    Like everyone else you wonderful directions seem to not be the magic ticket for me. I have put my favico in just about every directory I can think of I have tried your original line change and others suggested here. still no go:( your thoughts??

  10. Guy says:

    if i don’t have header.php file.
    still, how can i do that?

    thanks,
    Guy

    • Kevin says:

      Hello Guy,
      Whatever theme you are using, must have something to generate the page header section. True, it does not have to be a file called header.php but usually is.
      I will take a look, if you tell me where.

  11. Sydney says:

    Each time I try to show the three ways I tried it, only one shows up. So I can’t show you, but you can take a look at the site. Thanks.

  12. Sydney says:

    Sorry, only one of my lines of code that I tried showed up. I also tried: and the one that is there now: <link rel=”shortcut icon” href=”/favicon.ico” />

    Thanks in advance for your help.

  13. Sydney says:

    I created a 16 by 16 favicon and loaded it up to the root directory as well as a few others, just in case. I tried three different lines of code in the header:

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

    I still don’t see the favicon in the address bar. Can you help me? Thanks.

    • Kevin says:

      Hi Sydney,
      It’s actually working fine for me (with Chrome), but you do have some dodgy quote characters in that line of code – will probably cause a problem in less clever browsers. Fix them and all should be ok.

  14. Tyrone says:

    Hi There,

    I cannot seem to get the icon to appear, i have cleared the cache, uploaded the favicon, put the code in etc. i think i am uploading the favicon to the wrong place tho, i was uploading it to my images, but not sure if that was correct. Please assist. Thanks.

    • Kevin says:

      Hi, You have 2 shortcut icon code lines, and the second is malformed with incorrect quotes. Probably that is the problem.

  15. maui says:

    This is very useful mate! thanks!:)

  16. christine says:

    Hi Kevin,

    i’ve uploaded the favicon.ico image to everywhere I thought I possibly could: home directory, web root, public ftp root, and document root for wikimommy.net and have copied and pasted the html code into my header.php and still no favicon.

    Am I doing something wrong?

    Thanking you in advance,
    Christine

    • Kevin says:

      Christine, In your line of code, try adding a space between the last quote and the slash.

      You have this. <link rel=”shortcut icon” href=”/favicon.ico”/>

      You want this.. <link rel=”shortcut icon” href=”/favicon.ico” />

  17. Hello,

    Is 16 x 16 the only size the favicons come in or is it possible to make one that is 32 x 32 pixels?

    • Kevin says:

      Hi Erik, 16×16 is used by internet browsers, so you should make your main favicon in this size. Initially, make it to a larger size as this will be easier, say 64×64, then resize and check how it looks.
      In some circumstances (eg desktop icons), Windows will use a larger version. So if you are really keen, you might want to package several different sizes within your ico file. This is more complex (and I don’t bother), but please let me know if it works for you.
      Kevin

  18. Perfect! This is just what I was looking for. I did a little fumbling to get from png format to ico and the transparency doesn’t come off really well in the 16X16 size but it’s a start. Now I know what to do to improve the icon when I figure out how to make the colors richer.
    Thanks.

  19. I uploaded a favicon and used the code that was suggested and unluckily it did not work.

    icon is a 16×16 ico.
    Used the code example in the post and it did not work. I am wondering if there is something I am missing.

  20. asif ali says:

    i’ve tried a few times, but still not appear icon?
    anny suggestion?

    • Kevin says:

      Hi, You have uploaded your image to the top level of your blog, as suggested. However, you seem to have altered the line of code – it is looking for the image in the /images folder of your WordPress theme. That is the problem. Also, your image is 48x48px which is too big.

  21. Brendan says:

    Legend.! once again the dreaded formatting kills it, as i copied it directly from the page i didn’t think that the .CSS would fiddle with it in that way.!

    One other thing for those who are kind of green, you must have a program that actually saves as a .ico, i had a bit of frustration with this untill i found out and downloaded the PSCS5 file format plugin! Good luck and once again Thankyou Kevin

  22. Brendan says:

    Good afternoon,

    Well i have tried my hardest to get a icon to pop up and im not having any luck, i have placed the icon in the root and just about every folder i can find.

    I did find a favicon.ico in the Theams section but not even that was showing up :( help?

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

    is what i placed in my header.php under the same one in your image.

    • Kevin says:

      Hi Brendan, You have some weird quotes in your line of code. Replace them with normal quote symbols from your keyboard and it should find your urlicon.ico. Regards.

  23. Mike says:

    Thanks Admin! This helped me out. I just had to change the line of code to reflect my file path. When i used WordPress to upload my icon it saved it in a deep directory. So, my line of code that I added to the header.php file looked like this…

    <link rel="shortcut icon" href="/wp-content/uploads/2011/01/favicon.ico”/>

    • Kevin says:

      Well done Mike. Yes, I suggested the favicon image be put at the top level of the blog (using an ftp program), to avoid the issue of where in the tree, the WP uploader might put it. But yours works fine, for your specific instance. Thanks.

  24. Charlie says:

    Kevin,

    Great help however the line of code may have been more helpful than a screenie or perhaps in partnership, so for anyone else that just wants to copy and paste:

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

    • Kevin says:

      Thanks Charlie. It was there, before I recently shifted this blog to a new server.. fixed now! The line I have given, detects the top level of the blog in the directory tree and so corresponds with the instruction to put the image at the top level of the blog installation.

  25. Duncan says:

    I’m using the Free Blog at WordPress. Does this mean that I can’t add a Favicon (or get the calendar to highlight ‘today’) with the template I’m using?
    I don’t understand how to “Upload the favicon using an FTP program to your server” even if I can’t change things, could you explain this for us ‘silver surfers’ who get confused easily?
    Thanks – your help to the ‘community’ is meritous

    Duncan

    • admin says:

      Hi Duncan,

      Thank you for stopping by here.

      You are right, there is no “ftp” access to a free blog at wordpress.com (as far as I know). FTP is short for “file transfer protocol” and it’s simply a method for moving files (be they text, html, images, videos etc etc) from your computer to your web server on the internet (aka “uploading”). I think it’s the same for the ability to use your own favicons.

      My post here is about self-hosted WordPress sites, where you have full access to every aspect of you website.

      Hope that is useful,
      Kevin

  26. Paba says:

    do i have to delete my website

    • admin says:

      Of course not! If it suits your needs, stick with it.
      Alternatively, if you wanted to start again, you could export your existing posts to a self hosted wordpress blog.

  27. Paba says:

    i don see editor i see themes,widgets,menus,extras,header,typekit fonts and edit CSS

    • admin says:

      Ah, I get it now.. you are using a free blog at wordpress.com, rather than wordpress installed on your own domain. The latter gives you full control over your site.
      HTH

  28. Paba says:

    Hello admin
    Step 3
    Login as admin for your blog. Ensure this line of code is in the header.php file, of the theme you are using.

    Add the code line using the theme editor, if it’s not there already.

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

    Here’s an image, showing the theme editor being used to edit the file header.php … (CLICK FOR LARGER IMAGE)

    ummmmm i don have editor on my admin panel

  29. Barbara says:

    One more thing … I didn’t see a “donate” link on your site. Did I miss it? If you don’t have that, how else can we support you?

  30. Barbara says:

    Hi,Kevin …

    I didn’t expect you to answer so fast, so I was playing around with it. But I got it to work only by putting the icon in the /wordpress folder and pointing the code line to it:

    When I try to pull up the ico file that I place in the root directory where all the WP files are, it doesn’t show up. But when I put it in the empty WordPress folder, it does. Weird, huh? On my other blog, http://www.pound-a-week.com (using your same directions), it worked fine, but not on this one!).

    Oh well, all’s well that ends well, huh? The favicon still doesn’t show up on the dashboard page, but who cares since I’m the only one who sees that!

    I really did appreciate your post and instructions, and you incredibly fast response.

    Barbara

    • admin says:

      Thank you Barbara! Makes it all worthwhile.

      You’ve got some clever directory stuff going on there, but it works so all is good. And no, you’re not going to see it in the admin backend dashboard.

      All the best, Kevin

  31. Barbara says:

    Hello,

    Sorry to be a bother, but I can’t seem to get this to work. I renamed my little ico file (16×16) as favicon.ico, uploaded it to my top level, put the line of code in the header.php file … and nothing happens. I can’t figure out what I’m doing wrong. I use WP (lastest build) and Firefox (latest version). Can you help?

    Barbara

    • admin says:

      Hi Barbara

      It looks to me like you have done it properly! See screenshot image..

      You not seeing it, is probably just a refreshing issue with your browser.

      Kevin

  32. bernmarx says:

    It worked for me, but I initially had the same problem Ben did. When I C&Ped the code from this page, it copied the curly typeset quotes; I had to replace them with the flat quotes that (X)HTML expects.

    Also, on my WP build, the menu illustrated in the graphic in Step 3 doesn’t seem to appear anywhere. I found the relevant code snippet in Appearance>Editor on the left and then Header (header.php) on the right.

    • admin says:

      Thanks for the comments.

      I have altered the display of the line of code and have also updated the image, to show the latest version of the WordPress theme editor.

  33. Hi Kevin,
    As I was searching this because in free wordpress blog we can easily change this but I did not find it in my .net site so I googled it and found your post which is really very nice.
    Thanks again and keep it up.

    Regards.
    Shafaquat Ali.

  34. ben says:

    i’ve tried a few times, but still not appear icon?
    anny suggestion?

    • Kevin says:

      Hi ben
      I assume you are working with the site you have linked?

      There is a problem with the line of code. You have this in your source code for the page..

      You have some weird quote symbols there (they should be “). I looks like they are causing the line not to work.

  35. Mylene says:

    I’ve followed your steps but it seems not working on my site.

    How long should it take before I can see the icon?

    • admin says:

      Mylene, Well done! It’s there for me, when I look. Do a ctrl+f5 refresh, or open your site in another browser and you should see it.

  36. sambit says:

    Thank you.Helpful content.Helped me setup icon on my wordpress.

  37. Yash Aswani says:

    Liked the post very much, the tut given was really great. Thank you for the lovely contribution.

    I would add a favicon to my blog as soon as i make a logo for it 8-)

  38. rommel says:

    Thanks for your post. At first I thought it didn’t work until I closed all my browsers and tried again – this time it did. What I don’t understand is why my established bookmark in my FF browser has not changed icon.

  39. admin says:

    Hi Ali

    Thanks for the question. By “at the top level of your blog”, I mean don’t put it in a subfolder.

    So if your blog is installed at the root of the domain, put it there ie. yourdomain.com/favicon.ico

    Alternatively, is your blog is in a subfolder, for example at yourdomain.com/blog then put the icon there at.. yourdomain.com/blog/favicon.ico

    Hope that helps.

  40. Ali says:

    STEP 2

    Upload the favicon using an FTP program to your server, at the top level of your blog.

    What do you mean by “at the top level of you blog”
    can you elaborate? What is the top level? sorry I am new to all this. THanks.

  41. [...] public links >> ico How To Add A Favicon (Favorite Icon) Image To A WordPress Blog Saved by luvpink4ever22 on Wed 22-10-2008 ?Icon? PRYNDER & AQUINDER Finder icons Saved [...]

  42. admin says:

    Thanks for the question.

    I have added a screenshot above, showing me using the Theme Editor, on the code in file header.php.

  43. scooby mad says:

    i dont know where it is, the part 3 i cant find header.php do you need css? im using wordpress

Leave a reply