Files specified as 'favicon' should use whatever loaders are configured for that filetype

[edmorley]

Is your feature request related to a problem? Please describe.
html-webpack-plugin supports setting a favicon using the favicon option. However setting that to the path to a file, results in it being copied to the output directory as-is, with no opportunity to customise any of:

• the output filename (eg adding a hash) or location (eg to put under an assets/ subdirectory)
• whether the icon is inlined or not

Describe the solution you'd like
It seems a simpler way to achieve the above than adding custom support (eg #986 or similar), would be to run the file specified under favicon through whatever webpack loader has been configured for that filetype.

That way users can say configure url-loader for *.ico in their webpack config as normal, setting the name and inline limit as desired, and html-webpack-plugin wouldn't have to handle the addFileToAssets() at all.

This would be similar to what html-loader does itself -- if it discovers resources in the HTML, it defers to whatever loaders are configured for them.

Describe alternatives you've considered

• Using favicons-webpack-plugin, however it's not compatible with html-webpack-plugin
  v4 (Compatibility with HTML webpack plugin 4 alpha favicons-webpack-plugin#140), doesn't support data URIs either (logo key doesn't support data URIs favicons-webpack-plugin#60) and does a lot more than many users will need.

Additional context
See also #364.

[jantimon]

Hey @edmorley

I thought many times about a good favicon integration.

Using a loader from a plugin requires a child compiler (which has performance impacts).
So I moved the favicons over to the favicons webpack plugin and I believe that it is still a good idea.

Unfortunately favicons requirements change over and over and over again because of new devices getting launched and new features are getting available.

So maintaining the plugin is very very time consuming and I can't handle it right now.
I have a roadmap for it but I would need help for that.

[glen-84]

If you're using an HTML template and the HTML loader, then you can configure the HTML loader to process link HREFs:

{
    test: /\.html$/,
    use: [
        {
            loader: "html-loader",
            options: {
                attrs: ["img:src", "link:href"] // <-- Here.
            }
        }
    ]
}

... and then add the favicon to your template:

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

Which will output:

<link rel="icon" type="image/x-icon" href="/path/to/favicon-08b6ed97.ico" sizes="16x16 32x32" />

I think that this is actually better than configuring the favicon path in webpack.config.js.

[stale]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.