What is a Favicon?
Favicon stands for "Favorites Icon". It's the little icon beside your site's name in the favorites list, before the URL in the address bar and bookmarks folder and as a bookmarked website on the desktop in some operating systems.
Why does Favicon.ico Show Up as a 404 in the log files?
I was confused when this first started showing up, if I'd never had a file called that... why were people looking for it? The answer is simple, all it means is that people with browsers that use favicon (Internet Explorer 5.0 +, Firefox, Opera and a most others) are visiting your site. While seeing a 404 in your log files usually means that a visitor got the dreaded "404 Page Not Found" error, in this case it doesn't. All it means is that the default icon was shown instead of a custom one, your visitors saw no errors :-)
Why should you use a favicon?
Most peoples bookmarks / favorites list is a very cluttered place. Having yours stand out with a nice graphical reminder of your site beside it is a good way to get their attention again.
How To Make a Favicon
There's quite a few good favicon creators for free, a few of my favorites are FavIcon from Pics creates a favicon within seconds from any image on your computer, even an animated if you'd like.
I'm not going to go into detail here about the actual creation of icons, there are tons of other sites to help you on that if you get stuck.
I will tell you the icon basics. Icons are image files that actually contain one or more images, so a good idea is to make the 16x16 size as well as a 48x48 for windows desktops and if you want you could go to the higher Mac sizes size (128x128). When you've done that, name your file favicon.ico. Please not, renaming a jpg, png etc. won't work, it has to be an ico file.
How To Get Your Favicon To ShowThere are 2 different ways to do this:
- Method 1
- This is the easiest to do and it will show your icon no matter what page your visitor adds to their favorites. Simply upload your new icon to the main directory of your site, ie. www.example.com/favicon.ico.
- Method 2
- If you don't have access to your root directory (if your on a free server for example) or it you want a different favicon for certain pages, add this to the <head> of your html. (You can name your favicon whatever you'd like with this method)
<link rel="shortcut icon" href="/folder-name/logo.ico">
- Or if you prefer to use the full URL:
<link rel="shortcut icon" href="http://example.com/favicon.ico">
The first time (OK.. I admit it, the second time to) that I tried to add a favicon I got rather confused when I decided to change it. If you upload a new one, be sure to clear your cache for the new icon to show up ;-)