Smart Favicon Generator

Create favicons, apple-touch-icons, Android Chrome icons, and complete PWA icon packages from any image. Live previews across browser tabs, mobile home screens, and search results — then download a production-ready ZIP with all files and HTML tags.

About this tool

A professional favicon generator that creates every icon size your website needs in a single click — including a proper multi-size favicon.ico, PNG icons for all major platforms, an apple-touch-icon for iOS, and Android Chrome icons for PWA installation. All encoding and resizing happens inside your browser using the HTML5 Canvas API.

The drag-to-pan crop editor lets you position your logo precisely so it looks sharp at every size — from a crisp 16×16 browser tab icon to a 512×512 PWA splash screen. The quality analysis checks your source image and warns you about common issues before you generate. Your image never leaves your device.

How to use

1

Upload your image

Drag and drop or browse to select a PNG, JPG, WebP, or SVG file. Square images at 512×512 or larger give the sharpest results across all sizes.

2

Crop and style

Drag the crop preview to reposition your logo, adjust the zoom and padding sliders, and pick a background colour or enable transparency.

3

Set app details

Enter your app or site name and theme colour — these are embedded in the generated site.webmanifest for Progressive Web App support.

4

Generate and download

Click Generate Favicon Package. Preview your icon in a browser tab, mobile home screen, and bookmark bar, then download individual files or the complete ZIP.

Favicon design tips

Keep it square

Favicon canvases are always square. Non-square logos lose proportional content at small sizes — add padding to letterbox them correctly.

Use high-resolution source

Start from at least 512×512 pixels. Upscaling a small image produces blurry results at every size. SVG sources scale perfectly.

Pick a contrasting background

White icons disappear on light browser tabs; dark icons vanish in dark mode. A solid brand-coloured background keeps your icon visible everywhere.

Avoid small text

Text that looks fine at 512px becomes unreadable at 16px. Use a simplified mark or icon instead of your full wordmark for the favicon.

Test on mobile

The apple-touch-icon and Android Chrome icon appear much larger than the browser tab icon. Make sure your design has enough padding and is centred.

Include all sizes

Different devices and browsers request different sizes. Providing the full set prevents browsers from upscaling and producing blurry results.

How it works

Canvas API rendering

Your image is drawn onto HTML5 Canvas elements at each required size using high-quality 2D context scaling. Zoom, pan, and padding are applied at render time — no quality is lost in intermediate steps.

ICO file encoding

favicon.ico is built from scratch using a pure-JavaScript binary encoder. The 16×16 and 32×32 PNGs are embedded inside a valid ICONDIR structure, exactly as browsers and OS icon loaders expect.

PWA icon standards

The 192×192 and 512×512 sizes follow the W3C Web App Manifest specification. The generated site.webmanifest correctly references these files so Chrome's install prompt and Android home-screen icons work.

100% private

Your image never leaves your device. All resizing, encoding, and packaging is performed using browser-native APIs. The download button creates a local Blob URL — nothing is transmitted to any server.

Related tools

Image Crop Tool

Crop images to any ratio — circle, square, Instagram, passport and more.

Image to PNG

Convert JPG, WebP, or SVG to lossless PNG format — bulk supported.

QR Code Generator

Generate QR codes for URLs, WiFi, UPI, contact cards and more.

Watermark Tool

Add text or logo watermarks to images with drag-to-position control.

Frequently asked questions

Quick answers about this free online tool.

Modern websites need multiple favicon sizes. The bare minimum is favicon.ico at 16×16 and 32×32. For full coverage you should also include 48×48 (Windows), 180×180 (Apple Touch Icon), 192×192 and 512×512 (Android/PWA). This generator creates all of these in one click.

Copy the generated HTML tags into your <head> element, upload all the icon files to your website root directory, and upload the site.webmanifest file. Most visitors will see the new favicon immediately; some browsers cache it for up to 24 hours.

favicon.ico is the original favicon format dating back to Internet Explorer 5. Many servers automatically request /favicon.ico even without a <link> tag. It can embed multiple image sizes (this tool packs 16×16 and 32×32 inside a single .ico file) so the browser picks the most appropriate size.

A favicon at 16×16 is only 256 pixels — any fine detail will be lost. Use a bold, simple icon without thin lines, small text, or intricate patterns. If your logo is complex, consider creating a simplified version specifically for the favicon. Increasing the padding and centering the icon also helps.

All modern browsers (Chrome, Firefox, Edge, Safari 14+, Opera) support PNG favicons via the <link rel='icon' type='image/png'> tag. Internet Explorer only supports .ico files. For maximum compatibility this tool generates both favicon.ico and PNG files.

When an iOS or macOS user adds your website to their Home Screen or bookmarks, Apple uses the apple-touch-icon (180×180 PNG) as the icon. Unlike the standard favicon it doesn't need to be square — iOS applies rounded corners automatically. Use a solid background colour rather than transparency for the best appearance.

A site.webmanifest file tells browsers about your Progressive Web App — its name, icon sizes, theme colour, and display mode. It is required for the 'Add to Home Screen' prompt on Android Chrome and for full PWA installation support. The generated manifest already references the 192×192 and 512×512 icons.

It depends on your design. Transparent favicons look great in light-mode browsers but may be invisible in dark-mode browser tabs if the icon is also dark. A solid contrasting background colour ensures visibility in every environment. Use the background colour picker to test different options before generating.