Everything you need to add emoji favicons to any website, app, or project. One line of HTML, 3,773 emojis, zero setup.
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:
<link rel="icon" href="https://emoji.findutils.com/fire">
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.
Customize your emoji favicon with URL parameters. All parameters are optional and can be combined:
<link rel="icon" href="https://emoji.findutils.com/fire?size=64&bg=1a1a1a&shape=circle&animate=pulse">
| 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 for all 50+ parameters and endpoints.
Emoji favicons work with every web framework. Here are copy-paste snippets for popular frameworks:
Add to your <head> section:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://emoji.findutils.com/apple-touch-icon/rocket?bg=0a0a0a">
</head>
In your index.html:
<!-- Replace the default favicon link in public/index.html -->
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml">
For dynamic favicons with the JavaScript SDK:
<script src="https://emoji.findutils.com/sdk.js"></script>
<script>
EmojiFavicon.set('rocket');
// Change on events:
EmojiFavicon.set('check-mark'); // on success
EmojiFavicon.animate('fire', 'pulse'); // animated
EmojiFavicon.notify('bell', 3000); // notification badge
</script>
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):
<Head>
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml" />
</Head>
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' }
]
}
}
})
In your layout or <head>:
---
// src/layouts/BaseLayout.astro
---
<html>
<head>
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml" />
</head>
Add to your theme's functions.php:
function emoji_favicon() {
echo '<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml">';
}
add_action('wp_head', 'emoji_favicon');
In theme.liquid, add inside <head>:
<link rel="icon" href="https://emoji.findutils.com/shopping-bags" type="image/svg+xml">
In your baseof.html layout:
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml">
Add eye-catching animations to your favicon. 27 animation types available:
<link rel="icon" href="https://emoji.findutils.com/fire?animate=pulse">
<link rel="icon" href="https://emoji.findutils.com/rocket?animate=bounce">
<link rel="icon" href="https://emoji.findutils.com/star?animate=spin">
Show a count badge on your favicon (great for chat apps, inboxes, dashboards):
<link rel="icon" href="https://emoji.findutils.com/bell?badge=5">
<link rel="icon" href="https://emoji.findutils.com/envelope?badge=dot">
Show different emojis based on the user's color scheme preference:
<link rel="icon" href="https://emoji.findutils.com/sun?darkmode=moon">
This shows a sun emoji in light mode and automatically switches to a moon in dark mode.
Combine up to 10 emojis side by side:
<link rel="icon" href="https://emoji.findutils.com/fire+rocket+star">
Get retro 8-bit pixel art versions of any emoji with 16 color palettes:
<link rel="icon" href="https://emoji.findutils.com/pixel/fire?palette=retro">
Browse all 170+ pixel art icons in the Pixel Gallery.
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 |
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 to get a ZIP package with all sizes pre-generated.
Emoji favicons include full PWA (Progressive Web App) and mobile support:
<!-- Complete favicon setup for all platforms -->
<link rel="icon" href="https://emoji.findutils.com/rocket" type="image/svg+xml">
<link rel="icon" href="https://emoji.findutils.com/rocket?size=32&png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="https://emoji.findutils.com/apple-touch-icon/rocket?bg=0a0a0a">
<link rel="manifest" href="https://emoji.findutils.com/manifest/rocket?name=My+App&color=3b82f6">
The /manifest/ endpoint auto-generates a complete manifest.json with all icon sizes for PWA install.
For dynamic favicon control, use the JavaScript SDK (43 lines, no dependencies):
<script src="https://emoji.findutils.com/sdk.js"></script>
<script>
// Set favicon
EmojiFavicon.set('rocket');
// Animated favicon
EmojiFavicon.animate('fire', 'pulse');
// Notification badge (auto-removes after 3 seconds)
EmojiFavicon.notify('bell', 3000);
// Cycle through emojis
EmojiFavicon.cycle(['rocket', 'fire', 'star'], 2000);
// Countdown timer
EmojiFavicon.countdown('2026-12-31', 'party-popper');
// Search emojis
const results = await EmojiFavicon.search('happy');
// Change on blur/focus
EmojiFavicon.onBlur('sleeping-face');
EmojiFavicon.onFocus('rocket');
</script>
The SDK provides 22+ methods for dynamic favicon control. See SDK documentation.
If your emoji favicon does not appear:
rel="icon" is in your <head>, not <body>.favicon.ico in your root directory, browsers may prefer it over the link tag.https://emoji.findutils.com/your-emoji-name directly. If you get a 404, try the Search API to find the correct name.<link rel="icon" href="/fire?png" type="image/png">Safari has limited SVG favicon support. For best results on Safari, add both SVG and PNG:
<link rel="icon" href="https://emoji.findutils.com/fire" type="image/svg+xml">
<link rel="icon" href="https://emoji.findutils.com/fire?png&size=32" type="image/png" sizes="32x32">
Emoji favicons are served with proper CORS headers and work cross-origin. If you see CORS errors, ensure you are using https:// (not http://).
For programmatic use, emoji.findutils.com offers a full REST API:
Search emojis by name or keyword. Returns up to 20 results.
GET /api/search?q=fire
Get emoji suggestions for a topic or URL.
GET /api/suggest?text=cooking+blog
Full catalog of 3,773 emojis with categories.
GET /api/emojis
Extract dominant colors from any emoji.
GET /api/palette/fire
See the full API documentation for all 50+ endpoints, or integrate via OpenAPI 3.1, AI Skill Manifest, or ChatGPT Plugin.
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.
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).
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.
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.
Yes. Use the download endpoint 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 endpoint to download all emojis at once.
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.