Custom favicon (and customize layout in general)

My specific question: how can you add a custom favicon (like http://airbnb.io/react-dates). I’m using a webpack config if it makes any difference.

More general question: Is it possible to customize the CSS/layout at all? I’d like to add my company name/logo in place of the REACT STORYBOOK header in the top left. I could also see it being useful to customize the CSS of the “chrome” around the examples. Is this possible now or are there any plans to support this?

BTW I’m a huge fan of this project. We recently switched to it from a home-grown version which:

• was harder to maintain
• more inconsistent across example groups
• was shipped with our prod build which meant we needed to load dependencies like faker in prod.

[thani-sh]

Hi @jcarbo

You can use the -s flag to copy static files when running/bundling storybook. If one of your static file directories has a favicon then it’ll be used. Example:

"scripts": {
  "storybook": "start-storybook -s ./my-dir-with-favicon",
  "build-storybook": "build-storybook -s ./my-dir-with-favicon"
}

You can use the options addon to customize some parts of the UI. You can change the header text and the link with this addon.

We’re using inline-styles for our React Components (chrome) so it’ll be difficult to customize them with custom CSS. If it’s a relatively small and general customization, maybe we could add it to the options addon.

[jeffcarbs]

@mnmtanish - I realized the favicon issue wasn’t resolved via the hard refresh. I had been messing around internally with the node module and something I changed fixed it. I wound up digging in further and just opened a PR with a fix (see #592).