If you've just uploaded a logo to your Ghost site and it's showing up tiny, stretched, or otherwise looking wrong, you're not alone. This is one of the most common frustrations new Ghost users run into, and it shows up across nearly every theme (Casper, Edition, Headline, Taste, Source, and beyond). The good news: the fix is almost always a few lines of CSS, and you don't need to touch your theme files to apply it.
This guide walks through why logo sizing behaves the way it does in Ghost, and three reliable ways to change it.
Why your logo looks small (or weird) in the first place
Ghost's design philosophy is that the logo is part of the theme, not something you size manually. When you upload your publication logo under Settings → Design & branding, Ghost stores the image, but the actual rendered size is controlled by CSS rules baked into whichever theme you're using. According to Ghost's official documentation, publication logos should have transparent backgrounds and be at least 600 × 72 pixels (that horizontal aspect ratio is a hint about how most themes expect the logo to display: as a wide, short banner sitting in the header).
If your logo is a square or near-square shape, the theme's CSS will often constrain its height to something like 26–40 pixels, which can make a square logo look like a postage stamp. Uploading a bigger source file doesn't help, because the browser is being explicitly told to shrink it. That's the part you need to override.
Method 1: Use Code Injection (recommended for most users)
Code Injection is the cleanest way to change logo sizing because it survives theme updates. If you edit the theme's CSS files directly, any future update will overwrite your changes, Code Injection lives separately in your Ghost admin and applies on top of whatever theme is active.
Here's how to do it:
- Log in to your Ghost admin panel.
- Go to Settings → Code Injection (in older versions, it's under Advanced).
- In the Site Header box, paste a small
<style>block that targets the logo.
For most themes, the logo is rendered as an <img> tag with a class like .gh-logo, .site-logo, or .header-logo. A typical override looks like this:
<style>
.gh-logo {
max-height: 60px !important;
width: auto !important;
}
</style>
Save, then reload your site. If nothing changes, the class name is probably different in your theme, open your site, right-click the logo, choose Inspect, and look at the class attribute on the image. Swap that into the CSS above.
The !important flag is there because the theme's own CSS is fighting you; without it, the theme's rule usually wins. You only need it for properties the theme is explicitly setting.
Theme-specific snippets
Here are ready-to-paste overrides for some of the most common Ghost themes. Drop these into Settings → Code Injection → Site Header.
Casper (default theme):
<style>
.gh-head-logo {
max-height: 60px;
font-size: 2rem;
}
.gh-head-logo img {
max-height: 60px;
}
</style>
Source (Ghost's newer default):
<style>
.gh-head-logo {
height: 50px;
}
.gh-head-logo img {
max-height: 50px;
width: auto;
}
</style>
Edition theme:
<style>
.site-logo {
max-height: 80px !important;
width: auto !important;
}
.site-logo img {
max-height: 80px !important;
}
</style>
Headline theme:
<style>
.site-logo {
height: auto;
max-height: 70px;
}
.site-logo img {
max-height: 70px;
width: auto;
}
</style>
If your theme isn't listed, the pattern is the same, find the wrapper class with Inspect Element and apply the same max-height + width: auto combo.
Method 2: Inspect first, then target precisely
A more thoughtful version of Method 1: don't guess at sizes, measure them.
Open your site, right-click the logo, and pick Inspect (Chrome, Firefox, and Safari all have this). The browser's developer tools will highlight the logo element and show you the exact CSS rules controlling it—usually something like height: 26px or max-height: 2.6rem defined on a class such as .gh-head-logo (Source theme) or .site-logo img (Casper).
Once you know the exact selector and property the theme is using, your override can be much more surgical, including a responsive variant for mobile:
<style>
/* Desktop */
.gh-head-logo {
height: 50px;
}
/* Tablet */
@media (max-width: 900px) {
.gh-head-logo {
height: 42px;
}
}
/* Mobile */
@media (max-width: 600px) {
.gh-head-logo {
height: 36px;
}
}
</style>
That mobile block is worth adding even if you don't think you need it, logos that look fine on desktop often crowd out the navigation menu on mobile. Setting a smaller height for narrow screens keeps the header clean.
Bonus: a different logo for dark mode
Many modern Ghost themes auto-switch between light and dark color schemes based on user preference. A black logo will disappear on a black background. The simplest fix is to invert the logo with a CSS filter when dark mode is active:
<style>
/* Auto-invert logo in dark mode (works best for solid black/white logos) */
@media (prefers-color-scheme: dark) {
.gh-head-logo img {
filter: invert(1);
}
}
</style>
For colored logos, this filter trick won't look right. For a more robust solution, themes built on Ghost 4.20.0 or later support custom theme settings, which let you define a separate dark-mode logo upload field in package.json:
{
"config": {
"custom": {
"dark_theme_logo": {
"type": "image"
}
}
}
}
Then reference it in your default.hbs or header partial:
{{#if @custom.dark_theme_logo}}
<img class="header-logo dark-theme"
src="{{img_url @custom.dark_theme_logo}}"
alt="{{@site.title}}" />
{{/if}}
Method 3: Edit the theme directly (advanced)
If you're already comfortable working with Handlebars themes, you can download your active theme's .zip, edit the CSS source (usually in assets/css/ or assets/built/), and re-upload it. This is appropriate when you're maintaining a customized fork of a theme and have a process for re-applying changes when the theme updates upstream.
For Casper specifically, the relevant file is typically assets/css/screen.css or one of the partials inside assets/css/. The rule you're looking for is on the .site-logo or .gh-head-logo selector, something like:
/* In assets/css/screen.css */
.gh-head-logo {
display: inline-flex;
align-items: center;
max-height: 60px; /* change this value */
color: var(--ghost-accent-color);
font-size: 2rem; /* affects fallback text logo */
font-weight: 700;
letter-spacing: -0.02em;
}
.gh-head-logo img {
max-height: 60px; /* and this one */
width: auto;
}
Edit, rebuild if the theme uses a build step (npm install && npm run build for Casper), zip the folder, and upload it under Settings → Design → Change theme.
This is more work and more fragile than Code Injection. Use it only when you're making structural changes that go beyond what CSS overrides can handle.
A few practical tips
The image you upload matters. Even though CSS controls display size, browsers still scale from the source. If you upload a 2000-pixel-wide logo and the theme displays it at 200 pixels, that's fine (extra resolution helps on retina screens). But if you upload a 200-pixel-wide logo and try to display it at 400 pixels, it'll look fuzzy. Upload at roughly 2× the maximum display size you expect.
Use SVG when you can. SVG logos scale to any size without quality loss and usually have smaller file sizes than equivalent PNGs. Ghost supports SVG uploads for the publication logo.
Premium themes from marketplaces sometimes include a dedicated logo-size setting in the design panel, check Settings → Design before you reach for CSS. It's faster when it exists.
When the CSS isn't taking effect
If you've added the override and nothing changes, the usual suspects are:
The class name is wrong. Inspect the element again and copy the exact class.
A more specific selector in the theme is overriding yours. Add !important, or write a more specific selector:
/* Instead of this... */
.gh-logo { max-height: 60px; }
/* ...try this */
.site-header .gh-head-actions .gh-logo img { max-height: 60px; }
The browser is caching the old stylesheet. Hard-refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac), or open the site in a private window.
You're editing the wrong site. If you have a staging and production Ghost instance, double-check which one you're injecting into.
For most people, Method 1 with a five-minute Inspect-Element session is all it takes. Ghost's design philosophy keeps the logo tied to the theme on purpose, but Code Injection gives you a clean, update-safe escape hatch when the theme's defaults aren't what you want.
