Favicons are the little icons that appear to the left of the url in your browser address bar. They also appear next to the site name in your 'Favorites'. See below, i've subtly circled the favicons in red.
How to create a favicon
Your favicon needs to be 16 x 16 pixels so open up Photoshop (or a graphics programme, even 'Paint' will do) and make yourself a nice little icon that's 16 x 16 then save it as a gif or a bmp. Because this size is so tiny you may find that just reducing your logo to 16 x 16 will make it look a bit sh*t so have a play and keep it nice and simple.
How to get it into the right format
Favicons need to be .ico files. Now there is an open source plugin from telegraphics that you can get for Photoshop that will allow you to save the file as an .ico.
However i've just created a favicon using an online converter that's really easy to use:
- Upload your gif (or whatever) file (you can even enter your twitter username and just use your profile pic)
- Click 'Generate FavIcon.ico'
- Bob's your uncle, you're given a nice little zip file containing the precious .ico file.
How to add it onto your website
Upload the favicon.ico file to your website folders. It needs to be put into the same folder as your home page, make sure it's not in an images folder but just sitting there on its own.
Then add the following HTML tag to your web page after the <head> tag and before the </head> tag:
<link rel="Shortcut Icon" href="/favicon.ico">
You'll have to put this in the html for every page you want the favicon to appear on, or if you are using CSS (which you should!) then it just needs to be in there. [update: see the comments, you can't add a favicon to CSS]
If you still can't see it make sure you are using Firefox to browse the web as Internet Explorer creates problems just to entertain itself.
Collecting favicons
While surfing the web for the information in this post i also discovered a private society of individuals (well one guy) who collects favicons. An interesting hobby i'm sure you'll agree but i can't imagine that they have the resale value of stamps, china dolls or antique pepper pots.
4 comments:
I really appreciate you posting this information. It is really helpful. The only problem I am having is trying to figure out a way using CSS to add it to every page so I do not have to edit a large number of HTML files. You say you can do it, but do not explain a technique how. I have scrounged Google for a while now, and everyone seems to think it is not possible. Any suggestions?
Damn good question. That line about putting in the CSS came from my web technician so i took his word for it at the time (as i assumed that's what he'd done for me plus beyond what they do i don't understand the technical side of CSS particularly well). However my sincere apologies as all he did was put it in the root file, the dirty lying scoundrel.
If you put the favicon in your root file then Firefox is clever enough to apply it to every page of your site as you may well know.
But the other browsers (IE)? Well i've read conflicting accounts (limitations / using with css) and i don't think there is an easy way to add to every page.
The general opinion seems to be that IE and some other browsers are going to have trouble displaying favicons even if you do add the link to every page just because, well, they're a bit sh*t. So i'm just going to stick with the favicon in my root folder, linked on my home page, and possibly other important bookmarkable pages that i have the time to pay attention to.
To make up for my incorrect information let me now point you to a .
I believe that post ran out of characters, it should have finished:
"To make up for my incorrect information let me now point you to a page detailing how to make an animated favicon.
These steps were so easy to follow! I understood them completely. I really appreciate you making a post about how to make a favicon. I've always wanted to learn and couldn't have taught myself.
http://footandanklemedicalcenter.com
Post a Comment