Emoji Favicon for React
Add an emoji favicon to any React app — Create React App, Vite + React, or bespoke. Works with every bundler.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to React
Edit index.html (Vite / CRA)
Open index.html in the project root (Vite) or public/index.html (CRA).
Replace the favicon link tags
Find the existing <link rel="icon"> and swap in the emoji URL. Add apple-touch-icon for iOS.
<!-- index.html --> <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" />
Hard-refresh
Cmd/Ctrl + Shift + R in the browser. Delete any old public/favicon.ico if it exists.
Popular emoji favicons for React
Click any emoji to see the React-specific install snippet.
Troubleshooting
CRA still showing React logo favicon
Delete public/favicon.ico, public/logo192.png, and public/logo512.png, then rebuild.
Vite HMR not updating favicon
HMR does not update <link> tags. Hard-refresh the page.
Favicon blocked by CSP
Add img-src 'self' https://emojifavicons.com to your Content-Security-Policy.
React Helmet not rendering the link
Helmet must wrap in <Helmet><link ... /></Helmet>. The rel="icon" must be on a <link>, not a <meta>.
Build output missing the favicon
Make sure it is in index.html (the HTML template), not inside a React component.
Frequently asked questions
Does it work with react-router-dom?
Yes. React Router only controls in-app navigation; the favicon lives in the HTML shell.
Can I set it dynamically with React Helmet?
Yes: <Helmet><link rel="icon" href={url} /></Helmet>. Helmet updates <head> at runtime.
Does it work with server-side rendering (SSR)?
Yes. The <link> tag ships in the initial HTML from your SSR server.
Will TypeScript complain?
No. It is plain HTML, typed loosely by @types/react.
What about React Native?
React Native apps do not have a favicon (no browser). Use the emoji as your app icon instead.
Does it work with Preact / SolidJS?
Yes — same <link rel="icon"> tag works in any HTML-rendering framework.