[RFC] Change Favicon Behavior

[capturetheworld]

Summary

Chrome has a "bug" where it falls back to .ico instead of .png. One possible solution is to add sizes="32x32" as documented here: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs, and https://stackoverflow.com/questions/63429240/chromium-seems-to-display-ico-instead-of-svg-favicon

Problem Statement

There is a difference between favicon loading, and this is what causes the difference between Firefox and Chrome. Chrome will fallback to favicon.ico, which seems to always been injected by Storybook no matter what the manager-head.html is.

This is not well documented by the Storybook team and should be. If there is no favicon.ico present, Storybook will place the default favicon.ico in the public directory. Chrome will then always fall back to favicon.ico. Firefox will be the "correct" version (whether you specify SVG or PNG).

See also:
Related to #21458 and #6155
https://medium.com/web-dev-survey-from-kyoto/favicon-nightmare-how-to-maintain-sanity-7628bfc39918

Non-goals

No response

Implementation

Alter the way (or document!) how storybook injections its own favicon into the and favicon.ico file if none is present in the public folder. Furthermore add sizing to alter the html so that Chrome will pick up the correct favicon file (png). SB seems to change to SVG currently if it's present.

Prior Art

No response

Deliverables

1. Solve the favicon confusion over when Chrome or Firefox loads which favicon and why.

Risks

No response

Unresolved Questions

• What is the goal for SB injecting the default SB icon?

Alternatives considered / Abandoned Ideas

No response