如何使用 webpack 在网站的浏览器选项卡中放置图标（favicon）？答案

【问题标题】：How can I put an icon (favicon) in the browser tab of a website using webpack?如何使用 webpack 在网站的浏览器选项卡中放置图标（favicon）？
【发布时间】：2020-05-16 08:35:46
【问题描述】：

我正在使用 webpack（这是我第一次），到目前为止我还没有遇到任何问题，但是当我尝试放置图标时不起作用，我尝试了很多东西，但我不知道为什么它不起作用工作。

我处理过 jpg 格式，ico，我不知道我做错了什么。

我尝试过的一些标签是：

<link rel="icon" href="./../Icons/name-icon.ico" />
  
<link rel="icon" sizes="192x192" href="./../Icons/name-icon.png" />
    
<link rel="Shortcut Icon" href="./../Icons/favicon.ico" type="image/x-icon" />

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

【问题讨论】：

标签： html webpack icons webpack-dev-server favicon

【解决方案1】：

按照以下步骤操作：

在头部添加<link rel="icon" type="image/x-icon" href="favicon.ico" />
确保favicon.ico文件在根目录[在src的同一级别]
如果它不起作用Hard reload your browser

如果您使用 copy-webpack-plugin 等任何插件更改了扩展路径，请确保更新您的 href='new path'

另一种解决方案：

使用插件调用favicons-webpack-plugin-2

它看起来很棒，它会生成网站图标并注入它

https://www.npmjs.com/package/favicons-webpack-plugin-2

【讨论】：