Turn your initials, emoji, or logo into a complete, blog-platform-ready favicon set in under a minute. WordPress, Ghost, Substack, Blogger, and Hugo — all covered.
The favicon is the smallest piece of branding on your blog and the one that shows up in the most places. It rides next to your blog title in every browser tab a reader has open, in every bookmark folder, in mobile search results, and on the home screens of readers who install your blog as a PWA. If your blog is still showing the default WordPress "W", the Ghost ghost, or the Substack "S", you are wearing someone else's branding.
For bloggers — especially newer ones competing for attention with established sites — a clean, custom favicon does three things. It makes you look like a real publication instead of a side project. It earns clicks in mobile search results, where Google places your favicon directly to the left of your title. And it gives you a consistent visual signature across every social embed, RSS reader, and bookmark, which is exactly the surfaces that drive repeat visits.
Generate your blog favicon set now
Text, emoji, or image upload → ZIP with all sizes + manifest.json
Try the Favicon Generator →You don't have a logo yet, and you shouldn't be paying a designer before you've published your first ten posts. Pick the first letter of your blog name, choose an accent color that matches your theme, and you have a favicon that looks intentional — not default — across every browser, RSS reader, and mobile search result. You can swap it for a real logo months later when the blog has earned the investment.
Self-hosting is the moment your blog gets its own visual identity. The generator outputs everything you need for a custom domain on Ghost, WordPress, or Hugo — including the apple-touch-icon that iOS uses when readers add your blog to their home screen, which neither Medium nor Substack ever let you customize.
If you launched in 2018 and never replaced the placeholder icon, you've shipped thousands of browser tabs branded as "some WordPress blog". Drop in a 512×512 logo and the generator produces the entire modern set — including the larger sizes that Google's mobile crawler started preferring after the 2024 favicon spec update.
If you operate a small network — a parenting blog, a finance blog, and a travel blog under one umbrella — generate a distinct favicon for each domain in one session. Use the same shape with three accent colors, and readers learn to recognize your network at a glance in their tab bar.
RSS readers and aggregators pull your favicon as the visual identity for your feed in their subscription lists. A generic icon means your blog looks the same as every other unbranded feed in a reader's library. The 192×192 PNG from the generated set is the size most readers cache, and shipping it before you submit can be the difference between getting clicked on and getting buried.
The single favicon.ico era is over. Here is what the generator outputs and where each file actually goes:
Easiest path: Appearance → Customize → Site Identity → Site Icon, upload the 512×512 PNG from the ZIP. WordPress will generate smaller sizes itself. For full control over the apple-touch-icon and manifest, upload the whole ZIP via FTP to your theme root and paste the link tags from the generator into header.php inside the <head> block.
Go to Settings → General → Publication icon. Ghost uses the same icon for browser tabs and home-screen installs, so upload the 512×512 PNG. If you want a different apple-touch-icon, add the link tag via Settings → Code injection → Site Header.
Substack: Settings → Basics → Logo & favicon — upload the 512×512. Beehiiv: Settings → Branding → Favicon. Both platforms only let you set one image, but they auto-generate the smaller sizes from a clean square PNG, which is exactly what the generator gives you.
Drop the entire ZIP into /static/ (Hugo) or /public/ (Eleventy, Astro) and add the snippet from the generator to your base template's head:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Settings → Favicon only accepts a single 100KB image. Upload the 192×192 PNG from the ZIP — it's the largest size that fits Blogger's limit cleanly.
Most blog favicons fail because designers pick something that looks great at 512×512 and forget that 99% of readers see it at 16 pixels wide. Three rules that the generator's preview helps you check:
For more on the modern favicon spec, the canonical references are web.dev's PWA manifest guide, the MDN web app manifest reference, and Google's favicon-in-search guidelines.
You need a complete set. 16×16 and 32×32 for browser tabs, 48×48 for Windows shortcuts, 180×180 apple-touch-icon for iOS home screens, and 192×192 + 512×512 PNGs for Android and PWA installs. Generating only a single favicon.ico is no longer enough — Google's mobile crawler explicitly looks for the larger sizes.
Two paths. The fast way: Appearance → Customize → Site Identity → Site Icon, upload the 512×512 PNG and let WordPress generate the smaller sizes. The full-control way: upload the whole ZIP to your theme root via FTP and paste the link tags from the generator into header.php.
Yes — and it's one of the fastest ways to ship a recognizable mark on a brand-new blog. The generator rasterizes the emoji into proper PNG and ICO files, which is more reliable than the SVG-emoji trick that breaks on older browsers and on Safari iOS.
Three usual suspects: (1) browser cache — hard reload with Cmd/Ctrl+Shift+R; (2) the favicon is hosted but the link tags aren't in your <head> — many themes only inject the Site Icon, not the apple-touch-icon; (3) Cloudflare or another CDN is caching the old icon — purge the favicon paths.
Yes. Google has displayed favicons next to URLs in mobile search results since 2019, and a missing or generic favicon costs you click-through. It also ships your icon to home-screen installs, browser bookmarks, and history — every surface where your blog competes with other tabs for a glance.
Text, emoji, or image. ZIP with every required size + a copy-pasteable HTML snippet.
Open the Favicon Generator →