ICO File Guide: How to Create Website Favicon Icons
The small icon that appears in your browser tab, in bookmarks, and on mobile home screens is called a favicon. It is stored in ICO format and served from the root directory of your website. Despite its small size, the favicon is one of the most consistently visible brand elements of any website — it appears in every open tab and every bookmark your visitors make. This guide explains the ICO format, what sizes your favicon needs, how to convert an image to ICO format for free, and how to add it to your website correctly.
What Is an ICO File?
ICO is an image file format developed by Microsoft for use in Windows applications and later adopted for web favicons. Its defining characteristic is that a single ICO file can contain multiple versions of the same image at different sizes and color depths. When a browser or operating system requests the favicon, it can choose whichever size is most appropriate for its display context rather than scaling a single image up or down. A typical favicon ICO file contains the image at 16x16, 32x32, and 48x48 pixels. The 16x16 version appears in browser tabs. The 32x32 version is used for taskbar pinning on Windows. The 48x48 version appears in the Windows Taskbar properties. Larger ICO files for Apple Touch Icons (152x152, 167x167, 180x180) are technically PNG files served via the apple-touch-icon link tag rather than embedded in the ICO, but they serve the same purpose on iOS devices. Before the widespread adoption of PNG and SVG for icons, ICO was the primary format for all Windows application icons. Windows EXE and DLL files embed ICO resources for their application icons. This legacy means ICO support is deeply embedded in Windows and all major browsers. Modern browsers also accept a PNG file as a favicon — you can specify a 32x32 PNG via a link tag with type image/png. However, the traditional favicon.ico file placed at the root of your domain remains the most reliable approach because browsers request it automatically without requiring any HTML configuration.
Creating the Source Image for Your Favicon
The most important rule for favicon design is simplicity. Your favicon will be displayed at 16x16 pixels in browser tabs — that is a 16-by-16 pixel grid. Any complex illustration, detailed text, or fine linework will be completely illegible at this size. Effective favicons use a single letter, a simple geometric shape, or a bold logomark. The best starting point for favicon creation is a high-resolution version of your logo or brand mark — ideally a square or easily croppable version. A square SVG or PNG at 512x512 pixels gives the conversion tool enough resolution to produce a clean 16x16 pixel output through proper downscaling. If your logo is rectangular or has decorative elements that do not reduce well, design a separate favicon-specific version. Many major brands do this. Google uses a capital G on a white background. Apple uses an Apple logo on a white or black background. Twitter (now X) uses its bird or X mark. The favicon is not supposed to be your full logo — it is an identifier that says "this is us" at a glance when you are looking at 30 open browser tabs. For color, consider how your icon will look both on light browser themes and dark browser themes. If your brand mark is light-colored, add a background or border that will make it visible on light tab bars. Test your favicon in both Chrome's light and dark modes before deploying. Avoid text unless you are using a single letter as your brand symbol. Multi-character text is unreadable at 16 pixels.
How to Convert an Image to ICO Format
Converting a PNG or JPG to ICO format requires a tool that understands the ICO container format, which can hold multiple image resolutions. The Image Format Converter on WikiPlus includes ICO as an output format option. To create a favicon using the converter, prepare your source image first. Use a square PNG at 512x512 pixels for best results. If your source image is not square, crop it to square before converting — this will prevent distortion in the ICO output. Open the Image Format Converter, drag in your square PNG, select ICO as the output format, and convert. The tool will encode your image in ICO format, typically at 32x32 pixels. Download the resulting ICO file and rename it favicon.ico. For a more complete favicon implementation, consider also generating the larger PNG sizes needed for Apple Touch Icons. Use the same square source image and convert it to PNG at 180x180 pixels (for apple-touch-icon) using the image resizer tool. Once you have your favicon.ico file, place it in the root directory of your website. Most modern browsers and servers will pick it up automatically. For additional control and to specify multiple sizes and formats, add the following to the head section of your HTML: a link tag with rel favicon pointing to favicon.ico, and optionally link tags for apple-touch-icon pointing to your 180x180 PNG. This ensures correct display across all browsers and platforms.
Favicon Best Practices for 2026
Favicon implementation has grown more complex as new device types and browser features have emerged. Here is a complete checklist for a thorough favicon setup in 2026. Place a favicon.ico file in the root directory of your domain. This file should contain at minimum a 16x16 and a 32x32 version. Browsers request this file automatically, even without a link tag in your HTML. Add an apple-touch-icon.png file at 180x180 pixels in your root directory, or reference it via a link tag in your HTML head. iOS and iPadOS use this when a user adds your site to their home screen. Add a 192x192 PNG icon and a 512x512 PNG icon referenced in your web app manifest (manifest.json) if your site is a Progressive Web App or if you want Android home screen icons. The 512x512 icon is shown on the Android splash screen. For modern browsers that support SVG favicons (Firefox, Chrome 88+), an SVG favicon can be specified via a link tag with type image/svg+xml. SVG favicons are resolution-independent and look crisp on all display densities. They also support the prefers-color-scheme media query, allowing you to serve different favicon appearances for dark and light browser themes. Test your favicon in multiple environments: Chrome on Windows (light and dark mode), Safari on macOS, Chrome on Android, and Safari on iOS. Favicon appearance varies by platform and browser, and what looks perfect in one environment may look poorly cropped or too small in another.
Frequently Asked Questions
- What size should a favicon ICO file be?
- A standard favicon.ico should contain at minimum a 16x16 and 32x32 pixel version of your icon. The 16x16 size appears in browser tabs. The 32x32 size is used for taskbar pinning on Windows and for higher-resolution displays. For a comprehensive favicon setup, also include a 48x48 version. The ICO format supports embedding multiple sizes in one file. Additionally, create a separate 180x180 PNG for Apple Touch Icon and 192x192 PNG for Android home screen icons — these are referenced separately in HTML.
- Can I use a PNG file as a favicon instead of ICO?
- Yes. Modern browsers accept PNG files as favicons when specified via a link tag with type image/png. However, the traditional favicon.ico file at your domain root is more universally supported, especially by older browsers and certain automated tools and feed readers that request favicon.ico without looking for link tags. For the most reliable cross-browser favicon display, use an ICO file at your root and optionally add a PNG link tag for higher-resolution support.
- Why does my favicon not appear after I upload it?
- Favicon caching is aggressive. Browsers and operating systems cache favicons for long periods — sometimes days. After uploading a new favicon, you may need to hard-reload the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache to see the updated icon. In Chrome, you can force a favicon refresh by visiting your domain, opening DevTools, right-clicking the refresh button, and selecting Empty Cache and Hard Reload. Some browsers may take 24 hours to refresh the cached favicon in bookmarks.