Add a high-resolution favicon — Claude Code
Google now shows favicons next to mobile search results. A missing or blurry favicon looks amateur next to competitors and drops CTR.
Fixing this in Claude Code
Anthropic's official terminal coding agent
Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code chat and the fix rolls out across the project in one pass.
Using a different tool? Pick your stack:
The prompt for Claude Code
Copy and paste this into your Claude Code chat exactly as-is.
Run Claude Code in the project root and make these exact changes, scanning the whole codebase first: Add a favicon 1. Add a favicon.ico file to /public/. 2. Also add <link rel="icon" href="/favicon.ico"> in <head>.
Why this matters
Google SERP on mobile shows a favicon next to each result. No favicon = a generic globe icon, which looks untrustworthy next to branded competitors.
Browsers show the favicon in the tab. Without one, users see a blank sheet, and bookmarks have no visual identifier — harder to re-find your site.
How to use this prompt in Claude Code
- 1. Open your Claude Code project.
- 2. Copy the prompt above with the copy button.
- 3. Paste into the Claude Code chat and send.
- 4. Review the diff, accept the changes, redeploy.
- 5. Verify the fix using the checklist below.
Common mistakes to avoid
- error_outlineShipping only a 16×16 favicon — looks blurry on Retina displays and in Google SERP.
- error_outlineUsing a photo as favicon — does not read at small sizes.
- error_outlineForgetting the Apple touch icon (180×180) — iOS home-screen icon falls back to a scaled-down version.
How to verify the fix worked
- check_circleCheck `favicon.ico` at the root returns 200.
- check_circleGoogle SERP (site:yoursite.com on mobile) shows your favicon, not the globe.
- check_circleBookmark the page and check the bookmark icon is correct.
Frequently asked questions
ICO or PNG?expand_more
When does Google show favicons?expand_more
Want all 34 prompts tailored to your Claude Code site?
Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.
Scan my siteRelated Claude Code prompts
Add a 1200×630 Open Graph image — Claude Code
Prompt to create and reference a properly-sized og:image so your link previews look professional on LinkedIn, Slack, WhatsApp, X.
SEOAdd Open Graph + Twitter Card tags — Claude Code
Prompt to add og:title, og:description, og:image, and Twitter Card meta so links look right when shared on Slack, LinkedIn, WhatsApp, Twitter.
TechnicalAdd the viewport meta tag — Claude Code
Prompt to add the mobile-friendly viewport meta tag — required for Google mobile-first indexing.
TechnicalSet the lang attribute on <html> — Claude Code
Prompt to add lang="en" or lang="de" to the <html> tag for accessibility and SEO.