Does this badge update when my build fails?
No, and that is the most important thing to understand about it. It is a static SVG with your text baked in. A shields.io badge that says "build passing" is a live URL that your CI provider updates; this is a picture of one. Use it for facts that do not change (licence MIT, made with TypeScript, platform iOS) and use a real CI badge for anything that reports a status.
Does it call shields.io?
No. The SVG is generated by a function in your browser, with the widths estimated locally and the colors written directly into the markup. That means no third-party request in your README, nothing to rate-limit, and no dependency on a service that might change or go away.
Which format should I use in my README?
For GitHub, commit the SVG file to your repo and reference it from Markdown, so the badge renders even if you later go offline or the file moves. The generated Markdown and HTML snippets are there for convenience; the HTML one is useful for documentation sites that render raw HTML, and the raw SVG is what you actually want to save.
Why is the spacing slightly off on my badge?
Because the width is estimated, not measured. The generator uses a lookup table of approximate character advance widths for a Verdana-like 11-pixel font (narrow for i, j, l, wide for m, w, M, W) rather than rendering the text and measuring it. For ordinary words it is accurate to a pixel or two; unusual strings can look a little loose or tight.
Can I add a real logo, like the npm or GitHub icon?
Not an icon, only text. The logo field prepends a bold text label inside the left segment of the badge, which works for a short word such as npm or beta. Real brand icons would need the icon set embedded, and this tool keeps the SVG self-contained and dependency-free.