---
title: Firebase Studio Favicon Install Guide
description: Add favicons in Firebase Studio: generate the files into the cloud workspace, wire the head, and verify the in-IDE preview and the App Hosting deploy both serve them.
canonical: https://favicontools.com/firebase-studio/favicon-install
---

# Firebase Studio Favicon Install Guide

Firebase Studio is a cloud workspace with an AI agent, a live in-IDE preview, and a path straight to App Hosting. That means two different URLs cache your favicon independently, the way a Lovable preview and its production deploy do. Generate the real files into the cloud workspace, wire the head, and check the preview and the deployed site separately before you call it done.

## Why it matters

- **Preview and production are two caches** — The in-IDE preview URL and your App Hosting domain serve and cache icons separately. Fixing one and checking the other is how a blank tab survives to launch.
- **Commit to the connected repo** — Firebase Studio workspaces sync to git. Icons that only exist in the workspace can vanish on a rebuild. Commit them so App Hosting deploys pull the same files.

## Playbook

1. **Generate the files into the workspace** — Export the full kit and place it in the project's static directory inside the workspace, so the agent wires around files that actually exist there.
2. **Ask the agent to wire the head** — Have it reference the icons in the document head and manifest following the framework's convention, and only that, so a broad prompt doesn't wander into a layout change.
3. **Check both URLs** — Load the in-IDE preview and the deployed App Hosting site in a private window. They cache icons independently, so a fix on one proves nothing about the other.

## Checklist

- Commit the exported icons to the connected repo so an App Hosting rebuild keeps them.
- Verify the App Hosting domain, not just the preview, serves the new icon.
- Confirm favicon.ico resolves at the deployed site root for crawlers that request it by path.

## FAQ

### Can Firebase Studio's agent create the favicon image?

No. The agent edits files and runs commands in the workspace but cannot render image bytes. Generate the icons with a real tool, add them to the workspace, and let the agent handle the head and manifest wiring.

### The preview shows the new icon but the live site doesn't. Why?

The in-IDE preview and the App Hosting deployment are different URLs with independent caches. Confirm the icons were committed and deployed, then load the production domain in a private window rather than trusting the preview.

### Why did my icons disappear after a rebuild?

Files that lived only in the workspace and were never committed don't survive a fresh build. Commit the icon set to the connected repository so every App Hosting deploy includes it.