PNG to ICO

Convert PNG images to multi-size ICO files for browser favicons. Select sizes from 16x16 to 256x256. Preview before download. All processing in your browser.

Key features

Convert PNG to ICO favicon format
Select multiple sizes: 16x16, 32x32, 48x48, 64x64, 128x128, 256x256
Multi-size ICO files in a single download
Preview your image before converting
Browser-based conversion workflow

Guide

ICO is the icon file format used by Windows for application icons, shortcut icons, and favicons. A favicon (favorites icon) is the small image that appears in browser tabs, bookmarks, the browser address bar, and mobile home screen shortcuts. This tool converts a PNG image to ICO format, producing a properly structured multi-resolution favicon file that works across all browsers and operating systems. The conversion runs in your browser using JavaScript ArrayBuffer manipulation. No file is uploaded to any server. Why ICO still matters in 2026. Modern browsers accept PNG, SVG, and even WebP as favicons through explicit link tags. You can add a simple link rel="icon" type="image/png" href="favicon.png" to your HTML and Chrome, Firefox, Safari, and Edge will all display it. However, ICO format remains relevant for several important reasons. First, the automatic discovery convention. Every browser, dating back to Internet Explorer 5 in 1999, checks for a file at /favicon.ico in the root directory of a website. This happens automatically without any HTML link tag. Placing a valid favicon.ico at your domain root ensures that every browser, bot, feed reader, and bookmark tool can find your icon without parsing your HTML. This convention is deeply embedded in the web ecosystem. Second, Windows desktop integration. When a user creates a desktop shortcut to your website, Windows uses the ICO file for the shortcut icon. The ICO file is also used in the taskbar when the site is pinned. Windows specifically expects ICO format for these system-level icon displays and may not correctly use a PNG or SVG favicon in these contexts. Third, multi-resolution in a single file. The ICO format can contain multiple images at different resolutions in a single file. Windows and browsers select the most appropriate size for each display context. A browser tab needs 16x16. The Windows taskbar needs 32x32. The desktop shortcut needs 48x48. Windows Explorer large icon view needs 256x256. One ICO file serves all of these needs. With PNG favicons, you need separate files and separate link tags for each size. Fourth, enterprise environments. Many corporate networks run managed desktops with older Windows configurations. Internet Explorer 11, which requires ICO for favicons, is still present in some enterprise environments. Internal web applications used by thousands of employees may need ICO support for years to come. ICO format structure. An ICO file is a binary container with a specific header structure. The file begins with a 6-byte header: 2 bytes reserved (always 0), 2 bytes image type (1 for ICO, 2 for CUR cursor file), and 2 bytes indicating the number of images in the file. Following the header, each image has a 16-byte directory entry containing: width (1 byte, 0 means 256), height (1 byte, 0 means 256), color count (1 byte, 0 if more than 256 colors), reserved (1 byte), color planes (2 bytes), bits per pixel (2 bytes), image data size (4 bytes), and offset to image data (4 bytes). After all directory entries, the actual image data follows at the specified offsets. Each image inside the ICO can be stored as either a BMP (Device Independent Bitmap) or a PNG-compressed image. Modern ICO files (compatible with Windows Vista and later) store each entry as a full PNG file. This is more space-efficient than BMP and is the approach this tool uses. The browser or operating system reads the ICO header to determine how many images are available and at what sizes, then selects the closest size to what it needs. What this tool does. You provide a PNG image of any size, and the tool generates an ICO file containing properly sized versions. The tool resizes your source PNG to 16x16, 32x32, and 48x48 pixels (and optionally 64x64 or 256x256), then packages all sizes into a single ICO container using JavaScript ArrayBuffer and DataView for binary construction. The resizing uses the Canvas API with the browser's built-in high-quality downsampling filter. The output is a standards-compliant ICO file that you can save as favicon.ico and deploy to your website. Step-by-step usage. Open the PNG to ICO converter page. Upload or drag a PNG image onto the drop zone. The tool displays a preview of the source image and shows how it will look at each target size. Select which sizes to include in the ICO file using checkboxes. The default selection (16, 32, 48) covers the most common use cases. Click the convert button. The tool processes each size (resizing on canvas, exporting as PNG blob, reading the blob as ArrayBuffer) and packages all sizes into a single ICO binary. Click download to save favicon.ico. Upload the file to your website's root directory, accessible at https://yourdomain.com/favicon.ico. Verify by opening your site and checking the browser tab icon. Source image recommendations. Start with a square PNG at 512x512 or larger. This gives the downscaling algorithm enough detail to produce clean results at all target sizes, including 16x16. If your source is only 64x64, the 16x16 version will have very little detail to work with, and the downscaling is just 4x. Starting from 512x512 means the 16x16 version is downscaled 32x, which gives the algorithm much more source data for anti-aliasing and produces a smoother, cleaner result. Non-square images will need cropping or padding. If your logo is wider than it is tall, you can either crop to the center square or add padding above and below to make it square. Padding with transparency works well because ICO supports alpha transparency. The tool handles non-square inputs by center-cropping to a square, but you may want to adjust the crop manually for logos that are not centered. Designing effective favicons. At 16x16 pixels you have 256 total pixels to work with. This is not enough space for a full logo with text in most cases. The text on most logos becomes completely unreadable at 16 pixels wide. Successful favicons use a single letter, a simple symbol, or a distinctive color block. Google uses a multicolored "G". Twitter/X uses the bird silhouette. Facebook uses a white "f" on a blue background. GitHub uses the Octocat silhouette. Netflix uses a red "N". The pattern is clear: one simple, bold shape with strong contrast. If your brand logo is complex (multiple elements, detailed illustration, wordmark with thin letterforms), create a simplified favicon version. Extract the most recognizable single element from the logo and use that. Some brands use an entirely different icon for their favicon that is visually related to but not identical to their full logo. Colors and contrast. The favicon appears against varying backgrounds. White in Chrome tabs on macOS and Windows. Dark gray or black in Chrome dark mode tabs. The Windows taskbar color (which the user can customize). Bookmark bar backgrounds. New tab page backgrounds. Design your favicon with enough contrast to be visible on both light and dark backgrounds. A solid colored square with a white symbol works on most backgrounds. Avoid very light colors like pale yellow or light gray, which disappear against white tab bars. Avoid very dark colors without a lighter interior element, as they disappear in dark mode. Transparency in favicons. ICO format supports full alpha transparency. If your source PNG has transparent regions, they carry through to each size entry in the ICO file. This is useful for non-rectangular icon shapes (circles, custom silhouettes, letterforms) that should not have a visible background rectangle. All modern browsers and Windows render ICO transparency correctly. The transparent areas show the underlying tab or taskbar background color. However, be careful with transparency on very small sizes. A circular icon at 16x16 with anti-aliased edges has only about 196 fully opaque pixels (the rest are partially transparent edge pixels). The anti-aliasing may look blurry against some backgrounds. Consider whether a solid square background at 16x16 would be more legible than a transparent circular shape. HTML integration for a comprehensive favicon setup. The simplest approach is to place favicon.ico in your website's root directory. Browsers automatically check for /favicon.ico when no explicit icon link is provided. For full control and maximum compatibility, add link tags in your HTML head section. The classic ICO for broad compatibility: link rel="icon" type="image/x-icon" href="/favicon.ico". A 32x32 PNG for modern browsers: link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png". A 16x16 PNG for explicit small-size declaration: link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png". An Apple touch icon for iOS home screen bookmarks: link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" (Apple applies its own rounded corners and glossy effect). An SVG icon for browsers that support it, which scales perfectly to any size: link rel="icon" type="image/svg+xml" href="/favicon.svg". A web app manifest for Progressive Web Apps: link rel="manifest" href="/site.webmanifest" (the manifest references 192x192 and 512x512 PNG icons). Common mistakes. Using a photograph as a favicon. Photographs contain too much detail, too many colors, and too little contrast to be recognizable at 16x16 pixels. The result looks like a blurry colored square. Use a simplified graphic derived from your logo or brand identity instead. Forgetting to include the 16x16 size. If your ICO only contains a 256x256 image, the browser must downscale it in real time for the tab icon. Most modern browsers handle this correctly, but some older environments display nothing or show a distorted result. Some favicon checking tools also flag missing 16x16 and 32x32 entries as errors. Always include 16x16 and 32x32 at minimum. Renaming a PNG file to .ico. Renaming photo.png to favicon.ico does not create a valid ICO file. The ICO format has a specific binary structure (6-byte header, 16-byte directory entries per image, then image data at specified offsets) that is completely different from PNG. Some browsers can detect a PNG hidden behind an .ico extension and display it correctly, but Windows desktop shortcuts, Internet Explorer, and many web tools will not. Use this tool to create a properly structured ICO binary. Caching issues. Browsers aggressively cache favicons, often for weeks or months. After uploading a new favicon.ico, you may still see the old one. Clear your browser cache (Ctrl+Shift+Delete), or hard refresh the page (Ctrl+Shift+R). For development and testing, open the favicon URL directly in a new tab and hard refresh there. In production, add a version query string to the link tag: href="/favicon.ico?v=2". For builds with asset hashing, use a content hash in the filename (favicon.a1b2c3.ico) for reliable cache-busting. Multi-resolution ICO best practices. 16x16: browser tabs, address bar favicons, bookmarks bar. 32x32: Windows 10/11 taskbar, retina/HiDPI browser tabs (displayed at 16x16 logical pixels but 32x32 physical pixels). 48x48: Windows desktop shortcuts when set to medium icon size, Windows alt-tab previews. 64x64 (optional): Windows medium icon view in some configurations. 256x256 (optional): Windows Explorer large and extra-large icon view, Windows 10/11 Start menu tiles. A 3-size ICO (16, 32, 48) is typically 2-10 KB. A 5-size ICO (16, 32, 48, 64, 256) ranges from 15-50 KB depending on image complexity. BMP versus PNG compression inside ICO. Older ICO files (pre-Windows Vista) stored each size as an uncompressed BMP bitmap with a specific header structure including a doubled height value for the AND mask. A BMP-based 256x256 icon entry alone can be 200+ KB uncompressed. Modern ICO files store each size as a complete PNG image (with full PNG header), which is dramatically smaller. Windows Vista (2006) and later, and all modern browsers, support PNG-compressed ICO entries. This tool uses PNG compression for all entries, which is the correct approach for any modern deployment. SVG favicons as a modern alternative. Firefox (since version 41), Chrome (since version 80), Edge (Chromium-based), and Safari (since version 16.4) support SVG favicons via link rel="icon" type="image/svg+xml". An SVG favicon scales perfectly to any size without pixelation. It can also include CSS media queries for dark mode adaptation, changing icon colors when the user's system is in dark mode. This is a feature that bitmap formats (ICO, PNG) cannot provide. If you have an SVG version of your icon, use it as the primary favicon and keep the ICO as a fallback for Windows desktop integration and any remaining environments that do not support SVG favicons. Web app manifest icons. Progressive Web Apps (PWAs) define icons in a manifest.json or site.webmanifest file. These icons are used for the installed app icon on mobile home screens, Android launcher, desktop application launchers, and Windows Start menu. PWA icons must be PNG format at sizes 192x192 and 512x512 at minimum. They are not ICO files. The same source PNG you use for ICO conversion can be resized for PWA manifest icons, creating a unified icon set from a single source. Testing across platforms and browsers. After generating your favicon.ico, test it in multiple environments. Open your site in Chrome, Firefox, Safari, and Edge to verify the tab icon appears correctly. Bookmark the page to the bookmarks bar and check the icon there. On Windows, drag the URL to the desktop to create a shortcut and verify the shortcut icon. On iOS, add the page to the home screen and check the touch icon (note: iOS uses apple-touch-icon, not favicon.ico). Use the RealFaviconGenerator checker to verify that all sizes are present and correctly formatted. The checker scans your site and reports any missing or malformed favicon configurations. Dark mode adaptation. Unlike SVG favicons, ICO files cannot dynamically adapt to the user's light or dark color scheme preference. If your favicon uses a dark color that becomes invisible against a dark browser tab bar (Chrome dark mode, Firefox dark theme), there is no automatic remedy with ICO format. Two workarounds exist: design the icon with a light border or outline that ensures visibility on dark backgrounds, or use colors that contrast sufficiently against both light and dark backgrounds. Alternatively, serve an SVG favicon as the primary icon for dark mode adaptation and keep the ICO as a fallback. Programmatic ICO generation for build pipelines. Developers who need to generate ICO files automatically in a CI/CD pipeline or build system can use Node.js libraries like png-to-ico, to-ico, or sharp combined with a manual ICO binary builder. The process is the same as the browser tool: resize the source PNG to target sizes, construct the ICO header (6 bytes), write directory entries (16 bytes each), append each PNG image data at the correct offsets, and output the concatenated binary. The favicons-webpack-plugin and vite-plugin-favicon can automate this as part of a web application build. Favicon generation services. Online services like RealFaviconGenerator, Favicon.io, and Favycon generate complete favicon packages from a single source image. These packages include favicon.ico, multiple PNG sizes, Apple touch icons, Android manifest icons, and the necessary HTML markup. If you need the full set, these services are convenient. This tool focuses specifically on the PNG-to-ICO conversion, which is the most common single operation needed by developers who already have their PNG source and just need the ICO container. ICO files for Windows applications. Beyond web favicons, ICO files are used as application icons in Windows executables (.exe files). The icon embedded in an EXE is stored in the PE (Portable Executable) resource section in ICO format. Application icons typically need more sizes than web favicons: 16x16, 24x24, 32x32, 48x48, 64x64, and 256x256 to cover all Windows display contexts (title bar, taskbar, Start menu, file explorer at various zoom levels). If you are developing a Windows application using Electron, Tauri, or native frameworks, generate a comprehensive ICO with all six sizes. ICO versus ICNS. macOS uses the ICNS format instead of ICO for application icons. ICNS files contain multiple PNG images at sizes up to 1024x1024. If you are developing a cross-platform application, you need both an ICO file for Windows and an ICNS file for macOS. The source PNG is the same for both. Use this tool for the ICO and a separate tool (or iconutil on macOS) for the ICNS. Favicon and brand recognition. Studies of user behavior show that consistent favicon use improves tab identification and brand recall. Users with many open tabs rely on favicons to find the right tab. A missing or generic favicon forces users to read tab titles, which slows navigation. An inconsistent favicon (changing between page loads or across subdomains) confuses users. Ensure your favicon is consistent across all pages of your site by placing the ICO in the root directory and using consistent link tags. Favicon file size and performance. A typical 3-size ICO file is 2-10 KB. This is a single request that is cached for the duration of the browser session (or longer with appropriate cache headers). The performance impact is negligible. Some developers worry about favicon file size, but compared to the hundreds of KB of JavaScript and CSS that modern pages load, a 5 KB favicon is trivial. Focus your optimization efforts on images, JavaScript bundles, and fonts, not on the favicon. Historical context. The favicon convention was introduced by Internet Explorer 5 in 1999. Microsoft engineers wanted a way for users to customize their Favorites (bookmarks) list with site-specific icons. The convention of checking /favicon.ico spread to other browsers. The ICO format itself dates back to Windows 1.0 in 1985, making it one of the oldest image formats still in active use. Despite its age, ICO remains relevant because of the deep integration with Windows and the web convention that relies on it.

Frequently asked questions

What sizes should I include in my favicon?

16x16 and 32x32 are essential. Adding 48x48 and 64x64 provides better coverage across browsers and devices.

Can I use SVG instead of ICO?

Modern browsers support SVG favicons, but ICO is still needed for full compatibility, especially with older browsers.