A favicon is the small icon that appears in browser tabs, bookmarks, and search results. It is a tiny detail that has an outsized impact on how professional your site looks. A missing or broken favicon makes a site look unfinished. A well-designed favicon builds brand recognition.
Creating a favicon is straightforward, but the technical details matter. The icon needs to work at multiple sizes, in multiple contexts, and across different browsers and devices. Getting it right means understanding the requirements and following a predictable process.
Favicon sizes and formats
The most common favicon sizes are 16×16, 32×32, 48×48, and 180×180 (for Apple touch icons). The 32×32 size is the standard for browser tabs. The 180×180 size is used for iOS home screen icons.
The traditional format is ICO, which can contain multiple sizes in a single file. Modern browsers also support PNG, which offers better quality and transparency. SVG is the newest option — it scales to any size and is supported by all modern browsers.
For maximum compatibility, provide a 32×32 PNG favicon and a 180×180 Apple touch icon. If you want to support older browsers, also provide an ICO file.
How to create a favicon
Start with a simple, recognizable design. At 16×16 pixels, there is no room for detail. A single letter, a simple shape, or a simplified version of your logo works best.
Create the design at a large size (512×512 or 1024×1024) and then scale down. This gives you control over how the icon looks at each size. Some details that look good at 1024×1024 may disappear at 16×16.
Export the icon at the required sizes. Most favicon generators handle this automatically — upload a large image and get back all the standard sizes.
Adding the favicon to your site
Place the favicon file in the root of your website and add the following HTML to the <head> section:
<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">For ICO format, use: <link rel="icon" type="image/x-icon" href="/favicon.ico">
Common mistakes
The most common mistake is using a photo or complex design. At favicon size, photos become an unreadable blur. Use a simple, high-contrast design.
Another mistake is providing only one size. The browser may need to scale your icon, which produces a blurry result. Provide the standard sizes explicitly.
Finally, do not forget to clear your browser cache after updating the favicon. Browsers cache favicons aggressively, so you may not see the change immediately.
Wrapping up
A favicon is a small detail that makes a big difference. Create a simple, recognizable design, export it at the standard sizes, and add the HTML to your site head. Clear your cache after updating and verify it works across browsers.
Start with a 512×512 design, scale down to 32×32 and 180×180, and provide both PNG and ICO formats for maximum compatibility.