How to Generate Favicons for Your Website

Updated: April 5, 2026

A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Getting it right requires generating multiple sizes for different platforms and devices. This guide walks you through the process.

When You Need Favicons

Launching a new website or web application
Rebranding and updating your site's visual identity
Adding PWA (Progressive Web App) support
Fixing missing or blurry favicons across devices
Setting up a development project boilerplate

How to Generate Favicons

Step 1: Prepare Your Source Image

Start with a square image, ideally 512×512px or larger. PNG or SVG works best. The image should be simple and recognizable at small sizes — avoid fine details that disappear at 16×16.

Step 2: Upload to the Generator

Open the Favicon Generator and drag-and-drop your image or click to browse. The tool instantly creates previews in all 8 standard sizes.

Step 3: Download Your Files

Download individual PNGs for specific sizes, or use “Download All” to get everything at once. The ICO file bundles 16×16, 32×32, and 48×48 for maximum browser compatibility.

Step 4: Add HTML Tags

Copy the generated HTML tags and paste them into your <head> section. Place the favicon files in your site's root directory.

Required Sizes Reference

16×16 — Browser tab (standard)
32×32 — Browser tab (HiDPI / Retina)
48×48 — Windows site icon
180×180 — Apple Touch Icon (iOS Safari)
192×192 — Android Chrome
512×512 — Android Chrome splash screen

Tips

Test your favicon at 16×16 to ensure it's still recognizable — simplify the design if needed
Use a transparent background for PNG favicons if your brand allows it
Convert SVG logos to PNG first using our SVG to PNG Converter for the highest quality at large sizes
Compress large PNG favicons with the Image Compressor to improve page load speed

FAQ

What sizes do I need for favicons?

At minimum, you need 16×16 and 32×32 for browser tabs, 180×180 for Apple Touch Icon, and 192×192 plus 512×512 for Android Chrome. Our generator creates all common sizes from a single upload.

What is the difference between ICO and PNG favicons?

ICO is a legacy format that bundles multiple sizes (16, 32, 48) into one file. Modern browsers support PNG favicons directly via <link> tags. Using both ensures compatibility — ICO as fallback, PNG as primary.

What image format should I start with?

Start with a square PNG or SVG at 512×512 or larger. This gives the generator enough resolution to create crisp icons at all sizes. Avoid starting with a small image — upscaling creates blurry results.

Do I need a manifest.json for favicons?

For basic favicon support, HTML <link> tags are sufficient. A web app manifest (manifest.json) is needed for PWA (Progressive Web App) functionality, which specifies icons for home screen installation on mobile devices.

Try It Now

Ready to create your favicons? Open the Favicon Generator — it works entirely in your browser with no sign-up required.