How to add a favicon in the root of the app

Question

1. JSS
2. VueJs sample
3. Tech preview 3

I tried to add favicons in /assets/favicon-16x16.png

Then, in /src/app/ServerHtml.js, I added:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

or

<link rel="icon" type="image/png" sizes="16x16" href={`${this.distPath}favicon-16x16.png`} />

But I have a 404 error...

Can you help me ? Thanks

Answer 1

A general rule of thumb is that if you have an asset that is not referenced in your Sitecore app route/content data, you need to ensure that you're referencing it in your app in the way that you normally would for static assets in a webpack-bundled app. e.g.

import favicon from './assets/favicon.png';` // note: path is relative to the .js file

render() {
  return <link rel="icon" href={favicon} />;
}

Otherwise, if you are using absolute paths, webpack won't know about the asset and won't do anything with it.

<link rel="icon" href="/assets/favicon.png" /> // note: path is absolute

In this example, you have to ensure that your /assets/favicon.png file is copied to your output folder as webpack will not analyze the href attribute. This could be a separate build step or via webpack plugin, etc...

I'll also note that this is true for other assets like CSS, fonts, etc... not just images.

Answer 2

If you are using webpack, there is a good chance you use it with HtmlWebpackPlugin.

Aaand it happens to have an option just for that:

so in your webpack.conf.js you write

favicon: 'src/assets/favicon.png'

and in your template index.html

you add

<link rel="icon" href="src/assets/favicon.png" type="image/x-icon">

This worked for me