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" />


<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

2 Answers 2


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.

  • Oh, Thanks, I manually copied all files in My Sitecore folder and add a static path. I expected a folder in JSS where everything inside will be copied to the sitecore folder. Jun 11, 2018 at 18:49

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.