Favicon Generator
Use our free online Favicon Generator tool. Fast, accurate, and completely browser-based. No signup needed. Process your data instantly with this Image Tools utility.
What a Favicon Is and Where It Appears
A favicon (short for "favorites icon") is the small image that appears in browser tabs next to the page title, in browser bookmarks, in the address bar on some browsers, and on the home screen when a mobile user saves your site as a web app shortcut. It is typically 16×16 or 32×32 pixels — extremely small by image standards.
Despite its size, the favicon plays a real role in brand recognition. When someone has twelve tabs open, they scan the favicons to find the site they want. A recognizable, distinct favicon makes your site identifiable at a glance. A missing or broken favicon (the default browser icon) makes a site look unfinished, even if everything else is polished.
How to Generate a Favicon from an Existing Image
The most common workflow is to start with your logo or brand mark and resize it down to favicon dimensions. This tool takes your image, scales it to the selected size using the browser’s canvas renderer, and provides the output for download as a PNG.
The key challenge with favicons is that detail is lost at tiny sizes. A logo that looks sharp at 200×200 px may become an unreadable blur at 16×16 px if it contains fine lines, small text, or complex gradients. The standard approach is to use a simplified version of your logo for small sizes: a letter, an icon, or just the most distinctive shape element, stripped of any details that will not survive the downscale.
Before committing to a favicon, view your generated image at 16×16 px in actual browser tab conditions. The preview in most design tools shows images at their native pixel size with 1:1 mapping, which can look quite different from how a 16 px icon looks scaled to a higher-DPI display. Load the generated favicon in a real browser tab and evaluate it at actual display size.
Favicon Sizes: Which Ones Do You Need
The short answer is several. Different contexts use different sizes, and browser support for favicon formats has evolved in ways that mean a single file does not cover all cases optimally.
16×16 px is the traditional browser tab favicon size, inherited from early Internet Explorer. It is still the most widely used size and should always be provided.
32×32 px is used by most modern browsers for the address bar favicon on higher-DPI displays and for the favicon that appears in the Windows taskbar when a site is pinned.
48×48 px is used by Windows for web shortcuts on the desktop and in the taskbar for pinned sites.
180×180 px is the Apple Touch Icon — used when an iPhone or iPad user saves a website to their home screen. Without this size, iOS uses a scaled screenshot of the page, which looks poor. This is specified with a separate <link rel="apple-touch-icon"> tag.
192×192 px and 512×512 px are used by Android for Progressive Web App (PWA) home screen icons and splash screens, specified in the web app manifest file.
How to Add a Favicon to Your Website
The simplest method is to place a file named favicon.ico or favicon.png in the root directory of your website. Most browsers automatically look for /favicon.ico at the root and use it without any HTML required. For more control, link it explicitly in the <head> section of your HTML:
<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">The sizes attribute tells the browser which file to use for which context. Modern browsers select the most appropriate size from the options provided.
ICO Format vs. PNG Format
Historically, favicons were .ico files because that is the only format older Internet Explorer versions supported. ICO files can contain multiple image sizes in a single file, which was convenient. Modern browsers all support PNG favicons with explicit size declarations, and SVG favicons (with rel="icon" type="image/svg+xml") that scale to any size without quality loss.
For new websites, a combination of PNG files at the needed sizes plus an SVG favicon for modern browsers is the recommended approach. The ICO format is still worth providing at 32×32 px for browser compatibility, but it is no longer the primary format it once was.
Your Image Is Processed in Your Browser
The favicon generation runs entirely in your browser using the HTML5 Canvas API. Your source image is scaled in browser memory and the output PNG is generated locally. Nothing is uploaded to any server. Close the tab and the image data is gone.