Favicon Generator

A favicon is the small icon displayed in browser tabs, bookmarks, history entries, and mobile home screens. Despite their tiny size, favicons serve as critical brand identifiers — they help users locate your site among dozens of open tabs and create visual recognition in bookmark lists. Modern favicons go beyond the classic 16×16 pixel browser tab icon. Websites now need multiple sizes: 16×16 and 32×32 for browser tabs, 48×48 for Windows taskbar, 180×180 for Apple touch icons on iOS, and up to 512×512 for Progressive Web App (PWA) manifest icons. The traditional ICO format can contain multiple resolutions in a single file, while modern browsers also support PNG and SVG favicons. SVG favicons are resolution-independent and support dark mode adaptation through CSS media queries. The AllTools Favicon Generator creates all necessary sizes from a single source image, processing everything in your browser using the Canvas API. Your logo or icon image is resized and exported locally — no uploads to any server.

Implementing favicons correctly requires several HTML declarations and files. The basic setup includes: a favicon.ico file in your site root for legacy browser support, PNG icons at 32×32 and 192×192 for modern browsers, an Apple touch icon at 180×180 for iOS home screen bookmarks, and a web manifest (manifest.json) with icon entries at 192×192 and 512×512 for PWA installation. The HTML head section needs these link tags: <link rel="icon" href="/favicon.ico" sizes="any"> for the ICO fallback, <link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32"> for modern browsers, and <link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS. Common mistakes include forgetting the Apple touch icon (iOS uses a generic screenshot instead), using only the ICO format (modern browsers prefer PNG), and not including manifest icons (breaking PWA install prompts). Test your favicon across Chrome, Safari, Firefox, and mobile devices to ensure consistent display.