Favicon Help, Fun and How-tos
Author: Mitch Keeler
Favicons are those little graphics you see by your URL in the address bar of many of the world’s most used browsers out there. They are not just there for decoration though, they serve a purpose by giving you a tiny reminder of the web site you are on. In Internet Explorer, Mozilla Firefox, Opera, and Konqueror, favicons are displayed in all available tabs, the bookmark toolbar/menu and the location bar.
So let’s get started creating a favicon.
Creating a Favicon by Hand
Favicon creation is not that hard, as long as you have a good graphic editing program. What you need to remember is keep it 16×16 pixels and name it favicon.ico. Also it will need to be in the root folder for the domain in question – so for example on our Basic or Business hosting plans for your primary domain name that would be your public_html folder. If it is located somewhere else you can specify a location with these strings in between your <head> and </head> code on your web page:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />Using Online Tools to Create Favicons
There are many Online resources that will help you in the creation of Favicons too. Here are a few of my personal favorites:
http://tools.dynamicdrive.com/favicon/
http://www.html-kit.com/favicon/
So there you have it – and arts and crafts project for the weekend. Create yourself a favicon, and please feel free to let us know where you posted it too.
May 30th, 2008 at 11:18 am
I think Google took your advice, they changed their favicon today. *gigggle*
May 30th, 2008 at 2:55 pm
OMG I’ve been looking for something this SIMPLE!! Thank you SO MUCH. Took me literally minutes.
May 30th, 2008 at 3:14 pm
Sheeeeeee
I just spent all morning figuring out how to add the tiny pen favicon for a client. It worked and I was thrilled. Now I’ve opened your newsletter and see all the learning curve distilled into a few paragraphs. Thanks.
http://www.terrihinte.com
Linda Kalin
May 31st, 2008 at 12:20 pm
I have some other websites that are set up as their own domain names, but built off a directory that’s contained within my main Lunarpages account. These other domains aren’t taking on the favicon of the main webpage, which makes sense. However, they’re also not taking on the favicon that I’ve put within their directories…
Does that make sense? Like I have http://www.main.com and http://www.example.com and example is stored as a directory in main. Like the directory tree of main.com has this in it: public_html/example
This was set up through Lunarpages (quite easy and painless to do, by the way, very cool).
How do I get the directories – which are accessible as their own domains – to read a favicon?
June 5th, 2008 at 10:24 pm
Place the favicon.ico in the alternate domain’s folder, and place this code in your head tags:
That will make it work on the domain. That’s how I did it on my account.
June 9th, 2008 at 1:17 am
Two more tips
1. As long as you put the favicon.ico file in the root of your site, it should be picked up by browsers even if you don’t add those link strings to your pages.
2. You can use animated gif files as the favicon! Just call them favicon.gif and make sure you replace “ico” with “gif” in the strings.
They will only animate in certain browsers, like Firefox, though. But you can overcome this issue with ease, by using something called conditional comments. Put the regular ico link string between conditional comments to be picked up by Internet Explorer, and the gif link string before it to be picked up by Firefox and other browsers.