How to Create and Update a Website Logo (Favicon)
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:
- Place the
favicon.icoin the web server document root dir. ⁖ “http://example.com/favicon.ico”
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