2024-05-08 작성

How to change favicon and logo in Storybook 8

Table of contents

I had struggled to change favicon and logo in a storybook project.

So I want to share my tip who wants to change them.

1. Storybook version

My storybook version is 8.0.9

2. How To

First, go to .storybook/main.ts. We will change staticDirs which sets a list of directories of static files to be loaded by Storybook server.

// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from "@storybook/your-framework";

const config: StorybookConfig = {
  framework: "@storybook/your-framework",
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
};

export default config;

Second, go to public folder and paste your icon file and logo file.

It should be as follows…

  • public
    • favicon.ico
    • logo.jpg

Then, Storybook server will read favicon.ico and it will render your image on a tab in a browser. Then, let’s try out to show some our logo.

Third, before we go to .storybook/manager.ts for applying the logo, We need a theme. Let’s make my theme.

// .storybook/YourTheme.ts
import { create } from "@storybook/theming/create";

export default create({
  base: "light",
  brandTitle: "My custom Storybook",
  brandUrl: "https://example.com",
  brandImage: "./logo.jpg", // or you could put an url from CDN.
  brandTarget: "_self",
});

There’s our logo url ./logo.jpg, It will read from public folder. After that, we need to apply our theme in manager.ts.

// .storybook/manager.ts
import { addons } from "@storybook/manager-api";
import theme from "./YourTheme";

addons.setConfig({
  theme,
});

All done! Check out your logo and favicon are at right place. If you have any problem with this tip, please let me know by issuing in my github.

Issue page