Javascript 使用 React 和 Webpack 添加 Favicon

Add Favicon with React and Webpack

提问by CodeYogi

I am attempting to add a favicon to a React-based website that I made using webpack. It has been a total nightmare to add a favicon and I have tried many solutions to no avail. The latest solution that has been recommended to me is called 'favicons-webpack-plugin' which can be found here: https://github.com/jantimon/favicons-webpack-plugin.

我正在尝试将网站图标添加到我使用 webpack 制作的基于 React 的网站。添加网站图标完全是一场噩梦，我尝试了很多解决方案都无济于事。向我推荐的最新解决方案称为“favicons-webpack-plugin”，可以在这里找到：https: //github.com/jantimon/favicons-webpack-plugin。

If anyone can tell me what I am doing wrong, your assistance would be greatly appreciated.

如果有人能告诉我我做错了什么，您的帮助将不胜感激。

I get the following error when I run 'npm run start'

运行“npm run start”时出现以下错误

This is my directory structure:

这是我的目录结构：

This is my webpack.config.js file:

这是我的 webpack.config.js 文件：

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var favicons = require('favicons'),
    source = 'my-logo.png',           // Source image(s). `string`, `buffer` or array of `{ size: filepath }`
    configuration = {
        appName: null,                  // Your application's name. `string`
        appDescription: null,           // Your application's description. `string`
        developerName: null,            // Your (or your developer's) name. `string`
        developerURL: null,             // Your (or your developer's) URL. `string`
        background: "#fff",             // Background colour for flattened icons. `string`
        path: "/",                      // Path for overriding default icons path. `string`
        url: "/",                       // Absolute URL for OpenGraph image. `string`
        display: "standalone",          // Android display: "browser" or "standalone". `string`
        orientation: "portrait",        // Android orientation: "portrait" or "landscape". `string`
        version: "1.0",                 // Your application's version number. `number`
        logging: false,                 // Print logs to console? `boolean`
        online: false,                  // Use RealFaviconGenerator to create favicons? `boolean`
        icons: {
            android: true,              // Create Android homescreen icon. `boolean`
            appleIcon: true,            // Create Apple touch icons. `boolean`
            appleStartup: true,         // Create Apple startup images. `boolean`
            coast: true,                // Create Opera Coast icon. `boolean`
            favicons: true,             // Create regular favicons. `boolean`
            firefox: true,              // Create Firefox OS icons. `boolean`
            opengraph: true,            // Create Facebook OpenGraph image. `boolean`
            twitter: true,              // Create Twitter Summary Card image. `boolean`
            windows: true,              // Create Windows 8 tile icons. `boolean`
            yandex: true                // Create Yandex browser icon. `boolean`
        }
    },
    callback = function (error, response) {
        if (error) {
            console.log(error.status);  // HTTP error code (e.g. `200`) or `null`
            console.log(error.name);    // Error name e.g. "API Error"
            console.log(error.message); // Error description e.g. "An unknown error has occurred"
        }
        console.log(response.images);   // Array of { name: string, contents: <buffer> }
        console.log(response.files);    // Array of { name: string, contents: <string> }
        console.log(response.html);     // Array of strings (html elements)
    };

favicons(source, configuration, callback);
const pkg = require('./package.json');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

process.env.BABEL_ENV = TARGET;

const common = {
  entry: {
    app: PATHS.app
  },
  // Add resolve.extensions
  // '' is needed to allow imports without an extension
  // note the .'s before the extension as it will fail to load without them
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        // Test expects a RegExp! Notethe slashes!
        test: /\.css$/,
        loaders: ['style', 'css'],
        //Include accepts either a path or an array of paths
        include: PATHS.app

      },
      //set up JSX. This accepts js too thanks to RegExp
      {
      test: /\.(js|jsx)$/,
      //enable caching for improved performance during development
      //It uses default OS directory by default. If you need something more custom,
      //pass a path to it. ie: babel?cacheDirectory=<path>
      loaders: [
        'babel?cacheDirectory,presets[]=es2015'
    ],
      //parse only app files Without this it will go thru the entire project.
      //beside being slow this will likely result in an error
      include: PATHS.app
      }
    ]
  }
};

// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      contentBase: PATHS.build,

      //enable history API fallback so HTML5 HISTORY API based
      // routing works. This is a good default that will come in handy in more
      // complicated setups.
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,

      //display only errors to reduce output amount
      stats: 'errors only',

      //Parse host and port from env so this is easy to customize
      host: process.env.HOST,
      port: process.env.PORT

},

plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new NpmInstallPlugin({
    save: true //--save
  }),
  new FaviconsWebpackPlugin('my-logo.png')

]
});
}

if(TARGET === 'build' || TARGET === 'stats') {
  module.exports = merge(common, {
    entry: {
      vendor: Object.keys(pkg.dependencies).filter(function(v) {
        return v !== 'alt-utils';
      }),
      style: PATHS.style
    },
    output: {
      path: PATHS.build,
      // Output using entry name
      filename: '[name].[chunkhash].js',
      chunkFilename: '[chunkhash].js'
    },
    module: {
      loaders: [
        // Extract CSS during build
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style', 'css'),
          include: PATHS.app
        }
      ]
    },
    plugins: [
      // Output extracted CSS to a file
      new ExtractTextPlugin('[name].[chunkhash].css'),
      // Extract vendor and manifest files
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
      // Setting DefinePlugin affects React library size!
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  });
}

This is my server.js file:

这是我的 server.js 文件：

/* Global Requires */

const express    = require('express');
const logger     = require('morgan');
const bodyParser = require('body-parser');
const path       = require('path');
const app        = express();
const ReactDOM = require('react-dom')
var favicon = require('serve-favicon');


if(process.env.NODE_ENV === 'development') {
  console.log('in development.');
  require('dotenv').config();
} else {
  console.log('in production.');
}

/* App Config */
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use(favicon(__dirname + '/public/favicon.ico'));

app.use(logger('dev'));

/* Server Initialization */
app.get('/', (req, res) => res.sendFile('index.html'));
var port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server initialized on // ${new Date()}`));

回答by Akintunde

Here is all you need:

这是您需要的一切：

new HtmlWebpackPlugin({
    favicon: "./src/favicon.gif"
})

That is definitely after adding "favicon.gif" to the folder "src".

那肯定是在将“favicon.gif”添加到文件夹“src”之后。

This will transfer the icon to your build folder and include it in your tag like this <link rel="shortcut icon" href="favicon.gif">. This is safer than just importing with copyWebpackPLugin

这会将图标传输到您的构建文件夹并将其包含在您的标签中，如下所示<link rel="shortcut icon" href="favicon.gif">。这比仅导入更安全copyWebpackPLugin

回答by Matú? ??astny

For future googlers: You can also use copy-webpack-pluginand add this to webpack's production config:

对于未来的 googlers：您还可以使用copy-webpack-plugin并将其添加到 webpack 的生产配置中：

plugins: [
  new CopyWebpackPlugin([
    // relative path is from src
    { from: './static/favicon.ico' }, // <- your path to favicon
  ])
]

回答by Haswin

Adding your favicon simply into to the publicfolder should do. Make sure the favicon is named as favicon.ico.

只需将您的收藏public夹图标添加到文件夹中即可。确保将收藏图标命名为favicon.ico.

回答by mel3kings

Another alternative is

另一种选择是

npm install react-favicon

And in your application you would just do:

在您的应用程序中，您只需执行以下操作：

   import Favicon from 'react-favicon';
   //other codes

    ReactDOM.render(
        <div>
            <Favicon url="/path/to/favicon.ico"/>
            // do other stuff here
        </div>
        , document.querySelector('.react'));

回答by Luke Knepper

Browsers look for your favicon in /favicon.ico, so that's where it needs to be. You can double check if you've positioned it in the correct place by navigating to [address:port]/favicon.icoand seeing if your icon appears.

浏览器会在 中查找您的收藏夹图标/favicon.ico，因此这就是它需要的位置。您可以通过导航到[address:port]/favicon.ico并查看您的图标是否出现来仔细检查您是否已将其放置在正确的位置。

In dev mode, you are using historyApiFallback, so will need to configure webpack to explicitly return your icon for that route:

在开发模式下，您使用的是 historyApiFallback，因此需要配置 webpack 以显式返回该路由的图标：

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

In your server.jsfile, try explicitly rewriting the url:

在您的server.js文件中，尝试显式重写 url：

app.configure(function() {
    app.use('/favicon.ico', express.static(__dirname + '[route/to/favicon]'));
});

(or however your setup prefers to rewrite urls)

（或者您的设置更喜欢重写网址）

I suggest generating a true .icofile rather than using a .png, since I've found that to be more reliable across browsers.

我建议生成一个真实的.ico文件而不是使用 a .png，因为我发现它在浏览器中更可靠。

回答by Jiah827

Here is how I did.

这就是我所做的。

public/index.html

公共/index.html

I have added the generated favicon links.

我已经添加了生成的图标链接。

...
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/path/to/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/path/to/favicon-16x16.png" />
<link rel="shortcut icon" href="%PUBLIC_URL%/path/to/favicon.ico" type="image/png/ico" />

webpack.config.js

webpack.config.js

new HTMLWebpackPlugin({
   template: '/path/to/index.html',
   favicon: '/path/to/favicon.ico',
})

Note

笔记

I use historyApiFallbackin dev mode, but I didn't need to have any extra setup to get the favicon work nor on the server side.

我historyApiFallback在开发模式下使用，但我不需要任何额外的设置来使网站图标正常工作，也不需要在服务器端进行。

回答by Prakhar Mittal

It's the same as adding any other external script or stylesheet. All you have to do is focus on giving the correct pathand reland type.

这与添加任何其他外部脚本或样式表相同。您所要做的就是专注于提供正确的路径以及rel和type。

Note: When my favicon image was in the assets folder, it was not displaying the favicon. So I copied the image to the same folder as of my index.htmland it worked perfectly as it should.

注意：当我的 favicon 图像在assets 文件夹中时，它没有显示 favicon。所以我将图像复制到与 index.html 相同的文件夹中，它可以正常工作。

<head>
    <link rel="shortcut icon" type="image/png/ico" href="/favicon.png" />
    <title>SITE NAME</title>
</head>

It worked for me. Hope it works for you too.

它对我有用。希望它也适用于你。

回答by shmidtdan

Use the file-loaderfor that:

为此使用文件加载器：

{
    test: /\.(svg|png|gif|jpg|ico)$/,
    include: path.resolve(__dirname, path),
    use: {
        loader: 'file-loader',
        options: {
            context: 'src/assets',
            name: 'root[path][name].[ext]'
        }
    }
}

回答by UA_

I will give simple steps to add favicon :-)

我将给出添加收藏夹图标的简单步骤:-)

• Create your logo and save as logo.png

• Change logo.pngto favicon.ico

  Note :when you save it is favicon.icomake sure it's not favicon.ico.png

• It might take some time to update

  change icon size in manifest.json if you can't wait

• 创建您的徽标并另存为 logo.png

• 更改logo.png为favicon.ico

  注意：保存时请favicon.ico确保它不是favicon.ico.png

• 更新可能需要一些时间

  如果您迫不及待，请更改 manifest.json 中的图标大小

回答by B--rian

In my case -- I am running Visual Studio (Professional 2017) in debug mode with webpack 2.4.1 -- it was necessary to put the favicon.icointo the root directory of the project, right where the folder srcis rather than in a folder public, even though according to https://create-react-app.dev/docs/using-the-public-folderthe latter should be the official location.

就我而言——我正在使用 webpack 2.4.1 在调试模式下运行 Visual Studio (Professional 2017)——有必要将 放入favicon.ico项目的根目录中，就在文件夹所在的src位置而不是文件夹中public，甚至尽管根据https://create-react-app.dev/docs/using-the-public-folder后者应该是官方位置。