What Is a Favicon Icon? Complete Guide for Websites

A favicon (short for favorite icon) is the small brand mark that appears in browser tabs, bookmarks, history lists, and some mobile home-screen shortcuts. It is usually a square image derived from your logo. This guide explains what a favicon is, how to install one, and why it helps on both mobile and desktop browsers.

What is a favicon?

A favicon is a compact website icon that helps people recognize your site at a glance. Classic sites used a single favicon.ico file in the site root. Modern sites usually ship several PNG sizes plus HTML <link> tags so browsers, iOS, and Android can pick the right asset.

✓Browser tabs: the tiny icon next to your page title
✓Bookmarks and history: visual cues that make saved pages easier to find
✓Home screens: Apple touch icons and Android Chrome icons for installed shortcuts

How can you use a favicon?

Quick path: generate a multi-size PNG pack, upload the files to your website root or public folder, then paste the HTML tags into your <head>.

Step-by-step

Create or crop a clear square logo (simple shapes work best at tiny sizes).
Open the Favicon Generator and export 16×16, 32×32, Apple 180×180, and Android 192/512 sizes.
Upload the PNG files (and optional site.webmanifest) to your host.
Add link tags such as <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Hard-refresh the browser or clear favicon cache to confirm the new icon.

Common HTML tags

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Benefits on desktop browsers

Faster tab recognition

When many tabs are open, a distinct favicon helps users find your site without reading every title.

Stronger bookmarks

Desktop bookmark bars and history lists become easier to scan when each site has a clear icon.

Professional trust signal

A missing favicon often shows a blank or generic glyph. Shipping one makes the site feel finished and branded.

High-DPI clarity

Providing both 16×16 and 32×32 PNGs keeps icons sharp on standard and Retina desktop displays.

Benefits on mobile browsers

Home-screen shortcuts

Apple devices use the 180×180 touch icon when someone adds your site to the home screen. Android Chrome prefers 192×192 and 512×512 icons from a web manifest.

Mobile tab and recent-app lists

Mobile browsers still show favicons in tab switchers and favorites. A readable mark helps your brand stand out on small screens.

PWA and install prompts

Progressive web apps rely on larger icons for install dialogs and splash screens. Generating Android Chrome sizes prepares your site for that path.

Best practices

✓Prefer a simple, high-contrast mark that stays readable at 16 pixels.
✓Export multiple sizes instead of stretching one tiny bitmap.
✓Keep transparent backgrounds unless your brand needs a solid tile.
✓Update cache-busting filenames or hard-refresh after replacing icons.

Recommended sizes

Size	File	Typical use
16×16	favicon-16x16.png	Browser tabs and bookmarks
32×32	favicon-32x32.png	High-DPI desktop tabs
180×180	apple-touch-icon.png	iOS home screen
192×192	android-chrome-192x192.png	Android Chrome / PWA
512×512	android-chrome-512x512.png	Android splash / install art

Ready to create your favicon pack?

Generate browser, Apple, and Android icons from one image and download a ZIP with HTML tags.

Open Favicon Generator →