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.

Quick answer: Favicons appear in browser tabs, bookmarks, and search results. App icons appear on home screens when users install your web app as a PWA. Both are essential for a complete web presence.

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 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 (recommended)

Every site needs one, PWA or not

Browser tab identification

Bookmark visual recognition

Search result branding

Browser history icons

Desktop shortcuts (Windows)

Declared in HTML:

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

16x16

32x32

96x96

180x180

192x192

Rendered at true pixel dimensions. Favicons live at the left end of this strip and app icons at the right; 512x512 is larger again, and never drawn at that size in browser chrome.

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 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.