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.
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 needs this code in header.php file
STEP 4
Refresh your blog and check the favicon shows as expected.
Hope you like it!
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.
Thans sir it worked
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
Cool, thank you!! It work well!
this was very helpful, thanks a lot. its working on my site now.
thanks for the instruction. Works great
Thanks so much I tried to do this several times and your code worked. Thanks again
I seem to have it set up right, but I’m not having any luck getting it to display.
Thanks for the article!
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??
Hi Whitney,
It seems to work at this end, so you have fixed it one way or another!
if i don’t have header.php file.
still, how can i do that?
thanks,
Guy
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.
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.
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.
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.
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.
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.
Hi, You have 2 shortcut icon code lines, and the second is malformed with incorrect quotes. Probably that is the problem.
This is very useful mate! thanks!:)
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
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” />
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?
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
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.
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.
Hi Todd, It looks good to me. Probably just a refreshing issue with your browser. Kevin
i’ve tried a few times, but still not appear icon?
anny suggestion?
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.
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
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.
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.
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”/>
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.
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”/>
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.
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
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
do i have to delete my website
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.
i don see editor i see themes,widgets,menus,extras,header,typekit fonts and edit CSS
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
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
Hi, You should find the link to the theme editor in the left sidebar when logged in as admin, at Appearance > Editor
HTH
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?
Great idea Barbara! For now, I am just happy to help others use wonderful WordPress.
All the best, Kevin
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
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
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
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
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.
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.
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.
i’ve tried a few times, but still not appear icon?
anny suggestion?
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.
I’ve followed your steps but it seems not working on my site.
How long should it take before I can see the icon?
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.
Thank you.Helpful content.Helped me setup icon on my wordpress.
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
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.
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.
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.
[...] 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 [...]
Thanks for the question.
I have added a screenshot above, showing me using the Theme Editor, on the code in file header.php.
i dont know where it is, the part 3 i cant find header.php do you need css? im using wordpress