What is a favicon?
Everything you need to know about those tiny icons that make websites memorable
Definition
A favicon (short for "favorite icon") is a small website identifier used in:
Browser tabs
Appears next to page titles
Bookmarks
Helps users recognize saved pages
Search results
Displayed in Google's search results
Technical note: Designers create favicons in formats like ICO, PNG or SVG, ensuring they're visible even at 16×16 pixels.
History
Favicons got their start in 1999 with Internet Explorer 5. Here's how they began:
The first favicons
Were simple files named "favicon.ico" placed in a website's main folder
Originally
They only showed up when people bookmarked a site in Internet Explorer
Fun fact
Website owners could guess how many visitors bookmarked them by counting favicon downloads
Today: All browsers show favicons automatically - you don't need to bookmark a site to see them!
Formats
Favicons come in different file formats, each with unique advantages and browser support:
ICO (Original Format)
Stores multiple sizes (16×16px, 32×32px, etc.) in one file. Supported by all browsers.
PNG
Lossless quality. Works in all modern browsers. Ideal for high-resolution favicons.
SVG (Scalable Vector)
Crisp at any size. Not supported by Safari or IE. Gaining popularity.
Other Formats
GIF (rare, limited animation support) • JPEG (lossy, not in IE) • APNG (animated, poor support)
| Browser | ICO | PNG | SVG | GIF |
|---|---|---|---|---|
| Chrome | ✓ | ✓ | ✓ | Partial* |
| Firefox | ✓ | ✓ | ✓ | Static only |
| Safari | ✓ | ✓ | ✗ | ✗ |
| Edge | ✓ | ✓ | ✓ | Partial |
| IE | ✓ | v11+ | ✗ | ✗ |
Pro tip: For best compatibility, provide both ICO (for old browsers) and PNG/SVG (for modern displays).
Importance
Favicons might be tiny, but they pack a big punch for your website’s identity and usability. Here’s why they matter:
Brand Recognition
A favicon acts like a mini-logo, helping users instantly identify your site in tabs, bookmarks, and search results. Sites without one blend into the crowd.
User Trust
Missing favicons make your site look unprofessional or unfinished. Users may subconsciously distrust pages with generic browser icons.
Search Results Impact
Google displays favicons next to site links. Without one, your result looks less distinctive and gets fewer clicks than competitors with icons.
Navigation Efficiency
Favicons help users find your tab quickly in a crowded browser. Without them, tabs default to generic icons, slowing down navigation.
The cost of skipping it: Websites without favicons appear less professional and trustworthy to users. In search results, they blend into the background while competitors with icons stand out. It's a small detail with a big impact on first impressions.
Extended Icons
Beyond traditional favicons, modern websites need additional icons for different platforms and use cases:
Apple Touch Icon
Used when iOS users bookmark your site to their home screen.
PWA Icons
Progressive Web Apps, used by android devices and others, need multiple icon sizes (192×192px and 512×512px) for splash screens and app installation.
Modern best practice: Use a single SVG file as your source, then generate all required sizes and formats automatically with FaviCraft's favicon creator or Logo converter.
Check your favicons
Does your website have the right favicon setup? Follow these steps to verify your icons are properly set up:
Check Browser Tab
Open your site in Chrome/Firefox/Safari. Your icon should appear in the browser tab. If you don't see it: There is something wrong with your browser icon, or it is missing.
Test on iPhone
Bookmark your site to the home screen. If you see a generic single letter icon that you don't recognize: there is something wrong with your Apple Touch Icon, or it is missing.
Verify PWA Installation
Try installing your site as a PWA on an android device. If the installation prompt shows a generic icon, your manifest file icons are missing.
Want an instant report?
Scan pages on your site for all icon requirements in seconds:
Check My Favicons