How to add a favicon with ChatGPT
ChatGPT can help you add favicon files when you give it the file names, project framework and the exact browser paths you expect.
Create the favicon pack
Use Faviqon to export your favicon pack first. The main file to add is favicon.ico.
For most website projects, favicon.ico should be placed in the public or static asset folder so it is available at /favicon.ico.
Prompt to paste into ChatGPT
Paste this prompt into ChatGPT with your project context. If you are using ChatGPT with file access, include the favicon ZIP or the extracted favicon files.
ChatGPT prompt
Help me add a favicon to my website project.
I have a favicon pack that includes favicon.ico. Please tell me exactly where to place the files and what code to change for my framework.
Requirements:
- favicon.ico must be served from /favicon.ico.
- If the project has a public folder, use public/favicon.ico.
- If these files are available, also add them to the same public/static asset folder:
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- Update the app's head, layout or metadata so browsers load the favicon.
- Do not rename the files unless the framework requires it.
Use these links where appropriate:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Please give me the exact files to edit, the code to add, and the steps to verify that the browser tab icon works.Verify the favicon
After adding the files, open /favicon.ico directly in the browser. If it loads, the main favicon file is in the right place.
Then hard refresh the site or open a private window, because browsers often cache favicons longer than normal page assets.