Generate All Favicon Sizes for Your Website

Beginner5 minutes5 steps

Create all required favicon sizes (16x16 to 512x512) from a single image for your website, including Apple touch icons.

What You Need

A square logo or icon image (512x512px minimum)
Access to your website files

Prepare Your Source Image

Start with a square image at least 512x512 pixels. SVG format is ideal because it scales perfectly. PNG with a transparent background also works well.

Keep the design simple — favicons are tiny. Complex logos with fine details will not render well at 16x16 pixels.

Open the Favicon Generator

Navigate to OnlineTools4Free Favicon Generator.

Upload Your Image

Upload your source image. The tool shows a preview at various sizes so you can verify the icon is recognizable even at 16x16.

Generate All Sizes

Click "Generate" to create all standard favicon sizes: 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android), and 512x512 (PWA).

Download and Install

Download the ZIP file with all generated favicons. Place them in your website root directory and add the appropriate link tags to your HTML head section.

For Next.js, place favicon.ico in the app directory and apple-icon.png alongside it. Next.js handles the meta tags automatically.

Ready to Try It?

Open the tool and follow the steps above. It is free, private, and works in your browser.

Try It Now

Frequently Asked Questions

What sizes do I need?

At minimum: favicon.ico (16x16/32x32), apple-touch-icon.png (180x180), and icon-512.png (512x512 for PWA). The generator creates all standard sizes.

Should my favicon have a transparent background?

For browser tabs, yes. For Apple touch icons, add a solid background color because iOS does not support transparency for home screen icons.

What format should favicons be?

favicon.ico for the main favicon (multi-size), PNG for Apple touch icons and Android icons, SVG for modern browsers.

How do I add favicons to my website?

Place the files in your root directory and add link tags in the head: <link rel="icon" href="/favicon.ico"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">.

Why does my favicon not show up?

Clear your browser cache (Ctrl+Shift+R). Favicons are heavily cached. Also verify the file path in your HTML matches the actual file location.

Related Tutorials

Intermediate10 minutes

Set Up Perfect Meta Tags for Next.js