A favicon is a small icon associated with a particular website. You’ll most often see them in the address window of your browser, or in your favorites / bookmarks list.
A favicon is always named favicon.ico.
For example, here’s the favicon associated with Empty Mirror Books, as shown in the address window of Internet Explorer:
How is a favicon created?
You’ll want to use a graphics application which can make an image in .ico format.
There are applications dedicated to creating favicons, such as IconForge. Photoshop will also do it. You can create the favicon from scratch, or import another image on which to base the favicon image.
Where does a favicon go?
You’ll want to upload your favicon.ico file to the root directory of your website. (That’s the same place your index.html file is located.) That’s all you need to do for the favicon to be accessible.
For some older browsers, you may want to include this code into your webpage’s <head>:
<link rel=”shortcut icon” href=”favicon.ico”>
But, for modern browsers, this isn’t necessary.
How do I view a favicon?
If you’re using Internet Explorer, bookmark the website. Then, look at your favorites list; you will see the favicon there, just to the left of the name of the website. And, the next time you open a new browser window and view the website in question, you’ll probably see it in the address bar, right next to the website’s address.
Firefox / Mozilla will usually show the favicon regardless of whether the site is bookmarked or not.
Trouble viewing your favicon?
The reason that I’ve used the words “usually,” and “probably” so much is the favicon’s behavior can be rather unpredictable. That’s because browser support for
them varies a lot (with regard to what is displayed & where), and different browsers may store the favicons in different places on your computer.
And, if you ever change your favicon, you may find that your computer is very stubborn when it comes to letting the old one go and displaying the new one.
If you’re having trouble seeing your favicon:
- Make sure it’s called favicon.ico – don’t use another name.
- Make sure it’s in the right place. It should not be in a folder (for instance, don’t put it in “images”) but in the root directory, which is the one where your homepage (usually called index.html) is stored.
If those things are OK, then delete your temporary internet files (your “cache”). That’s usually where favicons are stored though that may vary from computer to computer). Then open a new browser window & try again.
To clear your temporary interenet files in Internet Explorer, open a browser window. Then go to Tools –> Internet Options –> General. Click the “delete temporary internet files” button.
If you’re using Mozilla or Firefox, go to Tools –> Options –> Privacy –> Cache and
click the “clear” button.
If you’re still having trouble, follow these steps:
- Close all browser windows.
- Delete all bookmarks to your site.
- Clear your cache / temporary internet files.
- Clear your history folder.
- Empty your recycle bin.
- Restart computer.
- Bookmark your page in IE (if using IE) and then click a few times
on the bookmark. You should see your favicon in the address bar.
- Open Mozilla (if using it) and navigate to your site. You should
see your favicon in the address bar. If not, go to clear cache as
before, but click the “clear all” button instead of “clear.”
That will probably do the trick.