Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change the Favicon in Storybook

I’m trying to implement Storybook into my project and I can’t seem to figure out how to change the Favicon. I’m using version 8.2.9 and I can’t find any relevant information online. I don’t have a manager-head.html file and I’ve tried things like

In my manager.ts file

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('link[rel="shortcut icon"]')?.setAttribute('href', favicon);
});

and also this in my main.ts file

config.plugins?.push(
      new HtmlWebpackPlugin({
        title: 'Title',
        favicon: './public/favicon.png', 
      })
    );

Does anyone know how to do this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Many of the other solutions weren't working or only worked sometimes so this is the fix that helped me. In my main.ts file I added this to the configs.

    managerHead: (head) => 
    `${head}
      <link rel="shortcut icon" href="../public/favicon.ico" type="image/ico">`,

  2. 0

    You can try create a manager-head.html in the Storybook configuration directory (usually .storybook/), and add the following content:

    <link rel="shortcut icon" href="/path-to-your-favicon/favicon.png" 
    type="image/png">

    Another way: Using manager.ts/manager.js:

    const link = document.createElement('link');
link.rel = 'shortcut icon';
link.href = '/path-to-your-favicon/favicon.png';
document.head.appendChild(link);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search