What Is a Favicon?
A favicon (short for "favorite icon") is the tiny icon that appears in your browser tab next to the page title. It also shows in bookmarks, browser history, and mobile home screen shortcuts. Despite its small size, the favicon is one of the most visible brand touchpoints on the web — users see it every single time they have your site open.
Without a favicon, browsers display a generic globe or page icon, which looks unfinished and unprofessional. Adding a favicon takes less than 5 minutes and instantly elevates the polish of any website.
Brand Tip: Your favicon should be recognizable at 16×16 pixels — the smallest display size. Use a simple icon, logo mark, or single bold letter rather than your full logo. Complex logos become unreadable at tiny sizes.
All Favicon Sizes You Need in 2026
| Size | Usage | Format |
|---|---|---|
| 16×16 | Browser tab (standard) | ICO / PNG |
| 32×32 | Taskbar, browser shortcuts | ICO / PNG |
| 48×48 | Windows site icon | ICO |
| 180×180 | Apple Touch Icon (iOS) | PNG |
| 192×192 | Android Chrome PWA icon | PNG |
| 512×512 | PWA splash screen | PNG |
How to Generate a Favicon with ToolMatrix
Upload Your Image or Enter Text
Upload a PNG, JPG, or SVG logo. Or enter a letter/emoji and choose a background color for a text-based favicon.
Adjust Padding & Shape
Add padding around the icon and choose a square or rounded-corner shape. Preview all sizes before downloading.
Download ZIP Package
Download a complete ZIP containing ICO, all PNG sizes (16, 32, 48, 180, 192, 512), and the HTML code to paste into your <head>.
ICO vs PNG vs SVG — Which Format to Use
- ICO: The classic favicon format. Contains multiple sizes in one file. Supported by all browsers. Use
favicon.icoin your root directory — browsers look for it automatically. - PNG: Better quality at large sizes. Required for Apple Touch Icon and PWA icons. Use PNG for all sizes above 48×48.
- SVG: Vector — scales to any size perfectly. Modern browsers support
image/svg+xmlfavicons. Use as a supplement to ICO, not a replacement (older browsers don't support it).
How to Add a Favicon to Your Website
<!-- Paste inside your <head> tag --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <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">
Our generator includes the complete ready-to-paste HTML snippet along with your favicon files. Just copy-paste into your <head> and upload the favicon files to your website root.
Generate Favicon Free
All sizes, ICO + PNG + SVG, ready-to-use HTML snippet included. Instant ZIP download.
Generate Favicon NowFavicon for PWA & Mobile Home Screen
For Progressive Web Apps and mobile home screen shortcuts, include a site.webmanifest file referencing your 192×192 and 512×512 PNG icons. Our generator creates this manifest file automatically — just add it to your server root and reference it in your HTML head.
ToolMatrix Favicon Generator
Upload any image or create a text/emoji favicon. Exports complete favicon package: ICO (multi-size), 6 PNG sizes, SVG, site.webmanifest, and HTML code snippet. All in one ZIP download. Free, no account needed, instant generation.