A regular attender pulls up your church site on their phone, taps the share button, and picks "Add to Home Screen." Now your ministry lives one thumb-swipe away from their calendar and their kids' school app. This is a small act of loyalty, and most church websites reward it with a garbled little screenshot of the top-left corner of the homepage.
The fix takes about twenty minutes and one image file. It is called an apple-touch-icon.
When iOS goes to render your home-screen icon, it looks for a specific tag in your site's HTML pointing at a 180×180 PNG. If it finds one, that PNG becomes the icon — sharp, on-brand, and instantly recognizable. If it does not find one, iOS falls back to whatever it can grab from the page, which is almost never what you want.
A quick checklist for a church site:
- Export a 180×180 PNG of your church mark on a solid background. Transparent PNGs still work, but iOS will place them on a white tile, so make sure the logo reads on white. Keep the logo centered with a little padding — iOS rounds the corners.
- Add
apple-touch-icon.pngto your site root. Then add<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">to the<head>. If you are on Next.js, WordPress, Squarespace, or Wix, there is a documented one-click place for this — no code required. - While you are in there, ship a modern favicon too. A
favicon.svgfor browser tabs and a smallfavicon.icofallback covers every browser released in the last decade. Skip the twelve-file favicon zip generators — they are a relic. - Test on a real phone. Add the site to your home screen, then delete it and re-add after your next deploy. If the old icon persists, iOS is caching — clear it or wait a day.
None of this changes your sermons or your welcome team. But when a member's phone shows your church next to their bank and their Bible app, that is a quiet act of belonging — and it deserves better than a broken thumbnail.
If you would like us to take a pass on your church site's icons and favicons, we would be glad to help.