What is the Apple Touch icon?

The Apple Touch icon (180x180px) is used when a user adds your website to their iPhone or iPad home screen. Without it, iOS uses a screenshot of your page as the icon, which looks unprofessional. Add to your HTML . This tool generates the 180px PNG and includes the correct HTML line in the HTML snippet. Older iOS versions used 57px and 72px; modern iOS (10+) only needs 180px.

What does the HTML snippet include?

The generated HTML snippet includes: a tag for the standard favicon, a for iOS home screen icons, a pointing to site.webmanifest for PWA support, and a pointing to browserconfig.xml for Windows tiles. Copy the snippet and paste all lines into the of your HTML. Update the paths if your icons are in a subfolder.

Favicon Generator — ICO, PNG, Apple Touch, PWA Icons & Manifest Free

Why use the Favicon Generator?

Complete package

PNG sizes, favicon.ico, manifest and browserconfig in one download.

Smart scaling

Automatically centers and scales your artwork for every resolution.

Ready-made snippet

Copy the HTML lines generated for you.

Privacy friendly

Everything runs in your browser – no uploads to our servers.

How to use the Favicon Generator?

Add your image

Upload a square PNG, JPG or SVG logo (8MB max).

Pick sizes & style

Choose the favicon sizes, background style and corner radius.

Generate previews

Review every icon size and copy the HTML snippet if you need it.

Download the package

Grab the ZIP with PNGs, favicon.ico, manifest and browserconfig files.

Frequently asked questions

A square transparent PNG at 1024x1024px or larger gives the sharpest results at all sizes. SVG also works and scales perfectly for any resolution. JPG works but cannot have a transparent background — the tool will add a solid background color. For best quality: start with at least 512x512px, keep the design centered, and use minimal detail since favicons are displayed at sizes as small as 16x16px.

The generator produces PNG icons at: 16, 24, 32, 40, 48, 57, 64, 72, 96, 120, 128, 144, 150, 180, 192, 256, 384, and 512 pixels square. The "Modern" preset covers the 5 most essential sizes; the "Complete" preset generates all 18. favicon.ico contains the 16, 32, and 48px versions embedded in a single file for legacy browser support.

favicon.ico is a legacy multi-resolution container format supported by all browsers since IE 5. Modern browsers (Chrome, Firefox, Safari, Edge) prefer PNG favicons because they support full color depth and transparency with smaller file sizes. The best practice is to include both: favicon.ico for legacy compatibility, and <link rel="icon" type="image/png"> tags pointing to appropriately sized PNG files for modern browsers.

The Apple Touch icon (180x180px) is used when a user adds your website to their iPhone or iPad home screen. Without it, iOS uses a screenshot of your page as the icon, which looks unprofessional. Add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> to your HTML <head>. This tool generates the 180px PNG and includes the correct HTML line in the HTML snippet. Older iOS versions used 57px and 72px; modern iOS (10+) only needs 180px.

Progressive Web Apps (PWAs) require 192x192 and 512x512 icons listed in the site.webmanifest file. The 192px icon appears on the Android home screen when the user installs your PWA. The 512px icon is used for the PWA splash screen. This tool generates both PNG files and creates a site.webmanifest with the correct icons array. Add <link rel="manifest" href="/site.webmanifest"> to your HTML <head> to enable PWA installation.

The generated HTML snippet includes: a <link rel="icon"> tag for the standard favicon, a <link rel="apple-touch-icon"> for iOS home screen icons, a <link rel="manifest"> pointing to site.webmanifest for PWA support, and a <meta name="msapplication-config"> pointing to browserconfig.xml for Windows tiles. Copy the snippet and paste all lines into the <head> of your HTML. Update the paths if your icons are in a subfolder.

Yes. Modern browsers (Chrome 80+, Firefox 41+, Safari 15+) support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons scale perfectly at any resolution and support dark mode via @media (prefers-color-scheme: dark). Enable the "Include favicon.svg" option in this tool to add the SVG to your package. Keep ICO and PNG files too for Safari 14 and older browser fallback.

No. All resizing, format conversion, and packaging happens entirely in your browser via JavaScript. Your image never touches any server. Nothing is stored, logged, or transmitted — the process is completely private and works offline after the page loads.

What Is a Favicon Generator?

A favicon generator takes one image and spits out every icon size your site needs -- favicon.ico, Apple touch icons, Android manifest icons, the lot. Instead of manually resizing in Photoshop, you upload once and download a ready-to-deploy package.

What You Get

The tool produces a multi-resolution ICO file, individual PNGs from 16x16 up to 512x512, an Apple touch icon, plus the HTML snippet and site.webmanifest you can drop straight into your project. Everything follows current browser and PWA standards.

Common Use Cases

Launching a new site and need all the icons sorted in one go. Rebranding and replacing favicons across multiple properties. Building a PWA and need the manifest icons at exactly the right dimensions.

Tips for Best Results

Start with a square image at least 1024x1024 pixels. Transparent PNGs give you the most flexibility. Keep the design simple -- favicons are tiny, so fine detail gets lost at small sizes.

Privacy

All resizing and packaging happens in your browser. Your image never touches a server, and nothing is stored after you close the tab.

Security and Privacy

Your data security is our priority

Local Processing

All processing happens in your browser

No Data Transfer

Your data is not sent to our servers

No Data Storage

No data is stored or shared

SSL Encryption

SSL encryption for secure connection

Favicon Generator – Complete icon package builder

Upload your source image

Drag & drop your image here

Icon sizes

Preview & download individual icons

Quick guidelines

HTML snippet

Manifest preview

Why use the Favicon Generator?

Complete package

Smart scaling

Ready-made snippet

Privacy friendly

How to use the Favicon Generator?

Add your image

Pick sizes & style

Generate previews

Download the package

Frequently asked questions

What Is a Favicon Generator?

What You Get

Common Use Cases

Tips for Best Results

Privacy

Security and Privacy

Local Processing

No Data Transfer

No Data Storage

SSL Encryption

Next Step

Image Resize Tool

SVG to Image Converter

Favicon Generator – Complete icon package builder

Upload your source image

Drag & drop your image here

Advanced: individual sizes

Icon sizes

Preview & download individual icons

Quick guidelines

HTML snippet

Manifest preview

Why use the Favicon Generator?

Complete package

Smart scaling

Ready-made snippet

Privacy friendly

How to use the Favicon Generator?

Add your image

Pick sizes & style

Generate previews

Download the package

Frequently asked questions

What image format works best as the source?

Which sizes does the generator produce?

What is the difference between favicon.ico and PNG favicons?

What is the Apple Touch icon?

What PWA icons are included and what is the manifest?

What does the HTML snippet include?

Can I use an SVG as a favicon?

Does my image get uploaded anywhere?

What Is a Favicon Generator?

What You Get

Common Use Cases

Tips for Best Results

Privacy

Security and Privacy

Local Processing

No Data Transfer

No Data Storage

SSL Encryption

Next Step

Image Resize Tool

SVG to Image Converter

Related Tools

Placeholder Image Generator

Screenshot Beautifier

Image Crop Tool

ASCII Art Generator

Image Compare

Image Watermark