favicon is more than just an icon

The concept of favicon

The Chinese translation of favicon is the favorite icon. It is not only the avatar of the website, but also allows the browser's favorites to not only display the corresponding title, but also distinguish different icons. website.

Browser support

FF browser also supports dynamic favicon, making your website more personalized

A little knowledge

favicon can be used in certain situations To reduce the server's traffic bandwidth usage to a certain extent, generally in order to improve the usability of the website, we will create a customized 404 error file for our website. In this case, if the website does not have a corresponding favicon.ico file, whenever there is When a user favorites a website/webpage, the web server will call this customized 404 file and record it in the website's error log. This should obviously be avoided.

Occasionally I set the favicon and found that it was not displayed

• First check whether the format is correct:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Now the format is not so strict. No, it’s okay without type

• If the format is correct, ctrl + F5 forcefully clear the cache, and you can see the icon of the tab page.

How does webpack package favicon?

If you use html-webpack-plugins to process html, this plug-in already provides favicon. You only need to write the path where favicon is located, such as:

const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, './imgs/favicon.ico')
});
pluginsConfig.push(htmlPlugin);

The plug-in is It will automatically package it into the head of html for you;
If not, you need to process the icon yourself, and then quote

For more favicon, it is not just an icon. For related articles, please pay attention to the PHP Chinese website!