How to Create and Update a Website Logo (Favicon)

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

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.

favicons gallery 2013-12-01
many favicons

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:

When 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. ⁖ convert cat.png cat.ico. 〔☛ ImageMagick Tutorial

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 website'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.

For more advanced tips on using favicon across different devices (browser, phone, tablets), see: https://github.com/audreyr/favicon-cheat-sheet

blog comments powered by Disqus