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.
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.
You can also create a favicon without having a “link” tag on each of your HTML page. Here's how:
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.
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〕
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.
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.blog comments powered by Disqus