# Complete Guide to Emoji Favicons - Add Emoji Icons to Any Website (2026) # Complete Guide to Emoji Favicons Everything you need to add emoji favicons to any website, app, or project. One line of HTML, 3,773 emojis, zero setup. ## Quick Start Add an emoji favicon to your website in under 60 seconds. No design tools, no image files, no signup needed. Just add one HTML tag: `` Replace `fire` with any emoji name: `rocket`, `heart`, `star`, `globe`, `sparkles`, or any of 3,773 Unicode emojis. The favicon is served as a lightweight SVG (under 200 bytes) from 300+ edge locations worldwide. Tip: Browse all 3,773 emojis on the [homepage](/) or search by keyword with the [Search API](/api/search?q=fire). ## Customization Options Customize your emoji favicon with URL parameters. All parameters are optional and can be combined: `` | Parameter | Values | Example | | --- | --- | --- | | size | 16-512 (pixels) | ?size=64 | | bg | Hex color (no #) | ?bg=1a1a2e | | shape | 16 shapes: circle, hexagon, shield, star, heart, diamond... | ?shape=circle | | animate | 27 animations: pulse, bounce, spin, shake, float, flip... | ?animate=pulse | | theme | 18 themes: github-dark, vercel, tailwind, react, vue... | ?theme=github-dark | | gradient | 12 presets or custom hex pair | ?gradient=sunset | | badge | 1-99 or "dot" | ?badge=3 | See [full documentation](/docs) for all 50+ parameters and endpoints. ## Framework Integration Guides Emoji favicons work with every web framework. Here are copy-paste snippets for popular frameworks: ### HTML Add to your `` section: ` ` ### React (Create React App / Vite) In your `index.html`: ` ` For dynamic favicons with the JavaScript SDK: ` ` ### Next.js In `app/layout.tsx` (App Router): `export const metadata = { icons: { icon: 'https://emoji.findutils.com/rocket', apple: 'https://emoji.findutils.com/apple-touch-icon/rocket?bg=000000', }, };` Or in `pages/_document.tsx` (Pages Router): ` ` ### Vue / Nuxt In `index.html` (Vue) or `nuxt.config.ts` (Nuxt): `// nuxt.config.ts export default defineNuxtConfig({ app: { head: { link: [ { rel: 'icon', href: 'https://emoji.findutils.com/rocket', type: 'image/svg+xml' } ] } } })` ### Astro In your layout or ``: `--- // src/layouts/BaseLayout.astro --- ` ### WordPress Add to your theme's `functions.php`: `function emoji_favicon() { echo ''; } add_action('wp_head', 'emoji_favicon');` ### Shopify In `theme.liquid`, add inside ``: `` ### Hugo In your `baseof.html` layout: `` ## Advanced Features ### Animated Favicons Add eye-catching animations to your favicon. 27 animation types available: ` ` ### Notification Badges Show a count badge on your favicon (great for chat apps, inboxes, dashboards): ` ` ### Dark Mode Support Show different emojis based on the user's color scheme preference: `` This shows a sun emoji in light mode and automatically switches to a moon in dark mode. ### Combo Emojis Combine up to 10 emojis side by side: `` ### Pixel Art Mode Get retro 8-bit pixel art versions of any emoji with 16 color palettes: `` Browse all 170+ pixel art icons in the [Pixel Gallery](/pixel). ## Favicon Formats Explained Emoji favicons support three output formats. Here is when to use each: | Format | Size | Browser Support | Best For | How to Use | | --- | --- | --- | --- | --- | | SVG (default) | <200 bytes | Chrome, Firefox, Edge, Safari 12+ | Modern websites, smallest size | /fire or /fire?svg | | PNG | ~2-5 KB | All browsers | Maximum compatibility, email signatures | /fire?png | | ICO | ~15-20 KB | All browsers including IE | Legacy support, Windows desktop | /fire.ico or /fire?format=ico | Recommendation: Use SVG (default) for modern websites. Add a PNG fallback for email clients. Use ICO only if you need IE/legacy support. ## Favicon Sizes Reference Different platforms expect different favicon sizes. Here is the complete reference: | Platform | Size | Format | Usage | | --- | --- | --- | --- | | Browser tab | 16x16, 32x32 | SVG, PNG, ICO | /fire?size=32 | | iOS home screen | 180x180 | PNG | /apple-touch-icon/fire | | Android Chrome | 192x192, 512x512 | PNG | Via /manifest/fire | | Windows tile | 150x150, 310x310 | PNG | /fire?size=310&png | | macOS Safari pinned tab | Any | SVG | /fire?svg | | Social media / OG image | 1200x630 | SVG | /fire?og=true | Use the [download endpoint](/download/fire) to get a ZIP package with all sizes pre-generated. ## PWA & Mobile Support Emoji favicons include full PWA (Progressive Web App) and mobile support: ` ` The `/manifest/` endpoint auto-generates a complete `manifest.json` with all icon sizes for PWA install. ## JavaScript SDK For dynamic favicon control, use the JavaScript SDK (43 lines, no dependencies): ` ` The SDK provides 22+ methods for dynamic favicon control. See [SDK documentation](/docs#sdk). ## Troubleshooting ### Favicon Not Showing If your emoji favicon does not appear: - **Clear browser cache** - Browsers cache favicons aggressively. Hard refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac). - **Check the link tag** - Make sure `rel="icon"` is in your ``, not ``. - **Remove old favicon.ico** - If you have a `favicon.ico` in your root directory, browsers may prefer it over the link tag. - **Check the emoji name** - Visit `https://emoji.findutils.com/your-emoji-name` directly. If you get a 404, try the [Search API](/api/search?q=fire) to find the correct name. - **Safari requires PNG** - Safari does not always display SVG favicons in the tab. Add a PNG fallback: `` - **Use the checker** - Run your site through the [Favicon Health Checker](/check) for a complete diagnostic. ### Safari Compatibility Safari has limited SVG favicon support. For best results on Safari, add both SVG and PNG: ` ` ### Cross-Origin Issues Emoji favicons are served with proper CORS headers and work cross-origin. If you see CORS errors, ensure you are using `https://` (not `http://`). ## API Integration For programmatic use, emoji.findutils.com offers a full REST API: Search API Search emojis by name or keyword. Returns up to 20 results. `GET /api/search?q=fire` Suggest API Get emoji suggestions for a topic or URL. `GET /api/suggest?text=cooking+blog` All Emojis Full catalog of 3,773 emojis with categories. `GET /api/emojis` Color Palette Extract dominant colors from any emoji. `GET /api/palette/fire` See the [full API documentation](/docs) for all 50+ endpoints, or integrate via [OpenAPI 3.1](/openapi.yaml), [AI Skill Manifest](/skill.json), or [ChatGPT Plugin](/.well-known/ai-plugin.json). ## Frequently Asked Questions ### Is the emoji favicon service free? Yes, completely free with no signup, no API key, and no usage limits for normal use. Rate limited at 300 requests per minute per IP. ### How fast are emoji favicons served? SVG favicons are under 200 bytes and served from 300+ edge locations. After the first request from your region, responses come from cache with zero origin latency (typically under 5ms). ### Can I use emoji favicons in production? Yes. The service is built on a global edge network with 99.9%+ uptime. CDN cache ensures your favicon loads even during origin maintenance. Many production websites use emoji favicons. ### Do emoji favicons affect my site's SEO? Yes, positively. Google displays favicons in search results. An emoji favicon is distinct and recognizable, potentially improving click-through rates. The SVG format is fast-loading which helps Core Web Vitals. ### Can I self-host the emoji favicons? Yes. Use the [download endpoint](/download/fire) to get a ZIP with all sizes (SVG, PNG 16/32/180/512, ICO). Then host the files yourself. You can also use the [sprite sheet](/sprite) endpoint to download all emojis at once. ### How many emojis are available? All 3,773 standard Unicode emojis are available, searchable by 11,550 keywords. This includes smileys, people, animals, food, travel, activities, objects, symbols, and flags. Share: [](https://x.com/intent/tweet?text=Check%20out%20emoji.findutils.com%20-%20Free%20emoji%20favicon%20service!%20One%20link%20tag%2C%20any%20emoji.%20&url=https://emoji.findutils.com) [](https://www.linkedin.com/sharing/share-offsite/?url=https://emoji.findutils.com) [](https://www.facebook.com/sharer/sharer.php?u=https://emoji.findutils.com) [](https://www.reddit.com/submit?url=https://emoji.findutils.com&title=Emoji+Favicon+Service+-+Any+emoji+as+your+site+favicon) [](https://www.tiktok.com/@findutils) --- *Source: [emoji.findutils.com](https://emoji.findutils.com)*