Setting a custom favicon and Apple touch icon
Generate a complete favicon set so your blog looks intentional in browser tabs, iOS home screens, and PWA installs. One file replaces the default.
The default VeloCMS favicon is fine — but if you're publishing under your own brand, replacing it is a 60-second win. Browsers fall back to a generic globe when no favicon is set, which makes your tab look anonymous. The bigger payoff is iOS Safari: when a reader saves your blog to their home screen, iOS pulls the apple-touch-icon at 180×180 — and a clear icon there earns you real estate next to their other apps.
What you actually need
Forget the dozens-of-formats favicon kits floating around. Modern browsers (and VeloCMS's metadata pipeline) cover everything with three files:
- favicon.ico — 32×32 ICO, embedded in HTML head by Next.js automatically when you upload to /public/
- icon.svg — vector source, browsers prefer this on retina + dark mode
- apple-touch-icon.png — 180×180 PNG with a solid background (iOS rounds corners; no transparency)
Generate them once
Start with a 512×512 PNG of your logo on a solid background. Drop it into https://realfavicongenerator.net/ and download the package. The three files you need are inside; rename them per the list above. Upload via /admin/settings/branding — the field is called "Favicon (32×32)" and the page handles the multi-resolution flow.
Or skip the UI and drop the files directly into `public/` in your fork. Files in `/public/` are served from the site root, so `/favicon.ico` and `/apple-touch-icon.png` will resolve without any further wiring.
Where the metadata comes from
VeloCMS's root metadata in `src/app/layout.tsx` reads `site_settings.favicon` and emits the correct `<link rel="icon">` tags. If you customise the favicon and it doesn't change, check the file path is exactly `/public/favicon.ico` (not `/favicon.ico` — that's where it's served from, not where you put it). Most cache invalidation issues are actually browser cache; try a hard refresh or a fresh incognito window.
Verify with the iOS preview
On any iPhone, open Safari → your blog → Share → "Add to Home Screen". The preview shows exactly what iOS will render. If it's still the default globe, your apple-touch-icon either didn't deploy or is being cached by iOS — clear Safari's website data for your domain and retry.