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'

[geoffreytools]

The solutions listed here did not work for me, in part because even when you add ./public/ in staticDirs, if you favicon is .storybook/public/favicon.svg it's first going to be copied to storybook-static as expected before being overwritten by the project's public/favicon.svg. So doing this alone in Storybook 8 only worked locally in dev mode.

Plan B has been for me to rename it .storybook/public/storybook-favicon.svg and to add a link element to .storybook/manager-head.html but it only partially worked because, as stated by seantomlins, it's written in the body element and it's fighting with the link element located in the head element, which means that in Firefox for example I would get the body element's favicon as a tab icon and the head element's favicon as the bookmark icon.

So what I ended up doing was to undo everything I did and to simply execute storybook build; cp .storybook/favicon.svg storybook-static/. Now this was perfect for me because I prefer to have a different favicon when I work locally (that's the original storybook favicon) and when I view the static site online (that's my custom favicon), but it is of course possible to combine approaches.

Now I noticed Firefox had problems loading the favicons in the browser's home screen shortcuts area but this feature has always been flaky so I don't know who to blame for this. Bookmarks and tab icons work as expected. The favicon eventually showed up in Firefox's home screen shortcuts area.

[mehrizi]

Hello,
Thanks for maintaining such an extraordinary package.
I could easily override favicon in version 6. Simply by putting it in public folder. It overrides the default.
In version 8, aside from the fact I could not find any docs about it, it seems storybook rewritten to override its own favicon so the solution that worked in v6 is not working in v8.
It gives the feeling that maintainers dont want to allow such a change easily!
I appreciate some official answer to this matter.

[gubatenkov]

+1 Same issue. So anybody knows how to change storybook favicon in v8?

[ChrRepou]

The only thing that you need to do in v8 is to add this in the config of main.js:
managerHead: head => $(head)<link rel="icon" type="image/svg+xml" href="relative path to your favicon.svg">

[mehrizi]

The only thing that you need to do in v8 is to add this in the config of main.js: managerHead: head => $(head)<link rel="icon" type="image/svg+xml" href="relative path to your favicon.svg">

Dear Christina,
I checked this solution. It only gives you ability to add more favicon link tag but 'It DOES NOT remove the default favicon link tag'. I suspected that head variable being passed to the function would carry the defaul favicon html so I tried to remove it with the following code:

managerHead: head => {
    let cleanedHtml = head? head.replace(/<link\s+rel=["']icon["'][^>]*>/gi, ''):'' // Ommitting any existing favicon from head
    return `${cleanedHtml}<link rel="icon" type="image/svg+xml" href="/favicon2.svg">‍‍` // adding my own favicon
  }

But seems the favicon is more hardcoded than what I presumed!

• Do you have any working solution?
• You understand that when there is a primary favicon it is loaded by default?

[ChrRepou]

So basically if you have 2 link tags with the rel="icon" it is like css so the last one is used. I didn't find a way to remove the prior favicon but for me it worked that way. I attach here the relevant info from mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#:~:text=If%20there%20are%20multiple%20%3Clink%20rel%3D%22icon%22%3Es%2C%20the%20browser%20uses%20their%20media%2C%20type%2C%20and%20sizes%20attributes%20to%20select%20the%20most%20appropriate%20icon.%20If%20several%20icons%20are%20equally%20appropriate%2C%20the%20last%20one%20is%20used.

[mehrizi]

So basically if you have 2 link tags with the rel="icon" it is like css so the last one is used. I didn't find a way to remove the prior favicon but for me it worked that way. I attach here the relevant info from mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#:~:text=If%20there%20are%20multiple%20%3Clink%20rel%3D%22icon%22%3Es%2C%20the%20browser%20uses%20their%20media%2C%20type%2C%20and%20sizes%20attributes%20to%20select%20the%20most%20appropriate%20icon.%20If%20several%20icons%20are%20equally%20appropriate%2C%20the%20last%20one%20is%20used.

I am not sure, but probably it was a browser cache. The previous time I ran the project it was not loading the 2nd favicon. Thanks for correcting me.

[James-Wilkinson-git]

This is still an issue. Should have an easy way to change the favicon.