How to Add an Emoji Favicon to Your Website

Add any emoji as your favicon with one HTML tag. 3,773 emojis, SVG under 200 bytes, served from a global edge network. No signup.

<link rel="icon" href="https://emojifavicons.com/fire">

By @codewitholgun · Updated April 2026 · Browse all 3,773

Quick facts: 3,773 emojis · SVG under 200 bytes · 300+ edge locations · 7-day cache · 16 shapes, 27 animations, 18 themes · SVG, PNG, ICO formats · Free, no signup · Works with React, Next.js, Astro, Vue, WordPress, and more

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:

<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.

Tip: Browse all 3,773 emojis on the homepage or search by keyword with the Search API.

Framework Integration

Emoji favicons work with every web framework. Pick yours below for a copy-paste snippet:

Plain HTML

Add to your <head> section. Works in any static HTML file.

<!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>
<body>...</body>
</html>

The apple-touch-icon provides iOS home screen support with a colored background.

React (Vite / CRA)

Replace the default favicon link in index.html:

<!-- index.html -->
<head>
 <link rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml">
</head>

For dynamic favicons (change on events, notifications):

<script src="https://emojifavicons.com/sdk.js"></script>
<script>
 EmojiFavicon.set('rocket'); // set favicon
 EmojiFavicon.animate('fire', 'pulse'); // animated
 EmojiFavicon.notify('bell', 3000); // badge notification
</script>

Next.js (App Router)

In app/layout.tsx:

// app/layout.tsx
export const metadata = {
 icons: {
 icon: 'https://emojifavicons.com/rocket',
 apple: 'https://emojifavicons.com/apple-touch-icon/rocket?bg=000000',
 },
};

Next.js (Pages Router)

In pages/_document.tsx:

import Head from 'next/head';

export default function Document() {
 return (
 <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=000" />
 </Head>
 <body>...</body>
 </Html>
 );
}

Vue 3 (Vite)

In index.html:

<head>
 <link rel="icon" href="https://emojifavicons.com/heart" type="image/svg+xml">
</head>

Nuxt 3

In nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
 app: {
 head: {
 link: [
 { rel: 'icon', href: 'https://emojifavicons.com/heart', type: 'image/svg+xml' },
 { rel: 'apple-touch-icon', href: 'https://emojifavicons.com/apple-touch-icon/heart?bg=0a0a0a' },
 ]
 }
 }
})

Astro

In your base layout file:

---
// src/layouts/BaseLayout.astro
---
<html>
<head>
 <link rel="icon" href="https://emojifavicons.com/star" type="image/svg+xml" />
 <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/star?bg=0a0a0a" />
 <link rel="manifest" href="https://emojifavicons.com/manifest/star?name=My+Site&color=f59e0b" />
</head>
<body>
 <slot />
</body>
</html>

The /manifest/ endpoint generates a full PWA manifest with all icon sizes.

Svelte / SvelteKit

In app.html (SvelteKit) or index.html (Vite):

<!-- app.html -->
<head>
 <link rel="icon" href="https://emojifavicons.com/fire" type="image/svg+xml">
 %sveltekit.head%
</head>

For SvelteKit with dynamic favicons per page, use <svelte:head>:

<svelte:head>
 <link rel="icon" href="https://emojifavicons.com/fire" type="image/svg+xml" />
</svelte:head>

Angular

In src/index.html:

<!doctype html>
<html lang="en">
<head>
 <link rel="icon" href="https://emojifavicons.com/gear" type="image/svg+xml">
</head>

For dynamic changes via TypeScript service:

// favicon.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FaviconService {
 set(emoji: string) {
 const link = document.querySelector("link[rel='icon']") as HTMLLinkElement;
 if (link) link.href = `https://emojifavicons.com/${emoji}`;
 }
}

Remix

In app/root.tsx:

// app/root.tsx
export const links: LinksFunction = () => [
 { rel: "icon", href: "https://emojifavicons.com/rocket", type: "image/svg+xml" },
 { rel: "apple-touch-icon", href: "https://emojifavicons.com/apple-touch-icon/rocket?bg=0a0a0a" },
];

WordPress

Add to your theme's functions.php:

// functions.php
function emoji_favicon() {
 echo '<link rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml">';
 echo '<link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket?bg=ffffff">';
}
add_action('wp_head', 'emoji_favicon');

// Remove default WordPress favicon
function remove_default_favicon() {
 remove_action('wp_head', 'wp_site_icon', 99);
}
add_action('init', 'remove_default_favicon');

This removes the default WordPress favicon and replaces it with the emoji version.

Shopify

In theme.liquid, add inside <head>:

<!-- theme.liquid -->
<head>
 <link rel="icon" href="https://emojifavicons.com/shopping-bags" type="image/svg+xml">
 {{ content_for_header }}
</head>

Place before {{ content_for_header }} to ensure it takes priority over Shopify's default favicon.

Gatsby

In gatsby-ssr.tsx:

// gatsby-ssr.tsx
import type { GatsbySSR } from "gatsby";

export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHeadComponents }) => {
 setHeadComponents([
 <link key="favicon" rel="icon" href="https://emojifavicons.com/rocket" type="image/svg+xml" />,
 <link key="apple-icon" rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket?bg=0a0a0a" />,
 ]);
};

Hugo

In your baseof.html layout:

<!-- layouts/_default/baseof.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>

Eleventy (11ty)

In your base layout (Nunjucks/Liquid):

<!-- _includes/base.njk -->
<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>

Jekyll

In _includes/head.html or your default layout:

<!-- _includes/head.html -->
<head>
 <link rel="icon" href="https://emojifavicons.com/{{ site.emoji | default: 'rocket' }}" type="image/svg+xml">
 <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/{{ site.emoji | default: 'rocket' }}?bg=0a0a0a">
</head>

Set emoji: fire in _config.yml to change it site-wide.

JavaScript SDK (Dynamic Favicons)

For dynamic favicon control (change on events, notifications, animations). Works with any framework. 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 3s)
 EmojiFavicon.notify('bell', 3000);

 // Cycle through emojis
 EmojiFavicon.cycle(['rocket', 'fire', 'star'], 2000);

 // Countdown timer
 EmojiFavicon.countdown('2026-12-31', 'party-popper');

 // Change on blur/focus
 EmojiFavicon.onBlur('sleeping-face');
 EmojiFavicon.onFocus('rocket');

 // Search emojis
 const results = await EmojiFavicon.search('happy');
</script>

The SDK provides 22+ methods for dynamic favicon control. See SDK documentation.

Customization Options

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`
`darkmode`	Any emoji name	`?darkmode=moon`

See full documentation for all 50+ parameters and endpoints.

Advanced Features

Animated Favicons

27 CSS-based animations rendered inside the SVG. No JavaScript, zero page weight. Useful for notification indicators, loading states, or branding.

<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">

Notification Badges

Overlay a numeric badge (1-99) or dot indicator on any emoji. Same pattern as iOS/Android unread counts.

<link rel="icon" href="https://emojifavicons.com/bell?badge=5">
<link rel="icon" href="https://emojifavicons.com/envelope?badge=dot">

Dark Mode Support

Automatic dark/light mode switching using CSS prefers-color-scheme inside the SVG. No JavaScript required.

<link rel="icon" href="https://emojifavicons.com/sun?darkmode=moon">

Combo Emojis

Combine up to 10 emojis side by side in a single favicon. Separate with +.

<link rel="icon" href="https://emojifavicons.com/fire+rocket+star">

Pixel Art Mode

168 hand-crafted pixel art icons in retro 8-bit style. 16 color palettes including retro, neon, cyber, sunset, ocean, and matrix.

<link rel="icon" href="https://emojifavicons.com/pixel/fire?palette=retro">

Browse all icons in the Pixel Gallery.

Favicon Formats

Format	Size	Browser Support	Best For	Usage
SVG (default)	<200 bytes	Chrome, Firefox, Edge, Safari 12+	Modern websites	`/fire`
PNG	~2-5 KB	All browsers	Email signatures, compatibility	`/fire?png`
ICO	~15-20 KB	All including IE	Legacy, Windows desktop	`/fire.ico`

Recommendation: Use SVG (default) for modern websites. Add a PNG fallback for email clients. Use ICO only for IE/legacy support.

Complete Setup (All Platforms)

Copy this snippet for full favicon support across all browsers, mobile, and PWA:

<!-- Complete emoji favicon setup -->
<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">

Troubleshooting

Favicon Not Showing

Clear browser cache - Hard refresh: Ctrl+Shift+R (Cmd+Shift+R on Mac).
Check the link tag - Must be in <head>, not <body>.
Remove old favicon.ico - Browsers may prefer a favicon.ico in your root directory.
Check the emoji name - Visit https://emojifavicons.com/your-emoji-name directly. Use the Search API to find correct names.
Safari requires PNG - Add a PNG fallback: <link rel="icon" href="/fire?png" type="image/png">
Use the checker - Run your site through the Favicon Health Checker.

Safari Compatibility

Safari has limited SVG favicon support. 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">

API Integration

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 full API documentation for all 50+ endpoints, or integrate via OpenAPI 3.1, AI Skill Manifest, or ChatGPT Plugin.

Frequently Asked Questions

Is the emoji favicon service free?

Yes, available without signup 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 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.

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.

Can I self-host the emoji favicons?

Yes. Use the download endpoint to get a ZIP with all sizes (SVG, PNG 16/32/180/512, ICO). You can also use the sprite sheet endpoint to download all emojis at once.