App Icon vs Favicon: What's the Difference?
They look similar, but serve different purposes. Here's when to use each and how they work together.
Side-by-side comparison
| Aspect | Favicon | App icon |
|---|---|---|
| Primary use | Browser tabs, bookmarks, search results | Home screen, app switcher, app stores |
| Where users see it | Desktop browsers, mobile browsers | iOS home screen, Android launcher |
| Typical sizes | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| File format | ICO, PNG, SVG | PNG (often maskable) |
| Defined in | HTML <link> tags | manifest.json |
| Required for | All websites | PWAs, installable web apps |
What each one is
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, browser history, and search engine results. It's your site's visual identifier in the browser.
An app icon is the larger icon that appears on a user's home screen when they install your web app as a Progressive Web App (PWA). It represents your app as a standalone application.
Where each one shows up
Favicon
Start hereEvery site needs one, PWA or not
- Browser tab identification
- Bookmark visual recognition
- Search result branding
- Browser history icons
- Desktop shortcuts (Windows)
- Declared in HTML: <link rel="icon" href="/favicon.ico">
App icon
Only shows up once someone installs the app
- Home screen launcher
- App switcher / multitasking
- Notification badges
- App store listings
- Splash screen branding
- Declared in manifest.json: "icons": [{"sizes": "192x192"}]
Favicon sizes next to app icon sizes
1. Size requirements
Favicons are typically small (16x16 to 96x96px) because they appear in compact spaces like browser tabs. They need to be recognizable at tiny sizes.
App icons are much larger (180x180 to 512x512px) because they're displayed prominently on home screens. They can include more detail and are often designed with maskable variants for different device shapes.
2. Context of use
Favicons are always visible when browsing: they're part of the browser interface. Users see them constantly as they navigate between tabs and sites.
App icons only appear after installation. They represent your app as a standalone entity, separate from the browser. Users tap them to launch your app in fullscreen mode.
3. Technical implementation
Favicons are declared in HTML using <link> tags in the document head. Multiple sizes can be specified for different contexts.
App icons are defined in manifest.json, which is referenced by the HTML. The manifest also includes other PWA metadata like app name, theme colors, and display mode.
Do you need both?
Yes, you should have both. Here's why.
Favicons are essential for all websites: they improve brand recognition in browser tabs and search results.
App icons are required if you want users to install your site as a PWA. Without them, install prompts won't appear and the home screen experience will be poor.
They can share the same design, but should be optimized for their respective sizes and contexts.
Favicon design tips
Keep designs simple: details get lost at 16px.
Use high contrast for visibility.
Test at multiple sizes (16x16, 32x32, 96x96).
Consider using SVG for crisp scaling.
Ensure it works on both light and dark backgrounds.
App icon design tips
Design for 192x192px minimum (512x512px recommended).
Create maskable variants for Android.
Ensure the safe zone (inner 80%) contains critical elements.
Use consistent branding with your favicon.
Test on actual devices for best results.