Emoji Favicon for Astro
Astro favicons live in your shared <head>. Add the emoji URL to your base layout.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Astro
Open src/layouts/BaseLayout.astro (or your main layout)
Find the <head> block.
Add the favicon tags
Paste these inside <head>. Remove any existing favicon.ico reference.
--- // BaseLayout.astro --- <head> <link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" /> <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" /> </head>
Delete public/favicon.svg
If Astro’s starter left a public/favicon.svg, delete it so the external URL wins.
Popular emoji favicons for Astro
Click any emoji to see the Astro-specific install snippet.
Troubleshooting
View transitions showing old favicon
View transitions persist the tab icon. Hard-refresh once.
Astro Content Collections interfering
Content Collections only affect page data, not the favicon in the layout.
Static output missing the link
Make sure the favicon tags are in the .astro layout, not inside a hydrated island.
SSR adapter stripping URLs
Adapters (Vercel, Netlify, Cloudflare) pass the <link> through untouched.
Tailwind purging the preload
Tailwind does not touch <link> tags. This is not a Tailwind issue.
Frequently asked questions
Does it work with Astro Islands?
Yes. Islands are scoped to body content; the favicon is in the shared head.
Does it work with the Cloudflare adapter?
Yes, it works with every official adapter.
Can I use View Transitions?
Yes. Put the favicon in the persistent layout (not a per-page one) so transitions do not replace it.
Does it work with Astro Starlight docs?
Yes — add via the Starlight head option in astro.config.mjs.
Does the SVG favicon work in Firefox and Edge?
Yes. All evergreen browsers support SVG favicons natively.