How to Add a Favicon in Ghost (Publication Icon)

In Ghost, you set your favicon by uploading a Publication icon in Settings → General — it sits in the title and branding area at the top of that screen. Upload one square image, click save, and Ghost does the rest: it stores the source, generates a resized favicon, and injects the icon link into your pages for you. You don’t normally touch theme code or upload a folder of files. Ghost recommends a square of at least 60×60 and accepts larger sources, so give it a 512×512 image and the downscaled tab icon stays sharp.

In one line: in Ghost, the favicon is the Publication icon you upload in Settings → General — one square image, saved.

The catch is what Ghost does with that image: it produces a single basic favicon, not the full modern set. Below are the exact steps, the size that works best, and how advanced users add SVG and PWA icons that Ghost’s UI won’t generate.

Where the favicon setting lives in Ghost

Ghost calls the favicon the Publication icon. It’s part of your site’s core branding, alongside the publication title and logo:

1. Sign in to your Ghost admin (yourdomain.com/ghost).
2. Open Settings (the gear icon).
3. Go to the General section — this is where your title, description, and branding live.
4. Find the Publication icon field in the title/branding area near the top.
5. Click to upload a square image.
6. Save your settings.

That’s the whole flow. The same Publication icon is used everywhere Ghost needs your site mark, so you set it once. On Ghost(Pro) and a self-hosted Ghost install the screen is the same — it’s a core setting, not a theme feature, so it doesn’t change when you switch themes.

How Ghost handles the image

Ghost treats the Publication icon as a source, not a finished favicon. Once you save:

• It stores your upload and generates a resized favicon to serve in browser tabs.
• It injects the icon link into your pages automatically, so you don’t add <link rel="icon"> by hand.
• It serves /favicon.ico from your site root, so browsers that request the conventional path get a real icon back instead of a 404.

This is why the single upload is usually enough for a blog: Ghost covers the everyday tab icon without you editing the theme. The trade-off is that it generates a basic favicon — one resized raster icon — and nothing more.

What size to upload

Use a square image, and go large. Ghost recommends a square of at least 60×60 and accepts bigger sources, so a 512×512 PNG is the practical sweet spot:

• Square, always. A rectangular logo gets cropped or squished. Crop to a square or add even padding before you upload.
• Large source, sharp result. Ghost downscales your source to produce the favicon. Hand it 512×512 and the small tab icon — and any larger placement — stays crisp on high-DPI screens. A tiny 60×60 upload meets the minimum but looks soft when scaled.
• PNG is the safe choice. PNG keeps a clean edge at small sizes and preserves transparency where Ghost serves it. (Ghost handles the conversion to the favicon it serves, so you don’t need to upload an .ico.)
• Simplify the mark. At 16–32px a detailed logo turns to mush. Lean on one bold shape and strong contrast. See favicon sizes & dimensions for the full size chart and how to create a favicon from an image or logo for prepping a square source.

The limitation: one icon, basic set

Ghost’s Publication icon is built for simplicity, and that’s also its ceiling. From one upload you get a single resized favicon. What you don’t get through the UI:

• A modern favicon.svg — the sharp, scalable, dark-mode-capable primary icon.
• A properly padded maskable icon with art inside a central 409×409 safe zone for Android adaptive shapes.
• Control over an opaque, padded apple-touch-icon at 180×180 for iOS home-screen saves.
• A site.webmanifest describing the 192/512/maskable PWA icon set.

For most blogs and publications that’s genuinely fine — the tab icon is what readers see. But if you want the complete modern package, you’ll add it yourself.

Generate the full set first

The simplest path to the full set is to build it once, then add the files to Ghost. FaviconBuilder takes one logo (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs the complete verified set — multi-size favicon.ico, scalable favicon.svg, opaque 180×180 Apple touch icon, and the 192/512/maskable PWA icons — plus a ready ZIP and copy-paste HTML and manifest. It’s free, no account, and the image never leaves your browser.

Use the 512×512 PNG it produces as your Ghost Publication icon for the everyday favicon, then follow the steps below to wire up the rest.

Advanced: add SVG, Apple touch & PWA icons

To serve the full set, you host the files yourself and tell Ghost about them. There are two routes.

Route 1 — Code injection (no theme edits)

Ghost’s Code injection lets you add markup to every page’s <head> without touching your theme:

1. Host your favicon files at stable URLs — your CDN, an asset host, or your theme’s assets/ folder.
2. In Ghost admin, open Settings → Code injection.
3. Paste your <link> tags into the Site Header box.
4. Save.

Use clean, modern tags — and never rel="shortcut icon", which was never a valid relation:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="https://yourcdn.com/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://yourcdn.com/apple-touch-icon.png">
<link rel="manifest" href="https://yourcdn.com/site.webmanifest">

Ghost still injects its own Publication-icon link, so the browser sees both — it will prefer your SVG where supported and fall back to the .ico. (Full tag-by-tag breakdown →)

Route 2 — Edit the theme’s default.hbs

If you maintain your own theme, you can add the same tags directly. Open your theme’s default.hbs, place the <link> tags inside the <head> block above the {{ghost_head}} helper, and re-upload or redeploy the theme. This keeps the icon markup in version control with the rest of your theme, but it means editing and re-uploading the theme on every change — Code injection is usually the lighter option.

Either way, your site.webmanifest should list three icon entries — 192 any, 512 any, and a separate 512 maskable — not one entry with a combined purpose. (Full PWA manifest guide →)

Favicon not updating after you save?

If the old icon sticks around, it’s almost always caching rather than a failed upload:

• Hard-refresh the page (Ctrl/Cmd + Shift + R) and check again in a private/incognito window.
• Wait a few minutes for Ghost’s (or your CDN’s) cache to serve the new file.
• Confirm the save in Settings → General — the Publication icon thumbnail should show your new image.
• Remember /favicon.ico. Ghost serves one from the root, and browsers cache that path aggressively; clearing the site cache or visiting the file URL directly forces a refresh.

Still stuck after that? Walk through the general checklist in favicon not showing? how to check & fix it.

Summary

Adding a favicon in Ghost is one upload in the admin:

1. Go to Settings → General.
2. Upload a square image (512×512 ideal, 60×60 minimum) to the Publication icon field.
3. Save — Ghost generates and serves the resized favicon and injects the link for you.

Ghost produces one basic favicon from that image, which is enough for most blogs. For the full modern set — SVG, opaque Apple touch icon, and maskable PWA icons — generate the files first, then add them with Settings → Code injection (Site Header) or by editing your theme’s default.hbs.

Continue reading:

• How to Add a Favicon in Shopify & Website Builders
• How to Add a Favicon in WordPress
• Favicon HTML Reference: Every Tag & Attribute
• Favicon Not Showing? How to Check & Fix It