How do I get favicon working with webpack

Help Requests
#1

My aurelia/webpack project is structured like so:

 |-- src
     |-- static
         | -- favicon.ico
     |-- index.ejs
     |-- favicon.ico

I put the same favicon.ico in two different places to try to get this to work and still it is not displayed when the page is loaded. It won’t display when running in dev or prod mode.

My webpack.config.js file contains the following for production:

...when(production || server, new CopyWebpackPlugin([
   {from: 'static', to: 'outDir, ignore: ['.*'] }])),

Lastly, in my index.ejs file, I have the following:

<head>
   ...
   <link rel="icon" href="favicon.ico" type="image/ico">
</head>

<!--Ive also tried this-->
<link rel="icon" href="static/favicon.ico" type="image/ico">

What do I need to do to get favicon.ico to display in the browser tab in both dev and prod?

1 Like
#2

mine is configured this way

    ...when(!tests, new CopyWebpackPlugin([
      { from: 'static', to: outDir, ignore: ['.*'] }, // ignore dot (hidden) files
      { from: 'favicon.ico', to: 'favicon.ico' },
      { from: 'assets', to: 'assets' }
    ])),

and my favicon.ico is in both static and root, I don’t remember why I have both but anyway it works for me this way so I’m leaving it this way.

EDIT

in another project (not Aurelia though), I got it setup by following the source directory, I think this is better and will work all the time (as opposed to having the favicon in both folders like I wrote earlier).

const srcDir = path.resolve(__dirname, 'src');

new HtmlWebpackPlugin({
      template: 'index.ejs',
      favicon: `${srcDir}/favicon.ico`,
      metadata: {
        // available in index.ejs //
        title, baseUrl
      }
    }),
new CopyWebpackPlugin({
      patterns: [
        { from: 'static', to: outDir, ignore: ['.*'] }, // ignore dot (hidden) files
        { from: `${srcDir}/favicon.ico`, to: 'favicon.ico' },
      ]
    }),
1 Like
#3

So, I’m not an expert with webpack. I used dotnet new aurelia to create my project and it created all my webpack configuration, etc.

Where I get a bit confused is, when running in dev mode, it doesn’t appear that any of my code gets served up from the dist folder – it doesn’t even get created. It seems as though that only gets built when I actually do au build --env prod.

So, where is my code being served from when running in dev? If it’s pulling straight from my src folder, then I don’t understand why it isn’t finding favicon.ico.

I think the code you provided will fix my issue with dev – I’ll try that this afternoon.

Thanks

1 Like
#4

So, I was able to get this working in prod (which is the most important). After looking again at the settings in webpack.config.js, I realized that the line: { from: 'static', to: outDir, ignore: ['.*'] } is actually copying my favicon.ico to the root directory – not into a folder named static.

I had to update my link tag to:

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

That worked.

I then noticed that in the wwwroot folder of my project, there is a favicon.ico file. I replaced that with my file and - voila! - it now works in dev as well!

1 Like
#5

WebPack serves Dev build from memory, you won’t see the changes reflected in the dist folder for that reason.

1 Like