How to Create and Update a Sitewide Logo (Favicon)

Xah Lee, 2010-08-04

This page tells you how to create a favicon for your site, and how to make your readers see a new logo if you updated it.

Favicon is a tiny icon associated with a website. The icon will show up in the browser's tab, or URL field, or in bookmark.

Creating a Favicon

To create it, just create a 16×16 or 32×32 image file. The file can be png, jpg, gif, or Microsoft's “.ico” format.

Then, in your HTML pages, add one of the following line to the header:

<link rel="icon" type="image/png" href="xahlee_logo.png">
<link rel="icon" type="image/gif" href="xahlee_logo.gif">
<link rel="icon" type="image/vnd.microsoft.icon" href="xahlee_logo.ico">

Each of your HTML page can have a different favicon. So, you could use a icon for each page, or each project, or each server. However, favicon is usually used for branding purposes across your whole domain name.

Domain-wide Favicon Without “Link” Tag

You can also create a favicon without having a “link” tag on each of your HTML page. Here's how:

• Create your icon file in Microsoft's icon file format the ICO file format. The image file must have this exact name: “favicon.ico”.
• Place the “favicon.ico” in the web server document root dir.

When modern browsers visit your site for the first time, it'll automatically try to fetch the “favicon.ico” file at root dir. If found, it'll then use this file as your site's icon file.

How to Create “ICO” Format File?

You can create the ico file by first creating a png or gif version using your favorite image editor. Then, when saving, save it to the ico file.

You can also use ImageMagick to convert it. 〔☛ ImageMagick Tutorial〕

Problems with Updating Icon File

Note that this method is widely supported by all modern browsers, but exact behavior is difficult to predict. For example, it is not clear when a browser will try to fetch the file. This creates a problem when you update your icon file, because there's no way to know when your new logo will be seen by your readers.

How to Update Your Favicon

If you have updated your favicon, the best way to make sure that your readers see the new logo is to put a “link” tag in your pages, as described above. At least, you should put one in your domain's home page.

If you simply place a “favicon.ico” at root dir and without any “link” tag to it, it is nearly impossible to know if your readers will see your new logo. Because, different browser have different behavior on when to fetch the “favicon” file, and usually not documented.