Everything you need to add emoji favicons to any website, app, or project. One line of HTML, 3,773 emojis, zero setup.
By @codewitholgun · Last updated: April 9, 2026
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://emojifavicons.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://emojifavicons.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://emojifavicons.com/rocket" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://emojifavicons.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://emojifavicons.com/rocket" type="image/svg+xml">
For dynamic favicons with the JavaScript SDK:
<script src="https://emojifavicons.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://emojifavicons.com/rocket',
apple: 'https://emojifavicons.com/apple-touch-icon/rocket?bg=000000',
},
};
Or in pages/_document.tsx (Pages Router):
<Head>
<link rel="icon" href="https://emojifavicons.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://emojifavicons.com/rocket', type: 'image/svg+xml' }
]
}
}
})
In your layout or <head>:
---
// src/layouts/BaseLayout.astro
---
<html>
<head>
<link rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml" />
</head>
Add to your theme's functions.php:
function emoji_favicon() {
echo '<link rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml">';
}
add_action('wp_head', 'emoji_favicon');
In theme.liquid, add inside <head>:
<link rel="icon" href="https://emojifavicons.com/shopping-bags" type="image/svg+xml">
In your baseof.html layout:
<link rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml">
EmojiFavicons supports 27 CSS-based favicon animations. Animated favicons draw attention in browser tabs, useful for notification indicators, loading states, or branding. The animations are rendered as pure SVG with embedded CSS, so they work without JavaScript and add zero weight to your page bundle. Popular types include pulse, bounce, spin, shake, float, flip, tada, swing, wobble, and heartbeat.
<link rel="icon" href="https://emojifavicons.com/fire?animate=pulse">
<link rel="icon" href="https://emojifavicons.com/rocket?animate=bounce">
<link rel="icon" href="https://emojifavicons.com/star?animate=spin">
EmojiFavicons can overlay a numeric badge (1-99) or a dot indicator on any emoji favicon. This is the same pattern used by iOS and Android for unread counts. Useful for chat apps, email inboxes, dashboards, and any app that signals new activity in the browser tab. The badge is rendered inside the SVG.
<link rel="icon" href="https://emojifavicons.com/bell?badge=5">
<link rel="icon" href="https://emojifavicons.com/envelope?badge=dot">
EmojiFavicons supports automatic dark mode switching. When a user's OS or browser is set to dark mode, the favicon changes to a different emoji. This uses the CSS prefers-color-scheme media query embedded in the SVG. No JavaScript required.
<link rel="icon" href="https://emojifavicons.com/sun?darkmode=moon">
This shows a sun emoji in light mode and automatically switches to a moon in dark mode.
EmojiFavicons can combine up to 10 emojis side by side in a single favicon. Combo emojis are useful for representing multi-concept brands, tech stacks, or compound ideas. Separate emoji names with a plus sign in the URL.
<link rel="icon" href="https://emojifavicons.com/fire+rocket+star">
EmojiFavicons includes 168 hand-crafted pixel art icons in retro 8-bit style. Pixel art favicons are available in 16 named color palettes including retro, neon, cyber, sunset, ocean, and matrix. They support animations (pixel-cycle, pixel-wave, pixel-rain, pixel-glitch) and mirror mode for symmetric designs.
<link rel="icon" href="https://emojifavicons.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://emojifavicons.com/rocket" type="image/svg+xml">
<link rel="icon" href="https://emojifavicons.com/rocket?size=32&png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket?bg=0a0a0a">
<link rel="manifest" href="https://emojifavicons.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://emojifavicons.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://emojifavicons.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://emojifavicons.com/fire" type="image/svg+xml">
<link rel="icon" href="https://emojifavicons.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, emojifavicons.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.