The role of the ico

When we go to some websites, there is a logo on the left side of the title bar at the top of the browser. This is what ICO is for. Using ICO ICONS can make it easier for readers to identify your site and increase traffic revenue; Secondly, it is easier to produce professional aesthetic feeling, but also to reduce the traffic bandwidth cost of the server

favicon.ico

The favicon isFavorites Icon“, which translates into ChineseWebsite pictureOr is itThe website logo. Ico is a suffix for the file. A Favicon is an icon associated with a web site or web page. For example, we are familiar with Baidu

Load the favicon

1. Generate an ICO file

Generate ICOs through online sites. Like the bitworm, icO51

File name: favicon.ico file directory: Placing it in the root directory of the project is highly recommended

2. Modify the WebPack configuration file

Update the webpack.dev.conf.js and webpack.prod.conf.js files synchronously. The HTML-webpack-plugin is needed here.

Webpack.dev.conf.js: Development environment configuration

New HtmlWebpackPlugin({filename: 'index.html', template: 'index.html', inject: true, // Configure favicon favicon: path.resolve('favicon.ico') }),Copy the code

Webpack.prod.conf. js: production environment configuration

New HtmlWebpackPlugin({filename: config.build.index, template: 'index.html', inject: true, // Configure favIcon favicon: path.resolve('favicon.ico') ... }),Copy the code

Note: This takes effect after reloading

3. After the restart, you will find a logo icon on the left side of the title bar at the top of the browser.

The resources

  1. html-webpack-plugin
  2. webpack