Html-webpack-plugin: Favicons should be added with a hash

Created on 30 Nov 2015 · 5Comments · Source: jantimon/html-webpack-plugin

Currently the generated markup is as follows:

<link rel="shortcut icon" href="/favicon.ico">

Suggested markup is:

<link rel="icon" type="image/x-icon" href="/favicon.ico?xxx">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?xxx">
<link rel="shortcut" type="image/x-icon" href="/favicon.ico?xxx">

enhancement help wanted

Source

kirill-konshin

👍4

Most helpful comment

Being able to load it as favicon.[hash].png would also be helpful for me. Maybe something similar to how you can configure output filenames?

Eg.

      new HtmlWebpackPlugin({
        favicon: {
          source: 'images/icon.png',
          outputFilename: 'icon.[hash].png'
        },
      }),

D1plo1d on 14 Dec 2015

👍6

All 5 comments

Being able to load it as favicon.[hash].png would also be helpful for me. Maybe something similar to how you can configure output filenames?

Eg.

      new HtmlWebpackPlugin({
        favicon: {
          source: 'images/icon.png',
          outputFilename: 'icon.[hash].png'
        },
      }),

D1plo1d on 14 Dec 2015

👍6

It would be great if the the the output favicon name could differ from the original name of the file. Eg I have multiple entry points like:

[
new HtmlWebpackPlugin({
      title: 'Home',
      minify: htmlMinifyOptions,
      chunks: ['home', 'vendor'],
      template: './app/index.html',
      filename: 'index.html',
      favicon: './app/pages/home/favicon.ico',
    }),
    new HtmlWebpackPlugin({
      title: 'Contact',
      minify: htmlMinifyOptions,
      chunks: ['contact', 'vendor'],
      template: './app/index.html',
      filename: 'contact.html',
      favicon: './app/pages/contact/favicon.ico',
    }),
]

I would like to have different favicons for the home page and the contact page but I would like to have the original favicon files to be named favicon (./app/pages/home/favicon.ico and ./app/pages/contact/favicon.ico). Currently this is not working because their both output names will just be favicon.ico and they will conflict. Having the file's hash in the output name would solve this.

laszlokorte on 13 Apr 2016

Please use the https://github.com/jantimon/favicons-webpack-plugin for advanced favicon options.

jantimon on 25 Apr 2016

No "theme_color" in output manifest.json. I don't see any info on configuring options other than ver simple example. output manifest.json is invalid due to this.