View .md
WordPress Tutorial

Emoji Favicon for WordPress

Add an emoji favicon to your WordPress site in 60 seconds. No plugin, no image upload, no Media Library clutter — just a single line in your theme.

rocket favicon preview
<link rel="icon" href="https://emojifavicons.com/rocket">

How to add an emoji favicon to WordPress

1

Open your theme’s functions.php

Go to Appearance › Theme File Editor (or edit via FTP/SFTP). Open functions.php in your active theme or child theme.

2

Add the favicon hook

Paste this snippet at the end of functions.php. Replace rocket with any emoji name.

add_action('wp_head', function () {
	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">';
});
3

Save and hard-refresh

Save the file, then visit your site and hard-refresh (Cmd/Ctrl + Shift + R). The new favicon shows in the tab immediately.

4

Override the WordPress Site Icon (optional)

If WordPress is still serving its Site Icon from Customizer, remove it in Appearance › Customize › Site Identity, then clear your Site Icon.

Popular emoji favicons for WordPress

Click any emoji to see the WordPress-specific install snippet.

Troubleshooting

Favicon does not update

WordPress aggressively caches the favicon. Hard-refresh, or append ?v=2 to the URL to bust the cache.

Site Icon from Customizer still showing

Remove the Site Icon in Appearance › Customize › Site Identity to let your functions.php hook take over.

Child theme not loading

Confirm the child theme is activated. Paste the snippet into the child theme’s functions.php, not the parent.

Security plugin strips inline HTML

Whitelist emojifavicons.com in Wordfence / iThemes Security rules, or use wp_enqueue_scripts with a small shortcode wrapper.

Dark-mode tab looks wrong

Append ?bg=1a1a1a or use two <link> tags with media="(prefers-color-scheme: ...)".

Frequently asked questions

Will this slow down my site?

No. The favicon is a single SVG under 1KB served from a global edge network. It ships in the same round trip browsers already make.

Does this work on WordPress.com (hosted)?

Only on Business plan or higher where you have theme editing. WordPress.com Free / Personal / Premium do not allow functions.php edits.

Can I use this in WooCommerce?

Yes — WooCommerce runs on WordPress and respects the same wp_head hook.

Does it work with caching plugins?

Yes. WP Rocket, W3 Total Cache, and LiteSpeed all emit the <link> tag verbatim.

Do I need an Apple Touch Icon for iOS home-screen?

Yes. The snippet includes one — apple-touch-icon — served as a rounded PNG at 180x180.

What if I switch themes?

Move the snippet to your new theme’s functions.php, or use a site-wide plugin like Code Snippets to keep it theme-independent.

Try another framework

Browse all 3,773 emoji favicons →