How to Change Your Ghost CMS Favicon (2026 Pro Guide)

If you've just launched your new publication, you're probably staring at that default little white ghost in your browser tab. It's cute, but it screams 'I just installed this.' Unlike our WordPress setup where you might fight with bloated plugins, Ghost handles basic icon updates cleanly—but it completely hides the advanced stuff.

Look at how Stripe's engineering blog handles their tabs. They use crisp, scalable SVGs that adapt perfectly whether the user's OS is in light or dark mode. Ghost's default admin panel, however, only asks for a static PNG. I always recommend bypassing the basic UI for your primary icon if you want a professional 2026 setup.

Here is exactly how to fix your ghost cms favicon, from the basic UI method to the pro-level code injection.

Mastering Your Ghost CMS Favicon

Method 1: The Quick Admin UI Fix

If you just need something live today and don't care about dark mode, use the built-in settings.

1. Log into your Ghost admin dashboard.
2. Navigate to Settings > Design > Brand.
3. Look for the 'Publication icon' upload field.
4. Upload a square PNG (Ghost recommends at least 60x60px, but you should really use 512x512px).
5. Click 'Save' and refresh your site.

Method 2: The Pro Theme Injection (Recommended)

Here is the problem: the admin UI strips out advanced metadata. If you want an SVG that changes color, you need to inject code directly into your site's head.

1. First, generate your modern icons using Mzu favicondl.
2. Upload your SVG and Apple Touch icons to your server, or host them on a fast CDN. Grab the URLs.
3. Go to Settings > Code Injection in your Ghost admin.
4. In the 'Site Header' box, paste this modern 2026 stack:

<link rel='icon' href='https://your-cdn.com/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='https://your-cdn.com/apple-touch-icon.png'>

This overrides the default PNG and gives you crisp vector graphics on high-DPI displays.

Common Ghost-Specific Pitfalls

• Aggressive Caching: Ghost caches heavily. If you update the icon and don't see it, it's not you. You need to force a favicon cache clear in your browser.
• File Size Limits: Don't upload a massive 2MB logo through the UI. It slows down your initial render.

Get rid of that default ghost icon today. Your readers will trust your publication a lot more when your branding is locked in from the very first tab.