preface

Since each time will forget the replacement steps, so record.

Today I would like to share with you how to add small ICONS in the title of the page, like the blue logo on the front of the Nuggets.

Two methods are mainly introduced:

1. Ordinary HTML modification

1. Add the following code in the HEAD section of the HTML file (notice the href path).

<link rel="icon" type="image/x-icon" href="icon.ico" />
Copy the code

The best format for your icon is. Ico. After a few tries, PNG and JPG formats are available, and the browser will automatically help you scale the image to 16*16.

However, the ico format is much smaller, and also pay attention to the transparency issue, JPG and BMP format images will lose transparency, so it is recommended to switch to. If you do not want to download the image format conversion tool or icon icon creation tool, here is an online translation address

2. Create an icon in ICO format

For compatibility purposes, use no more than 16 colors, and this icon must be named favicon.ico. Simply place the icon in the site’s root directory, and when the page loads, the browser will automatically retrieve the icon and add it to the title.

More solutions to real development problems will be shared later.

2. Modify in VueCli3

When you change the icon icon for the first time, you may change the link in the index. HTML as follows:

However, you will find that even after the changes have been made, rerefreshing has no effect. So let me show you how to do that. Create a vue.config.js file in the root directory, and then write down before

module.exports = {
    pwa: {
        iconPaths: {
            favicon32: 'favicon.ico',
            favicon16: 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon: 'favicon.ico',
            msTileImage: 'favicon.ico'
        }
    }
}
Copy the code

Here’s a GitHub tutorial on PWA

Be sure to restart the project once the changes are complete for the icon to take effect.