Your Clicks, Our Hype
Favicon Generator
Make a favicon from text or an emoji — a complete set of PNG sizes plus the HTML code, generated free in your browser. No upload, nothing leaves your device.
800
58%
82%
Tip: emojis already have their own colours, so a transparent or soft background usually looks best.
Text colour
#ffffffBackground
#16a34a
Large preview (shown at 128px, rendered at 256px)
64px
32px actual
16px actual
your-site tab — this is how it appears in a real browser tab
Always judge a favicon at 16px: if the letters are not readable there, make them bolder or bigger.
⬇️ Download your favicon set
Every size a modern site needs — rendered fresh from your design above when you click.
File names match the HTML snippet below, so you can upload the whole set to your site's root folder (or a /favicons/ folder) and paste the code as-is.
🧩 HTML code for your site
Paste this into the <head> of your site. It covers browsers, iPhones/iPads and Android home screens.
How to add a favicon in WordPress
- The easy way (recommended): in WordPress go to Appearance → Customise → Site Identity → Site Icon and upload the 512×512 PNG from this generator. WordPress automatically creates every smaller size for you — this is all most blogs need.
- Using the full set: if you want the exact files above, upload them via your host's file manager or FTP to your site's root (or a /favicons/ folder), then paste the HTML snippet into your theme's
header.phpjust before</head>— ideally in a child theme so updates don't wipe it. - With Rank Math: Rank Math does not replace the Site Icon setting — it reads the same WordPress Site Icon. If you add the snippet manually, some themes/plugins (Rank Math included) can also inject head code via their settings or a header/footer code feature; use either the Site Icon upload or the manual snippet, not both, to avoid duplicate tags.
- Check it worked: hard-refresh your site (Ctrl/Cmd + Shift + R). Favicon caching is stubborn — if the old icon still shows, open your favicon file URL directly in a private window to confirm the new file is live.
Good favicon rules: one or two bold characters beat a shrunken logo, contrast matters more than detail, and always check the 16px preview — that tiny square is what people actually see in tabs, bookmarks and search results.