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!