Setting a custom favicon and Apple touch icon
Generate and ship a complete favicon set (16, 32, 180, 512px) so your blog looks intentional in browser tabs, on iOS home screens, and in PWA installs. One file replaces the default everywhere.
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.