How to change favicon?

[cesalberca]

Describe the bug

We are unable to set a custom favicon for the storybook static build and development. We've tried using HtmlWebpackPlugin, setting the icon with different urls in the preview-header.html and manager-header.html having imported the 'favicon.ico' in the config.js as follows:

import {
  configure,
  addParameters,
  addDecorator
} from '@storybook/vue'
import {
  Vue
} from 'vue-property-decorator'
import {
  Centered
} from './components/centered'
import {
  Installer
} from '../src/Installer'
import {
  withKnobs
} from '@storybook/addon-knobs'
import '../src/assets/variables.css'
import '../src/assets/theme.css'
import '../src/assets/base.css'
import '../src/sass/main.scss'
import {
  withInfo
} from 'storybook-addon-vue-info'
// We import the favicon here
import './favicon.ico'

Vue.component('Centered', Centered)

const installer = new Installer(Vue)
installer.install(true)

addParameters({
  options: {
    sortStoriesByKind: true
  }
})

const stories = require.context('../src', true, /.stories.ts$/)

function loadStories() {
  stories.keys().forEach(filename => stories(filename))
}

addDecorator(withKnobs)
addDecorator(withInfo)

configure(loadStories, module)

And the preview-header.html (or manager-header.html):

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

We've tried these routes too:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

And

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Using the first option we see that the favicon is broken, however we don't see in the bundle the favicon.

System:

• OS: MacOS
• Device: Macbook Pro 2019
• Browser: All
• Framework: Vue
• Version: 5.0.3

[shilman]

Here's my setup. First in package.json scripts:

"storybook": "start-storybook -p 9009 -s public"

Then in .storybook/manager-head.html (NOT manager-header.html):

<link rel="shortcut icon" href="/storybook.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">

Then in public:

$ ls public/
storybook.ico	storybook.png

Hope that helps!

[cesalberca]

My bad, I meant .storybook/manager-head.html. Works perfectly now, thanks! Maybe adding this to the docs would help other people too 🙂

[seantomlins]

Solution I figured out to replace the default

1. Create a static asset directory i.e. .storybook/public
2. Add it to .storybook/main.js as a staticDir

module.exports = {
  staticDirs: ['./public'],
};

3. Add your favicon.ico file to public

I believe it works because it's copying the static directory files to the site root which overwrites the favicon.ico, but it could be some other dark magic

I tried the manager-head.html solution but it was outputting the html into the body instead of the head. Not sure it that's a bug in v6.4.19 or if that's expected

[sag1v]

@shilman approach didn't help in my case nor @seantomlins's approach (for some reason)
Unfortunately there is no clear way of overriding the favicon, shame its not documented.

I ended up doing this hack in manager.js

// manager.js

import favicon from './assets/favicon.ico';

const link = document.createElement('link');
link.setAttribute('rel', 'shortcut icon');
link.setAttribute('href', favicon);
document.head.appendChild(link);

[alvara]

Thanks @sag1v , this was the only solution that worked for me.

[LeandrodeLimaC]

I'm using Storybook v7 and @seantomlins solution works fine!

[soumitya0]

Just rename the file that you want to show as favicon to favicon.svg and upload inside public folder

[technbuzz]

I second with @soumitya0 solution, this works for version 7.6.16

[bastiendmt]

I struggled to achieve this. I manage to do it by :

• creating a .storybook/public/favicon.svg this folder contains other file aswell
• exposing this folder in main.ts, with staticDirs with './public'