A favicon is the small icon displayed in the browser tab, the address bar, bookmarks, and home screen shortcuts. A missing or low-quality favicon makes a site look unfinished. Providing the right sizes and formats ensures your icon looks sharp on every device and browser.
What Sizes Are Required
Browser tab icon: 16 x 16 pixels and 32 x 32 pixels are the standard sizes for the classic .ico format. The .ico file can contain multiple sizes in a single file.
Modern browsers: 32 x 32 PNG or SVG is increasingly the preferred format. An SVG favicon is perfectly sharp at any size.
Apple Touch Icon: 180 x 180 pixels PNG for iOS home screen shortcuts and bookmarks.
Android and PWA icons: 192 x 192 pixels and 512 x 512 pixels PNG are required for web app manifests (manifest.json) that enable Progressive Web App installation.
Windows tiles: 270 x 270 pixels for the Windows browser address bar and task manager.
The HTML Link Tags
To tell browsers which favicon to use, add link tags to the head element of your HTML. The basic setup includes a link with rel="icon" pointing to the PNG file, a link with rel="apple-touch-icon" pointing to the 180 x 180 pixel file, and a link to the web app manifest for PWA icons.
SVG Favicons
Modern browsers support SVG favicons, which are perfectly sharp at any size and support both light and dark mode variants using CSS media queries inside the SVG. An SVG favicon is specified with link rel="icon" type="image/svg+xml".
Design Considerations
A favicon must be recognisable at 16 x 16 pixels, which is roughly the size of two or three letters of text. Complex logos rarely work at this size; they need a simplified mark or initial. Test the favicon at actual size before finalising it.
High contrast works best for small icons. A favicon that relies on subtle gradients will look muddy at small sizes.
Using the DevHexLab Favicon Generator
Open the tool at /tools/image/favicon-generator. Upload a square source image (at least 256 x 256 pixels). The tool generates all required sizes and formats, previews each one, and packages everything in a ZIP file along with the required HTML link tag snippets.
Frequently Asked Questions
Does every page on my site need its own favicon?
No. The favicon is set for the entire origin (domain). It is defined once in the HTML head of each page (or in a layout template that applies to all pages).
Can I use an emoji as a favicon?
Yes. Modern browsers support SVG favicons that contain a single emoji character. This is a quick way to add a distinctive favicon to a personal project.
Generate your favicon package once and add it to every project.