Bolt.new favicon install runbook
Bolt runs your entire project inside a WebContainer in the browser tab, so the file tree is real but it is not where your site ultimately lives. This guide covers where icon files belong in a Bolt-generated Vite or Next app, and how to keep the next prompt from quietly undoing the wiring.
The head is generated code
Bolt wrote index.html from a template, so any later prompt that touches layout or branding can rewrite the icon link tags along with it.
The container is not your host
The WebContainer session is disposable. Icons only become permanent once the project is pushed to GitHub or shipped through Bolt's deploy step.
URL finder for Bolt.new
Paste your Bolt.new preview link or production domain. We'll grab every favicon, let you choose one, and push it back to the generator.
Paste a domain and tap Scan to see every icon we can harvest.
We will open the generator with your selected favicon pre-loaded as the base image.
Playbook
Follow these beats whenever your builder regenerates UI so favicon coverage stays ahead of AI edits.
1Put the files in the static folder
Add the exported icons to /public in Bolt's file tree — that is what a Vite or Next build actually copies into the output.
2Ask for explicit link tags
Tell Bolt to reference each file by path in the document head. Left to itself it tends to inline an SVG or a data URI, which no ICO or Apple touch consumer can use.
3Push before the next prompt
Sync to GitHub or deploy immediately, so the icon set survives a regeneration or a lost browser session.
Checklist
Drop this straight into your deployment doc.
Keep the square master image in the project as well, so the set can be re-exported without hunting for the original.
After any large regeneration prompt, reopen index.html and confirm the icon links still point at files that exist.
Test on the deployed domain, not only inside Bolt's preview pane.
Bolt.new favicon FAQ
Why did my favicon disappear after I prompted Bolt again?
Bolt regenerates whole files rather than patching lines, so a prompt about layout or styling can rewrite the head and drop your icon tags. Push the working version to GitHub first, then diff after each big prompt so you can see exactly what changed.
Where do favicon files go in a Bolt.new project?
In /public, referenced from the document head with root-relative paths like /favicon.ico. Files in /public are served from the site root, so the /public prefix must not appear in the link tag.
Does Bolt's preview show my real favicon?
No — the preview renders in an iframe inside Bolt, so the browser tab keeps showing Bolt's own icon no matter what you set. Open the preview in its own tab, or check the deployed URL, before deciding the icon did not work.
Bolt.new install guide
Add /bolt/favicon-install to project README files, onboarding docs, and launch checklists so nobody skips the favicon step.