[Bug]: FavIcon doesn't load on localhost with Vite builder

[renato-bohler]

Describe the bug

The favicon is not loading on localhost when Vite builder is being used.

To Reproduce

Create a React project using Vite and TypeScript, and then initialize and start Storybook (next) on it:

npm create vite@latest
# Project name: vite-project
# Framework: React
# Variant: TypeScript

cd vite-project
yarn
npx sb@next init --builder=vite # this installed 7.0.0-beta.54 for me
yarn storybook

This is what I get:

Notice the lack of a favicon on the tab. Inspecting the page, I found that it was trying to use ./favicon.svg, but http://localhost:6006/favicon.svg does not find anything:

After building, it works:

yarn build-storybook
npx http-server ./storybook-static

System

Environment Info:

  System:
    OS: Linux 5.19 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 110.0
  npmPackages:
    @storybook/addon-essentials: 7.0.0-beta.54 => 7.0.0-beta.54 
    @storybook/addon-interactions: 7.0.0-beta.54 => 7.0.0-beta.54 
    @storybook/addon-links: 7.0.0-beta.54 => 7.0.0-beta.54 
    @storybook/blocks: ^7.0.0-alpha.8 => 7.0.0-alpha.8 
    @storybook/react: 7.0.0-beta.54 => 7.0.0-beta.54 
    @storybook/react-vite: 7.0.0-beta.54 => 7.0.0-beta.54 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 

Additional context

This was probably introduced by #20130. This PR was released on 7.0.0-alpha.62, and if I downgrade to 7.0.0-alpha.61, the favicon seems to show up just fine:

yarn add -DE [email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected]
yarn storybook

#20612 might also be related.

[JorisAerts]

I can confirm this. I'm using @storybook/vue3-vite and I also don't have a favicon. (on 7.0.0-rc9)

There is a favicon declared in the header:

<link rel="icon" type="image/svg+xml" href="./favicon.svg">

But when navigating to it, you get a 404.

There is a favicon.ico though, but it seems nothing but a 328 bytes blank square.

[ghengeveld]

Can confirm, still present on 7.5.0-alpha.1.

[rossanag]

@JorisAerts I don't know if it has to do with the fact, that some browsers don't display the icon if they are local (Chrome, Safari).
Just for the purpose of testing I copy my icon into another folder under thesrc folder, and then the icon displays correctly.
(I changed <link rel="icon" type="image/svg+xml" href="src/assets/vite.svg" /> )

[designcouch]

Having a similar issue, and I believe it's because when you build for production, Vite hashes all static files to bust the cache and be sure that users get any updates.

Most internal views/components are updated on build to reflect this change - but anything in index.html that is "hard coded" does not get this update. So the actual filename for your favicon is being hashed on build.

[ndelangen]

@IanVS Does that make sense to you? What would be an appropriate fix/solution?

[IanVS]

@ndelangen, I do not see this behavior. The favicon is working fine in both my app, as well as in a new Storybook. Does someone have a reproduction for us to look at?

[nazishmohammed]

I don't know why but for me the favicon works if there is no "/" right after the href.
MY EXAMPLE :

Just be sure there's no "/" in the beginning of href. Hopefully, it'll work. Donno why though.

[bsen]

in the index file I added
but still the favicon is not showing up. any idea to fix it ?

[ritute]

I ran into this as well in a different app, and it appears that on localhost the favicon only appears if I prepend the path with public: /public/favicon.ico (even though the actual file is served under both the root and public). So what I did was set an env variable and just used this in the index.html:

// .env.development
VITE_FAVICON_URL=/public/favicon.ico

// .env.production
VITE_FAVICON_URL=/favicon.ico

// index.html
<link rel="icon" href="%VITE_FAVICON_URL%" type="image/x-icon" />

[ndelangen]

@ritute I thought I had fixed this, Can you supply a repro with the failure that caused you to add that work-around?

[ritute]

@ritute I thought I had fixed this, Can you supply a repro with the failure that caused you to add that work-around?

It's in a different project, not storybook, but just wanted to share what I had to do in my Vite project to fix this similar issue in case somebody here runs into it or comes across this from google searches for it.