How to add a favicon with Codex
Codex can wire favicon files into your project quickly when the prompt names the exact files, target folder and expected browser paths.
Prepare the files
Download the favicon pack from Faviqon and keep the filenames unchanged. The important file is favicon.ico, and the supporting PNG and manifest files improve compatibility.
In many frameworks, the correct destination is public/favicon.ico so the file is served at /favicon.ico.
Prompt to paste into Codex
Paste this into Codex from the root of your project. Attach or place the favicon files in the workspace first if your environment supports file upload.
Add the favicon files from my favicon pack to this website.
Requirements:
- Add favicon.ico so it is served at /favicon.ico.
- If this project has a public folder, place favicon.ico at public/favicon.ico.
- Also add the supporting files if available: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest.
- Update the app's head, layout or metadata so browsers use /favicon.ico.
- Include Apple Touch icon and manifest links when the files exist.
- Do not remove unrelated metadata or refactor unrelated code.
Expected HTML links if this is a standard web app:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
After the change, run the existing lint/build checks if available and tell me exactly which files changed.Verify in the browser
Open /favicon.ico directly in the browser. If it loads, the file is in the right public location.
Then open the site in a new private window or hard refresh the tab to check that the browser tab icon updates.