Make Your Favicon Distinctive

A favicon, app icon, or apple-touch-icon—whatever you like to call it—is an icon you may well have forgotten to add to your web app. It serves a useful purpose beyond branding, appearing in the browser’s tab UI and in bookmark views across your devices.

Users with lots of tabs open, lots of apps in their start menu, or lots of apps in a folder on their phone, will appreciate being able to find yours quickly.

Figure 83.1: Some favicons

A bright, bold icon or letter is usually sufficient, but test it at 16 pixels in size to see that it’s legible. Use transparency because, unless your icon actually is a white square, nobody wants a white square in their tab bar!

You can cover most browsers out there with just four types of favicon, containing just six favicon files:

1. A favicon.ico for legacy browsers at 32px square
2. A single SVG icon with a light and dark version for modern browsers
3. A...