Learning

Add a favicon to your Storybook application

Take this small but impactful step today and give your Storybook application that extra touch of visual appeal and professionalism!


Favicons, short for “favorite icons,” are small images or icons that appear in the browser tab, bookmarks, and other areas of the browser UI. Adding a favicon to your Storybook application can help to:

Adding a favicon is a small but significant step that can help improve the user experience and make your Storybook application more memorable and distinctive.

So why not take this small but impactful step today and give your Storybook application that extra touch of visual appeal and professionalism?


To add a favicon for Storybook, follow these steps:

  1. Create or obtain a favicon file matching the supported formats.

  2. Place the favicon file in the public folder of your Storybook project as defined in your configuration.

  3. Open the .storybook/manager-head.html file in your project, or create it if it doesn’t exist.

  4. Add the following code to the file to reference the favicon file:

<link rel="shortcut icon" href="/favicon.ico" />
  1. Save the file and restart your Storybook server. Your favicon should now be visible in the browser tab for your Storybook application.

Warning: The default Storybook favicon overrides the new one with Chrome by running the application locally.


Gerome Grignon
Web developer

Welcome to my website dedicated to web development! Discover innovative tips and inspiring projects. Dive into the captivating world of the web and let yourself be inspired by the enriching content that I share. Ready to explore?
Right this way!