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:
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.
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〕
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-sheetblog comments powered by Disqus