Favicon
A favicon is the small icon displayed in browser tabs, bookmarks, and the address bar to visually identify a website. It is typically 16x16 or 32x32 pixels.
§ 1 Definition
A favicon (short for "favorite icon") is a small, square graphic associated with a website that appears in browser tabs, bookmark lists, history, and address bars. It serves as a quick visual identifier, helping users find your site among many open tabs. Favicons were introduced by Internet Explorer 5 in 1999 and have since become a universal web standard. Modern favicons come in multiple sizes and formats, including ICO, PNG, and SVG, and are often accompanied by Apple Touch Icons for mobile home screens. While small, a well-designed favicon reinforces brand recognition and improves user experience.
§ 2 Favicon File Formats and Sizes
The legacy format is .ico, which supports multiple sizes in one file (16x16, 32x32, 48x48). Modern best practice uses PNG files for most scenarios, with specific sizes: 16x16 for browser tabs, 32x32 for taskbars, 96x96 for desktop shortcuts, and 180x180 for Apple touch icons. SVG favicons are now supported by most modern browsers, offering resolution-independent scaling. A comprehensive favicon setup includes favicon.ico (root directory), apple-touch-icon.png (180x180), and a manifest.json for Progressive Web Apps.
§ 3 How to Implement a Favicon
The simplest method is placing a favicon.ico file in your website's root directory. Browsers automatically check for it there. For more control, use a link tag in the HTML head: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. For Apple devices: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Tools like RealFaviconGenerator generate all required files and HTML markup from a single source image.
§ 4 Favicon Best Practices
Keep designs simple and recognizable at very small sizes. High contrast and solid shapes work better than detailed illustrations. Test your favicon across multiple browsers and devices. Use a consistent favicon across your entire site to reinforce brand identity. For Progressive Web Apps, provide multiple icon sizes in the manifest.json to ensure proper display on all devices and home screen sizes.
§ 5 In code
<!-- Standard favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Manifest for PWA -->
<link rel="manifest" href="/site.webmanifest">§ 6 Common questions
- Q. What is the standard favicon size?
- A. 16x16 pixels is the traditional and most universally supported size. For modern HD displays, 32x32 is recommended, and 48x48 covers retina displays.
- Q. Can I use an SVG as a favicon?
- A. Yes. SVG favicons are supported in Chrome, Firefox, Edge, and Opera. Safari requires a fallback to PNG or ICO.
- Q. Does a favicon affect SEO?
- A. Indirectly, yes. A favicon improves click-through rates from bookmark lists and browser history. Google also displays favicons in search results on mobile devices.
- A favicon is a small brand icon displayed in browser tabs, bookmarks, and the address bar.
- Provide multiple sizes (16x16, 32x32, 180x180) for cross-device compatibility.
- Place favicon.ico in the root directory for automatic browser detection.
- SVG favicons are supported in most modern browsers and scale perfectly.
Every site we build gets a proper favicon setup. From design to implementation, we handle all sizes and formats. Explore our Web Development services or get in touch.
Get in touchA favicon is the small icon displayed in browser tabs, bookmarks, and the address bar to visually identify a website. It is typically 16x16 or 32x32 pixels.
Category: General (also: Front End, Design)
Author: Atomic Glue Technical Team
## Definition
A favicon (short for "favorite icon") is a small, square graphic associated with a website that appears in browser tabs, bookmark lists, history, and address bars. It serves as a quick visual identifier, helping users find your site among many open tabs. Favicons were introduced by Internet Explorer 5 in 1999 and have since become a universal web standard. Modern favicons come in multiple sizes and formats, including ICO, PNG, and SVG, and are often accompanied by Apple Touch Icons for mobile home screens. While small, a well-designed favicon reinforces brand recognition and improves user experience.
## Favicon File Formats and Sizes
The legacy format is .ico, which supports multiple sizes in one file (16x16, 32x32, 48x48). Modern best practice uses PNG files for most scenarios, with specific sizes: 16x16 for browser tabs, 32x32 for taskbars, 96x96 for desktop shortcuts, and 180x180 for Apple touch icons. SVG favicons are now supported by most modern browsers, offering resolution-independent scaling. A comprehensive favicon setup includes favicon.ico (root directory), apple-touch-icon.png (180x180), and a manifest.json for Progressive Web Apps.
## How to Implement a Favicon
The simplest method is placing a favicon.ico file in your website's root directory. Browsers automatically check for it there. For more control, use a link tag in the HTML head: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. For Apple devices: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Tools like RealFaviconGenerator generate all required files and HTML markup from a single source image.
## Favicon Best Practices
Keep designs simple and recognizable at very small sizes. High contrast and solid shapes work better than detailed illustrations. Test your favicon across multiple browsers and devices. Use a consistent favicon across your entire site to reinforce brand identity. For Progressive Web Apps, provide multiple icon sizes in the manifest.json to ensure proper display on all devices and home screen sizes.
## In code
<!-- Standard favicon --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <!-- Apple Touch Icon (iOS home screen) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Manifest for PWA --> <link rel="manifest" href="/site.webmanifest">
## Common questions
Q: What is the standard favicon size?
A: 16x16 pixels is the traditional and most universally supported size. For modern HD displays, 32x32 is recommended, and 48x48 covers retina displays.
Q: Can I use an SVG as a favicon?
A: Yes. SVG favicons are supported in Chrome, Firefox, Edge, and Opera. Safari requires a fallback to PNG or ICO.
Q: Does a favicon affect SEO?
A: Indirectly, yes. A favicon improves click-through rates from bookmark lists and browser history. Google also displays favicons in search results on mobile devices.
## Key takeaways
- A favicon is a small brand icon displayed in browser tabs, bookmarks, and the address bar.
- Provide multiple sizes (16x16, 32x32, 180x180) for cross-device compatibility.
- Place favicon.ico in the root directory for automatic browser detection.
- SVG favicons are supported in most modern browsers and scale perfectly.
## Related entries
Last updated July 2025. Permalink: atomicglue.co/glossary/favicon