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

up vote 1 down vote accepted

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. – tomagladiator Jun 11 at 18:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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