Every Caffeine app has its own icon. It identifies your project inside the builder, and it is also the favicon — the small image shown in the browser tab — of your published app. A recognisable icon makes your app look finished and helps your users find its tab among many.
What the app icon is
The app icon is a single square image that represents your project. It appears in the project header inside the Caffeine builder, and every deployed version of your app — draft and live — serves it as the app's favicon.
You never start without one. Until you set an icon, Caffeine automatically creates a simple placeholder from your app's name: the initials of the name on a coloured background. The colour is derived from the name, so it stays consistent for your project, and the draft version uses a softer shade of the same colour than the live version so the two are easy to tell apart.
You do not need to add favicon files to your app's code, and you should not ask the AI to create them. The icon is managed by Caffeine outside your app's code, so it survives rebuilds and stays consistent everywhere it appears.
How to set your icon
Open your project's Settings and find the App icon section. You have two options:
- Generate with AI — Caffeine designs an icon for your app based on what your app does. Generation costs 1 credit and takes a moment; the new icon appears as soon as it is ready.
- Upload — use your own image. JPEG, PNG, WebP, and GIF are supported, up to 2MB. A square image works best.
You can also Download the current icon, for example to reuse it in marketing material.
The icon takes effect in your published app the next time it is deployed: the next build updates your draft, and the next Go live (or Push version update) updates your live app.
How the favicon works
When Caffeine deploys your app, it serves your project icon alongside the app and points the app's pages at it as the favicon. This happens automatically on every deploy:
- If your app's code sets its own favicon (many code templates include a default one), the project icon replaces it.
- If your app has no favicon at all, the project icon is added.
The icon is served from a reserved area of your app's address, under the /__meta/ path. This path belongs to the platform — see the FAQ below for why your app should not create its own files there.
Frequently asked questions
How do I change my published app's favicon?
Set the icon you want in Settings → App icon (generate or upload), then deploy: rebuild for the draft, or push a version update for the live app. The favicon always follows the project icon — there is no separate favicon setting.
I changed the icon, but the browser tab still shows the old one. Why?
Two things must happen before the new icon shows up in a tab. First, the app must be deployed again — the icon is applied at deploy time, so a change in Settings does not update an already-published version. Second, browsers cache favicons aggressively; even after a new deploy, it can take a reload or a fresh browser session before the tab picks up the new image.
Can I use my own favicon file instead?
Yes — upload it as the app icon in Settings → App icon. Uploading it there is the supported way to bring your own image. Adding favicon files to the app's code doesn't work: the project icon replaces the app's own favicon at deploy time.
Why did my deploy fail after I asked the AI to add a favicon at /__meta/icon.svg?
The /__meta/ path in your app's address space is reserved for files the platform serves, including the project icon. If your app's code creates its own files there, they collide with the platform's files and the deploy can fail with an asset conflict error. Remove any files your app creates under /__meta/ and set your icon in Settings → App icon instead. See When Deployments Fail if a later deploy still gets rejected.
Does the draft use the same icon as the live app?
Yes. Once you set an icon, both the draft and the live version use it. Only the automatic initials placeholder differs between the two — the draft's placeholder uses a softer shade so you can tell draft and live tabs apart before an icon is set.
Is this the same icon as my App Market listing?
By default, yes — if you do nothing, your App Market listing and your app icon use the same artwork. They don't have to stay the same, though: the listing artwork can be set separately when you publish to the market, without affecting the app icon in the builder header and the browser tab of your published app.