Back to all guides
Tool Guides

Beyond the favicon: colours, manifests and real app polish

Favicons are only half the story. Set theme colours, ship a manifest, and make your site look truly branded across Safari, Chrome and home screens.

8 min read
Free Guide

The tiny icon is only half the story

A neat favicon helps people spot your site in a crowded tab bar, but real polish comes from everything around it. Colours that match your brand. An app manifest that tells browsers who you are. Icons that look sharp when someone installs your site to their phone. Do these right and your brand looks deliberate everywhere.

Theme and browser bar colours

Modern browsers can colour bits of their UI to match your site. Use this to your advantage.

  • Set a theme colour so the address or browser bar picks up your brand accent. On Android Chrome and many desktop browsers, this becomes instantly visible.
  • Provide a light and a dark variant so your colour looks good in both modes. If your brand green is perfect on white but muddy on charcoal, choose a deeper shade for dark mode.
  • Keep contrast in mind. A lovely brand colour that makes text unreadable is not a win. If in doubt, bump the saturation and darken slightly until icons remain legible.

The web app manifest (the bit that makes you installable)

The manifest is a small JSON file that describes your site as an app. It unlocks better icons, install prompts, and nicer splash screens.

  • Name and short name: the full brand name and a shorter label for tight spaces. Keep the short name tidy so it does not wrap awkwardly.
  • Icons: include 192 by 192 and 512 by 512 PNGs. Add a maskable icon so your logo looks good inside rounded shapes on Android.
  • Start URL and display: decide where the app opens and whether it should look standalone (no browser chrome) or minimal.
  • Background and theme colours: match your brand so splash screens feel intentional.

Apple and Safari specifics

Apple still expects a few extras for a consistent feel.

  • Touch icon: include a high quality 180 by 180 PNG for iOS home screens. Keep backgrounds clean and avoid tiny text.
  • Pinned tabs on macOS Safari: use a simple monochrome SVG as a mask so Safari can colour it nicely. If your logo is fussy, simplify it for this purpose.
  • Status bar style: if you offer a dark experience, make sure your chosen colours keep status bar text readable when saved to the home screen.

Installing your site as an app

People do this more than you think. Show them it works and you earn a spot on their home screen.

  • Safari on iPhone or iPad: open your site, tap Share, then Add to Home Screen. The icon, name and launch colour come from your touch icon and manifest settings.
  • Chrome on Android: open the menu and tap Install app or Add to Home screen. With a manifest in place, Android will use your app name, icons and colours.
  • Chrome on desktop: look for the small install icon in the address bar, or open the menu and choose Install. Your theme colour and name carry over here too.

Branding checklist

  • Pick one primary brand colour for the browser bar, then choose a deliberate dark mode variant.
  • Provide crisp icons at multiple sizes and include a maskable version so rounded displays do not crop your logo oddly.
  • Keep names short and human: the short label should be instantly recognisable.
  • Test on a real phone. Add the site to your home screen and check the splash, the icon edges, and legibility in both light and dark.

Make it easy with Unwrite

If you want this done properly without chasing file formats, try our Favicon Generator. It outputs the common PNG sizes, an ICO for older browsers, a web app manifest, and an SVG you can adapt for pinned tabs. You get copy-paste snippets and a ZIP you can drop straight into your site.

  • Create a full set with the Favicon Generator: Unwrite Favicon
  • Tighten copy for install prompts and tooltips with Unwrite GPT
  • Cleaning up a brand PDF or size guide to match your new icon set? Sort it with our PDF Tools