How hard can it be to add an favicon to your website? Pretty darn hard, actually! What I thought would be a simple hour or so project turned out to be a day into the night painfully long process. I discovered that every instructional article that I found through google searches either spoke in a geek speak terminology I didn’t understand or they left out a key component or two (kind of like grandma’s secret recipes!) that left me really frustrated!
Because I love to network , I’m breaking it down to simple stupid, so that if you want to add a favicon to your site, you will be spared the grief and frustration I experienced when attempting to learn how to do it.
In a nutshell, here is everything you need to know about favicons from a totally self taught female entrepreneur 🙂 You will need a little photoshop & microsoft publisher knowledge to create the actual image.
THE ANSWERS TO SOME BASIC QUESTIONS…
What is an Favicon? It’s that cute little picture that represents you or your company – for example, if you look at the address bar right now for wordpress you’ll see a black and white W inside of a circle. That’s the Avatar for WordPress. Mine looks like this…
you can see it at http://www.assistantproductgroup.com/ as well.
I can’t see a little picture – why not? Apparently, from what I’ve read, it’s because you might be using an older version of explorer. I have to say I initially fought the switch to explorer 7.0, but absolutely love the features now that I have it. Totally, recommend getting it.
Why do I need a favicon? Well, really you don’t, but everyone else has them, they’re cute, and “experts” say it makes your site look more professional. Consider it the little black dress for computers.
STEP by STEP Instructions for posting a Favicon to your Website
- Select an image that you want to use for your favicon. Make it 1-2 colors and simple. It also needs to be square. Because it is so small – simple with a punch works best.
Here is how I created my favicon:
- I inserted a text box into publisher, kept it square & made the back ground white.
- I inserted another text box, typed an “a” in bold, chose a clear background and made the font red. I then placed the “a” on top of the white text box and centered it.
- Grouping the two boxes, I right clicked and saved them to my pictures as a jpeg.
- I then opened photoshop, opened the jpeg and cropped the picture so that it was still square and had minimal white showing around the edges. I saved that to a jpeg.
- I opened that jpeg and in photoshop resized the jpeg to 16 pixels by 16 pixels and saved that.
Technology Newsflash: You now must convert the jpeg to an ICO. Truly, I didn’t know ICO’s existed until this point. An ICO is simply a file format. There are pictures in jpegs, gif, tiff, eps, and who knew…ICO. By the way ICO is short for Icon.
- Next you must convert your latest jpeg to an ICO. I used a program called Irfan View
- I downloaded a free Irfan View plug in for my photoshop to do this, but there is a free download for infran at http://www.download.com/IrfanView/3000-2192-10021962.html?part=dl-IrfanView&subj=dl&tag=button which is probably easiest.
- Once downloaded, convert your favicon to an ICO and name it favicon. When converted to an ICO file it will be called favicon.ico. It MUST be called exactly this to work.
- Save (import) this file into your image file on the root directory of your website.
- go to your home page in HTML (the view that shows all the text and codes for that page) and below <head> (towards the top of the page) cut and paste this text exactly:
<LINK REL=”SHORTCUT ICON” href=”images/favicon.ico” mce_href=”images/favicon.ico”>
Here is my HTML before I pasted in the link above:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html><head> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>Decorating Organizer for decorating, building or remodeling a home</title>
Here it is with the link pasted below <head>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html><head> <LINK REL=”SHORTCUT ICON” href=”images/favicon.ico” mce_href=”images/favicon.ico”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>Decorating Organizer for decorating, building or remodeling a home</title>
-
Make sure that it pastes exactly as you copy it – mine changed when I pasted it and I had to correct it.
-
Check your preview to make sure that it isn’t showing up anywhere on the website home page anywhere, which would mean that something is wrong. If it is showing up on the page, check to make sure placed it in under the first <head> and not elsewhere. Sometimes you have to experiment till it’s right. Always preview before you save!
- Save page and open up internet explorer (hopefully, you have 7.0) and go the website. It may take a minute or so to show on the front page and several or more minutes f(or even several hours) or it to spread to the other pages. It should show up on the tab that it was opened in and also on the address bar. If you don’t have explorer 7.0, it will only show when you save it as a favorite. Note: I didn’t think it worked on the other pages and was just done with the whole deal and went to bed in the wee hours of the next mornng. When I woke up – voila! It was magic and had spread to all my other pages. How cool is that? I guess it takes time for explorer to generate it to the other pages.
Good Luck! Let me know if it helps or if you have any tips to share!
Dish on Design Gal 
Hi,
I am having a terrible time trying to create a favicon. How would I insert the html into Microsoft Publisher, as that is the program I used for my website.
Perhaps someone needs to create a step-by-step (with illustrations) program called, “Favicons for Dummies.” hahaha
Thanks for any input.
Sincerely,
Dorene…
Hi Dorene,
I feel your pain! Favicons for Dummies with illustrations is a great idea. There are just so many things that change depending on what program you are using. I don’t know that have any answers for you regarding publisher, but a quick look turned us this tip from Publisher.
On the Insert menu, click HTML Code Fragment.
Note You must be in Web mode to view certain options specific to Web publications. You can determine whether you’re in Web mode by looking at the title bar (title bar: A horizontal bar at the top of a window, dialog box, or toolbar that shows the name of the document, program, or toolbar.) of your open publication, which will display Web Publication if you’re in Web mode.
In the HTML Code Fragment box, insert your HTML code fragment by typing or pasting from another source over the entire placeholder text.
Click OK.
Your HTML code fragment appears as code in a frame on your Web page, and the result of your HTML code fragment appears when you preview or publish your Web page.
Note If you want to view the HTML source code for a Web publication, click Web Page Preview on the File menu, and then click Source on the View menu.
Another link I found is to a forum for publisher users. I’ll bet you might find someone there who can help you!
Did you get your favicon made? Let me know if this helped!Remember, it took several hours for my favicon to show up on all of my other pages. Let me know if this helped! Amy
Here’s the link to the publisher forum. I hope it helps!http://www.microsoft.com/office/community/en-us/default.mspx?lang=en&cr=US&dg=microsoft.public.publisher
Here is a little program to make favicons:
http://icofx.ro/
Mine does not show in Firefox – still trying to work that out…
you should be given the nobel prize, do you want to know how many hours i have spent trying different things – searching through web pages…..
you get thumbs up from me.
i haven’t put it on my website yet (or tried it) but just reading it, it is so simple and easy to follow..
thanks
The address for my favicon is (start it with www – if your going to paste it into yours) it changed in the above message
.supernerd.com.au/~nazar1/zzz test page/favicon.ico
Hi, I want to say thanks! I was able to create the favicon using your instructions.
I used MS Publisher to create my site, but I did not have to add the HTML to the Publisher file. Instead I just uploaded the favicon file with the rest of the website files (I use Go Daddy as my host) and it worked!
THANKS!!
I am using Publisher for my site and i can’t manage to get favicon to show. How exactly did you upload the file, i have tried adding it to the index_files and just uploading it into the www on the ftp but it doesn’t work for me?
Pls help
I visit your site on occasion and I must mention that I like your template!
I truly have the same opinion with you regarding this topic. Nice post. Already bookmarked for future purposes.
I have needed this information for so long. Where have you been!!! Thanks
How do you access the Home Page in html to add the favicon html. I have the .ico file but cannot find where to insert it? pls help
Jason, it has been a long time since I did this and just noticed mine is gone…so I will do it sometime soon to refresh my memory, but…I believe I just downloaded the photo as I would a photo I was putting on my website. In front page, there are tabs…one if the one for doing edits, one is for the preview, and the other is to see HTML…do you see the HTML one? That is where you put in the code.
Hopefully that helps! I will look at mine soon and post anything thoughts after that…it’s a pain isn’t it?
The big thing is you can’t see if it worked or not…it takes a day or so to show up….crazy
This is amazing. Thank you SO much. To make it even easier (I guess this was posted a while back!) I found a website that generates favicons from jpgs or pngs: http://favicongenerator.us/index.php