Easy Favicon Creation.
Emma | Aug 06, 2007 | Comments 15
I don’t know if you’ve noticed. But It’s Write Now, has recently gotten a new favicon. It’s the little symbol in the title bar and in the shortcut.
I guess anything is easy once you do it. Here is a quick explanation of how I created a favicon for my site.
First find a picture you like. Re-size it to a small square. Then use a favicon creator. I used this from Dynamic Drive.
The Favicon has to have the .ico extension. Next upload it into your wordpress root folder.
If you have a hosted domain use FTP and put it in your first folder. The path would be your domain name/favicon.ico.
Next edit your header file. In wordpress it would be the header.php file. Found in the theme editor, under the presentation tab.
You want to add the code below between these two tags <head> and </head>.
<link rel=”shortcut icon” href=”the path to your favicon goes here” type=”image/x-icon” />
When cutting and pasting this code, don’t forget to change yourdomain.com, to your actual domain, or the path of the favicon.
This is actually easier than it sounds, and there are different ways to do this. I saw my new favicon right away in FireFox.
Internet Explorer caches icons. So you may need to clear your cache under internet options in IE. I had a previous icon cached so in order for me to clear it and have it show up in IE I had to rename my favicon.ico file to something new.
In order for me to do this I checked out the sites below. And I got some help from Sara over at the Blog Experiment Forum. Good Luck Everyone 
Popularity: 15% [?]
Related posts:
Filed Under: Technical Skills
Thanks for the comment.
It took me hours to find how to do a favicon correctly a few months ago, thanks for the easy breakdown!
Your Welcome.
i’ve been wondering about this for what, 4 years now…thx.
Paul Hughes
Anytime, hope it works.
Emma, I think your favicon is really cool. It’s simple, yet totally eye-catching. Nice job on it.
And if you’re really lazy, WordPress even has a favicon plugin. That way you don’t have to mess with the header, it does it for you.
Another good favicon creator is the one I use, since it’ll even take a photo and make a favicon out of it. It’s
http://www.chami.com/html-kit/services/favicon/
run by the people that created html kit (the best web editor I’ve found)
Thanks Sue, I am learning so much. Actually I will be updating my favicon in the future. But I just wanted to document, how to get one up and running, if someone like me, needed to. Thanks for the resources, and the comment. Emma
Hi there Emma!
I hope your holidays are going well! I have a question for you, though – I’m having a heck of a time trying to install my favicon. I used the link from your site, and it has been made, I just can’t seem to get it to show up in my address bar. Could it be because I’m using Opera? I tried following your instructions, as well as the instructions on the Favicon Creation site – and no luck.
I’m SOOOOO not computer savvy.. lol.. Any help is appreaciated! Thank you!!
Hi Daria, sometimes it takes awhile for the favicon to show up. Because browsers cache the info you use often. Meaning it’s not always the freshest version. Try it in firefox or IE and see if it shows up. If so then you just need to wait for your cache to refresh or try F5, although I’ve never used Opera, so I’m not sure. Also double check and make sure the code is correct. Check out the tutorial on snook.ca that I listed just to make sure it’s correct. When I post the code in wordpress sometimes it gets changed a little. A technical difficulty I still havn’t figured out how to master. I’m glad your still blogging. Emma
One other thing, before you dropped the code in your header you have to put your favicon.ico file in your root folder. This is the first folder when you go into your site on your hosted domain. Yes I’m talking ftp. Favicon.ico needs to be in the first folder after you click on your domain name. You can check to see if it’s in the correct folder by typing. http://www.wickedlycoolbean.com/favicon.ico in your browser. I hope that helps.
It’s possible it’s not in the right folder, or else you named the favicon something other than favicon.ico both of these things would cause errors. Once you get the favicon.ico file in the correct spot then double check the code, and make sure it is correct. You have to substitute your domain and favicon.ico name in the correct spots. Then put the code in your header and refresh the browser. That should do the trick.
Unfortunately, when I put that site into my browser, the ‘page cannot be found.’ I didn’t change the name. I have tried putting it into a few different folders and checking the browser to see if it shows up – nothing. Do you know of a step-by-step (and I mean LITERALLY step by step, with some explanations and descriptions of what I may need to look for) site that may have this in an easy to follow format?
Yours seems easy enough, but I’m obviously not doing something right. =/
You’re the best!! Thank you, Emma for addressing this more in depth on your site! =)
Hey Daria, I sent you an email to your gmail account that I hope explains it better. The first step is creating the .ico file. Then after that we have to upload it here: http://www.wickedlycoolbean.com/favicon.ico after that, we can take it from there.
What FTP program are you using? If your Using XP, it’s even easier. You can just create a network place that opens the folders. It has to be in the first folder. Or the root folder. I may be able to help you with the ftp. You can email me, if you like.
You’re the best, Emma! I haven’t gotten to my google mail yet, but I’ll do that now. I’m using Filezilla as my FTP program, if that helps.
I’ll keep working on it and get back with you when I have made some sort of progress. =)
THANK YOU!!!! I really appreciate all your help!
[...] I first began blogging I did a post on Easy Favicon Creation. Most agree that a favicon will add a professional touch and a little flair to your [...]