How to add a favicon with Claude
If you use Claude to edit your website, give it the favicon files and a precise prompt so it places favicon.ico in the right folder and wires up the page head.
Export favicon.ico first
Create your favicon in Faviqon and download the ZIP. At minimum, you need the file named favicon.ico.
For most web apps, favicon.ico should be added to the public or static asset folder so it is available at /favicon.ico.
Prompt to paste into Claude
Upload or provide the favicon ZIP, then paste this prompt. It asks Claude to add favicon.ico without renaming it and to use the standard icon references.
I have a favicon pack for this website. Please add it to the project correctly.
Use favicon.ico as the main browser favicon. Put favicon.ico in the public/static asset folder so it is served from /favicon.ico.
If the project has a public folder, add:
- public/favicon.ico
- public/favicon-16x16.png
- public/favicon-32x32.png
- public/apple-touch-icon.png
- public/android-chrome-192x192.png
- public/android-chrome-512x512.png
- public/site.webmanifest
Then update the app's HTML head or framework metadata so the site includes:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Do not rename the favicon files unless the existing framework requires it. After changing the code, tell me which files you edited and how to test that the browser tab icon appears.Check the result
Run the app locally, open it in a browser, and hard refresh. Favicons are cached aggressively, so a private window can help confirm the new icon is loading.
Inspect the page source or network panel if the tab icon does not update. The key path to check is /favicon.ico.