How to Create a Favicon for Your Website: ICO File Guide
That tiny icon in your browser tab does more work than you might think. Favicons appear in tabs, bookmarks, browser history, mobile home screens, and desktop shortcuts. A missing favicon makes your site look unfinished. A good one makes it instantly recognizable among dozens of open tabs. Creating one takes about five minutes when you know the required sizes and formats.
What Is a Favicon?
A favicon (short for "favorite icon") is the small icon associated with your website. Browsers display it in the tab bar next to your page title, in the bookmarks list, and in browser history. Mobile devices use it when users add your site to their home screen. Search engines may display it in results. It is one of the smallest visual elements of your site, but one of the most frequently seen.
Required Favicon Sizes
Different contexts display your favicon at different sizes. To cover all use cases, you need several versions:
16x16 pixels — Browser tabs. This is the classic favicon size and the smallest version you need. 32x32 pixels — Taskbar shortcuts, newer browser tabs on high-DPI displays. 48x48 pixels — Windows desktop shortcuts and site icons.
180x180 pixels — Apple Touch Icon. This is what iOS uses when someone adds your site to their home screen. It is the most important mobile size. 192x192 pixels — Android Chrome home screen icon and PWA (Progressive Web App) icon. 512x512 pixels — PWA splash screens and the Android install dialog.
Favicon Formats Explained
ICO format: The original favicon format, and the only one that works everywhere — including very old browsers and Internet Explorer. An ICO file can bundle multiple sizes into a single file (typically 16x16, 32x32, and 48x48). For maximum compatibility, every website should have a favicon.ico file in the root directory. The PNG to ICO converter on iformat.io makes creating one simple.
PNG format: The modern alternative. PNG favicons are simpler to create (one image per file) and support full transparency. All modern browsers support PNG favicons. The downside is that you need separate files for each size, and very old browsers may not support them.
SVG format: The newest option. Because SVG is a vector format, a single file scales perfectly to any size — no pixelation, no multiple files. SVG favicons are supported by Chrome, Firefox, and Edge, but not by Safari (as of early 2026). SVG favicons also support dark mode adaptation through CSS media queries, which PNG and ICO cannot do.
Step 1: Design Your Icon
The most important rule of favicon design: keep it simple. Your icon will be displayed as small as 16x16 pixels — that is a grid of just 256 squares. Fine details, thin lines, and small text will be unreadable at that size. The best favicons are bold, recognizable shapes with high contrast.
Use your logo if it works at tiny sizes. Many companies use just the first letter of their name or a simplified version of their logo mark. Avoid photographs — they become unrecognizable blobs at 16x16. Solid colors and simple geometric shapes work best. Test your design by viewing it at 16x16 pixels before committing.
Step 2: Create the ICO File
Start with a square PNG image at least 512x512 pixels. A larger source gives you cleaner results when scaled down. Use the PNG to ICO converter to generate your ICO file. The converter creates a multi-size ICO containing 16x16, 32x32, and 48x48 versions — all from your single source image.
If your source image is a JPG (such as a logo exported from a design tool), use the JPG to ICO converter instead. For vector logos in SVG format, the SVG to ICO converter produces the sharpest results because it renders the vector at each target size.
Step 3: Add the HTML Code
Place your favicon.ico file in your website's root directory. Most browsers will find it automatically at /favicon.ico even without an HTML tag. But for explicit control and to support all formats, add these tags inside your HTML
<head> section:<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Classic ICO favicon. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — PNG favicon for modern browsers. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — Apple devices home screen icon.Step 4: Generate Apple Touch Icon and Android Icons
The Apple Touch Icon (180x180 PNG) is displayed when iOS users add your site to their home screen. Create a 180x180 pixel PNG version of your icon with some padding around the edges — iOS will apply its own rounded corners. Name it apple-touch-icon.png and reference it in your HTML.
For Android and Progressive Web Apps, you need 192x192 and 512x512 PNG icons. These are typically referenced in a web app manifest file (manifest.json or site.webmanifest). The manifest file also lets you set your app name, theme color, and display mode for when users install your site as an app.
Common Favicon Mistakes
Using too much detail: A complex logo with thin lines and small text looks great at 200px but becomes an unreadable smudge at 16px. Simplify ruthlessly. Forgetting dark mode: If your favicon uses a dark color on a transparent background, it will be invisible in browsers with dark tab bars. Consider adding a light border or using SVG favicons with dark mode CSS.
Not testing at actual size: Always preview your favicon at 16x16 in an actual browser tab. What looks good in your design tool at 400% zoom may not work at real size. Skipping the ICO file: While PNG favicons work in modern browsers, having a favicon.ico in your root directory ensures compatibility with every browser and crawler, including legacy systems.
Testing Your Favicon
After uploading your favicon files and adding the HTML, test across multiple browsers: Chrome, Firefox, Safari, and Edge at minimum. Check that the icon appears correctly in the tab, in bookmarks (bookmark a page and verify), and on mobile (add to home screen on both iOS and Android). Browser caches can be aggressive with favicons — if you do not see your new icon, try clearing the cache or opening an incognito window.
If you need to go the other direction — extracting icons from an existing ICO file — the ICO to PNG converter extracts the embedded images. This is useful when you need to update a favicon but only have the ICO file and not the original source artwork.
A proper favicon takes five minutes to create but gives your website a polished, professional appearance. Start with a simple, bold design, generate your ICO file with an online converter, add the HTML tags, and test across browsers. Your site will look complete — and your users will be able to find your tab among the dozens they have open.