Favicon 不会显示，似乎是 webpack 的问题

Posted 2023-02-22

【中文标题】Favicon 不会显示，似乎是 webpack 的问题

【英文标题】：Favicon won't show, seems to be issue with webpack

【发布时间】：2016-05-28 13:57:18

【问题描述】：

我有一个 React/Redux 应用程序，我正在使用 webpack 转换我的 JSX 和 ES6 并将我的样式表和图像加载到我的 JS 中。我的开发服务器托管在 3000 端口上。

这是我的 webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  ,
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin(
      favicon: 'src/images/favicon.ico'
    )
  ],
  module: 
    loaders: [
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    , 
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    ,
    
      test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loaders: [ 'url' ],
      include: __dirname
    ,
    
      test: /\.(png|ico|gif)?$/,
      loaders: [ 'file' ],
      include: __dirname
    ]
  
;

当我点击 localhost:3000 时，除了我的 favicon 之外，我所期望的一切都在那里。如果我去 localhost:3000/static/favicon.ico，我的 favicon 就在那里。可以使用一些专业知识来调试此问题。

【问题讨论】：

您在localhost:3000/favicon.ico 看到了什么？这就是浏览器寻找它的地方......

404，但我也在 index.html 中指向 /static/favicon.ico。 <link rel="shortcut icon" href="/static/favicon.ico" "image/x-icon" />

我现在在 localhost:3000/favicon.ico 看到它，通过使用我的 express web 服务器的 'serve-favicon' 中间件，但即使在清除我的缓存并更改我的链接标签之后仍然没有运气index.html 到<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

有趣...这都是浏览器吗？也许放弃领先的/ 使其成为相对路径？引用MDN：“快捷链接类型经常出现在图标之前，但这种链接类型不符合标准，被忽略，网络作者不得再使用它。” - 也许尝试符合标准的<link rel="icon" href="favicon.ico" />，或者完全删除它，因为这代表了默认行为。

我与webpack-dev-server 有完全相同的问题；(

【参考方案1】：

浏览器会在localhost:3000/favicon.ico 中查找您的网站图标，所以它需要在其中。尝试重写 url 为 favicon.ico 提供 /favicon.ico 路由。例如，如果您使用 historyApiFallback，请执行以下操作：

historyApiFallback: 
    rewrites: [
        // shows favicon
         from: /favicon.ico/, to: '[path/to/favicon]' 
    ]