Ghost Favicon Complete Guide
Master favicon setup in Ghost: Publication settings, theme customization, code injection, Handlebars templates, and optimization for modern blogging platform.
Ghost Favicon Setup Options
Settings UI
Easiest method via admin panel
Theme Files
Custom theme integration
Code Injection
Advanced customization
Method 1: Publication Settings (Recommended)
Upload via Ghost Admin
Step-by-Step Instructions
- Log in to Ghost Admin:
https://yoursite.com/ghost - Click Settings (gear icon) in sidebar
- Navigate to General section
- Scroll to Publication icon
- Click the square icon placeholder or existing icon
- Upload your favicon image:
- Recommended: 512x512px PNG (transparent background)
- Also accepts: 256x256px, 192x192px
- Ghost automatically generates all required sizes
- Click Save in top right
- Clear browser cache to see changes
Ghost Auto-Generation: Ghost automatically creates:
- favicon.ico (16x16, 32x32, 48x48 multi-resolution)
- favicon.png (192x192 for modern browsers)
- apple-touch-icon (optimized for iOS)
Generated HTML
Ghost automatically adds to <head>:
<link rel="icon" href="/content/images/size/w256h256/2024/01/favicon.png" type="image/png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/content/images/size/w192h192/2024/01/favicon.png">Method 2: Custom Theme Integration
Modify Theme Files
Theme Structure
content/themes/
your-theme/
partials/
icons.hbs ? Create this file
default.hbs
package.json
assets/
built/
images/
favicon.ico ? Optional: place here
favicon.pngCreate icons.hbs Partial
File: partials/icons.hbs
{{!-- Favicon links --}}
<link rel="icon" type="image/x-icon" href="{{asset "images/favicon.ico"}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset "images/favicon-16x16.png"}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset "images/favicon-32x32.png"}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset "images/favicon-96x96.png"}}">
<link rel="icon" type="image/png" sizes="512x512" href="{{asset "images/favicon-512x512.png"}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset "images/apple-touch-icon.png"}}">
{{!-- PWA Manifest --}}
<link rel="manifest" href="{{asset "site.webmanifest"}}">
<meta name="theme-color" content="#15171A">Include in default.hbs
Add to <head> section in default.hbs:
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
{{!-- Include custom favicon partial --}}
{{> icons}}
{{!-- Ghost outputs important tags and metadata --}}
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="site-wrapper">
{{{body}}}
</div>
{{ghost_foot}}
</body>
</html>Upload Theme
- Zip your theme folder
- Ghost Admin ? Settings ? Design
- Click Change theme ? Upload theme
- Activate uploaded theme
Asset Helper: Use
{{asset}} helper to properly reference theme files with caching and CDN support.
Method 3: Code Injection
Site Header Injection
Access Code Injection
- Ghost Admin ? Settings
- Scroll to Code injection
- Click Site Header section
Add Favicon Links
Paste in Site Header field:
<!-- Custom Favicons -->
<link rel="icon" type="image/x-icon" href="/content/images/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/content/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/content/images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon.png">
<link rel="manifest" href="/content/images/site.webmanifest">Upload Favicon Files
Use Ghost Content API or FTP to upload files to:
/content/images/ directory
Note: Code injection affects all pages. Use this for global favicon changes without modifying theme.
Ghost CLI Management
Self-Hosted Ghost Commands
Useful Ghost CLI Commands
# Restart Ghost (applies changes)
ghost restart
# View Ghost status
ghost status
# Check Ghost version
ghost version
# Update Ghost
ghost update
# View logs
ghost log
# Access Ghost database
ghost db-connect
# Backup content (includes uploaded images)
ghost exportGhost(Pro) vs Self-Hosted
Ghost(Pro) Managed
- ? Settings UI available (easiest)
- ? Automatic favicon optimization
- ? CDN included for fast delivery
- ? Code injection supported
- ? Theme customization allowed
- ? No direct server/file access
- ? Automatic backups included
Self-Hosted Ghost
- ? Full server access
- ? Direct file system access
- ? Custom Nginx/Apache configuration
- ? All setup methods available
- ? Cache control customization
- ?? Manual updates required
- ?? Manual backups needed
Ghost Favicon Best Practices
? Recommendations
- Use Publication Settings method (simplest)
- Upload 512x512px PNG for best quality
- Let Ghost auto-generate sizes
- Use transparent background for icon
- Test on Ghost theme preview
- Clear browser cache after changes
- Use
{{asset}}helper in themes - Include web manifest for PWA support
? Common Mistakes
- Uploading low-resolution images (<256px)
- Not clearing cache after update
- Hardcoding URLs instead of using helpers
- Forgetting to save settings changes
- Using non-square images
- Not testing on mobile devices
- Ignoring Ghost's auto-generated favicons
- Not including manifest for PWA
Troubleshooting
Solutions:
- Clear browser cache (Ctrl+Shift+R)
- Restart Ghost:
ghost restart - Check if settings were saved (green checkmark)
- Wait 5-10 minutes for CDN propagation (Ghost Pro)
- Test in incognito/private browsing
- Clear Ghost cache if self-hosted
Fixes:
- Check image size (max 5MB usually)
- Ensure image is PNG, JPG, or ICO
- Try compressing image before upload
- Check Ghost storage quota (Pro plan)
- Verify file permissions on
/content/images/(self-hosted) - Check Ghost logs for errors
Solutions:
- Check image is square (equal width/height)
- Verify image has transparent background if needed
- Re-upload with higher resolution (512x512)
- Check browser console for 404 errors
- Inspect HTML source to verify favicon URL
- Test different browsers
Generate Ghost-Ready Favicons
Create optimized favicon packages perfect for Ghost publishing platform
Generate Favicons