---
title: Bolt.new Favicon Install Guide
description: Add a real favicon and app icon set to a Bolt.new project: where files go in the WebContainer, and how to stop the next prompt from overwriting the head.
canonical: https://favicontools.com/bolt/favicon-install
---

# Bolt.new Favicon Install Guide

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.

## Why it matters

- **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.

## Playbook

1. **Put 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.
2. **Ask 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.
3. **Push before the next prompt** — Sync to GitHub or deploy immediately, so the icon set survives a regeneration or a lost browser session.

## Checklist

- 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.

## 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.