Which favicon sizes does this generator make?

The PNG sizes are 16, 32, 48, 64, 180, 192 and 512 pixels square. favicon.ico contains the 16, 32 and 48 pixel frames. The 180 pixel file is apple-touch-icon.png for the iPhone or iPad home screen; the manifest names the 192 and 512 pixel PNGs. Custom sizes are not available.

What is the difference between an ICO file and a PNG favicon?

A PNG is one image at one size. An ICO holds several images in one file so the browser can select a frame. This generator puts PNG images inside the ICO container.

Where do the favicon files and HTML tags go?

Put the files in your site root, then paste the link tags from The markup into the head of each HTML page. Copy the manifest block into site.webmanifest at the root too. Set your site name in the field beside that block before saving the ZIP.

Can I make a favicon from text or emoji?

Yes. Set Source to Letter and enter one to three characters, such as GB or 🌱. Choose the letter colour, typeface and a square, rounded or circular plate. Emoji appearance depends on the fonts available on your device.

Can the favicon have a transparent background?

Use Transparent in the Background control. An uploaded image must already have transparent areas; this control does not remove a solid background from a photo. For an apple-touch-icon, choose a solid background colour because the iOS home screen does not preserve transparency.

Can I convert an SVG to ICO or generate an animated favicon?

An SVG image can be resized into the PNGs and ICO, but the output is raster, not a new SVG file. The output is also static: GIF input does not produce an animated favicon. Keep an SVG self-contained, with its artwork embedded in the file.

Is my image uploaded anywhere?

No. Decoding, resizing and file assembly happen in this tab. There is no account or imposed upload size limit; the practical limit is the memory available to your browser.

Can I use the generator on Mac, Windows, iPhone or Android?

Use a current browser on any of those devices. Choose an image from your device or enter a letter; there is nothing to install. Once the page has loaded, generation does not need a network connection.

Does the manifest make a complete PWA?

It supplies the site name and icon references in site.webmanifest. A complete progressive web app also needs its own application and any service worker or other installation requirements; the favicon generator does not build those.

Nine files: seven PNGs, favicon.ico and site.webmanifest. The HTML link tags are copied separately. The ZIP stores entries without additional compression because the PNGs are already compressed.

How do I use the exported icons in Next.js or WordPress?

For the Next.js App Router, save favicon.ico and place it at app/favicon.ico, or src/app/favicon.ico when your app directory is under src. Next.js discovers that file as the app favicon. For WordPress, save the 512 pixel PNG and upload it as the Site Icon in your site settings; the settings location depends on your theme and WordPress version. Choose a square source and check the result in a fresh browser tab. This generator supplies the image files, not a framework plugin or automatic site installation.

Favicon Generator

Create a favicon from a PNG, JPEG, WebP, GIF or SVG image, or use Letter to draw up to three letters or emoji. Preview it on light and dark tabs, then save the PNGs, favicon.ico and HTML link tags. The image stays in your browser.

Start from an image

· drop one here · or paste a screenshot

Never uploadedAny sizeSeven PNGs and an ICOWorks offline

Source

Padding

Background

Drop in a PNG, JPEG, WebP, GIF or SVG. It is drawn and resized in this tab, so the file never leaves the browser and there is no size limit.

No image chosen yet

Every size

Each file is rendered here in the page. Download the ones you need, or take the whole set as a ZIP.

16 × 16Browser tabs, bookmarks and history
favicon-16x16.png
32 × 32Retina tabs and the Windows taskbar
favicon-32x32.png
48 × 48Windows desktop shortcuts
favicon-48x48.png
64 × 64High density browser chrome
favicon-64x64.png
180 × 180The iOS and iPadOS home screen
apple-touch-icon.png
192 × 192Android home screen, via the manifest
icon-192.png
512 × 512Android splash screens and app listings
icon-512.png
ICO bundle16, 32, 48 pixel frames in one file, for the site root
favicon.ico
EverythingThe 7 PNGs, the ICO and the manifest, stored uncompressed
favicons.zip

The markup

Put the files in your site root, then paste these lines into the <head> of every page.

index.html

site.webmanifest

{ "name": "My Site", "short_name": "My Site", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "display": "standalone" }

What each file is for. favicon.ico is not an image format so much as a folder: it holds the 16, 32, 48 pixel versions in one file, which is what a browser fetches from the site root when no link tag tells it otherwise. Current browsers read the PNGs and pick the size that suits the screen, and iOS ignores both when someone adds the site to the home screen: that one comes from the apple-touch-icon. That is why a favicon is a set of files rather than one. The ICO is assembled byte by byte in the page and contains 16, 32 and 48 pixel PNG frames; the other sizes are plain PNGs. Resizing uses the browser's own scaler, so a detailed image will look better if you start from a square at 512 pixels or larger.

Common questions

Which favicon sizes does this generator make?: The PNG sizes are 16, 32, 48, 64, 180, 192 and 512 pixels square. favicon.ico contains the 16, 32 and 48 pixel frames. The 180 pixel file is apple-touch-icon.png for the iPhone or iPad home screen; the manifest names the 192 and 512 pixel PNGs. Custom sizes are not available.
What is the difference between an ICO file and a PNG favicon?: A PNG is one image at one size. An ICO holds several images in one file so the browser can select a frame. This generator puts PNG images inside the ICO container.
Where do the favicon files and HTML tags go?: Put the files in your site root, then paste the link tags from The markup into the head of each HTML page. Copy the manifest block into site.webmanifest at the root too. Set your site name in the field beside that block before saving the ZIP.
Can I make a favicon from text or emoji?: Yes. Set Source to Letter and enter one to three characters, such as GB or 🌱. Choose the letter colour, typeface and a square, rounded or circular plate. Emoji appearance depends on the fonts available on your device.
Can the favicon have a transparent background?: Use Transparent in the Background control. An uploaded image must already have transparent areas; this control does not remove a solid background from a photo. For an apple-touch-icon, choose a solid background colour because the iOS home screen does not preserve transparency.
Can I convert an SVG to ICO or generate an animated favicon?: An SVG image can be resized into the PNGs and ICO, but the output is raster, not a new SVG file. The output is also static: GIF input does not produce an animated favicon. Keep an SVG self-contained, with its artwork embedded in the file.
Is my image uploaded anywhere?: No. Decoding, resizing and file assembly happen in this tab. There is no account or imposed upload size limit; the practical limit is the memory available to your browser.
Can I use the generator on Mac, Windows, iPhone or Android?: Use a current browser on any of those devices. Choose an image from your device or enter a letter; there is nothing to install. Once the page has loaded, generation does not need a network connection.
Does the manifest make a complete PWA?: It supplies the site name and icon references in site.webmanifest. A complete progressive web app also needs its own application and any service worker or other installation requirements; the favicon generator does not build those.
What is in the ZIP?: Nine files: seven PNGs, favicon.ico and site.webmanifest. The HTML link tags are copied separately. The ZIP stores entries without additional compression because the PNGs are already compressed.
How do I use the exported icons in Next.js or WordPress?: For the Next.js App Router, save favicon.ico and place it at app/favicon.ico, or src/app/favicon.ico when your app directory is under src. Next.js discovers that file as the app favicon. For WordPress, save the 512 pixel PNG and upload it as the Site Icon in your site settings; the settings location depends on your theme and WordPress version. Choose a square source and check the result in a fresh browser tab. This generator supplies the image files, not a framework plugin or automatic site installation.

The ICO is assembled byte by byte in the page and contains 16, 32 and 48 pixel PNG frames; the other sizes are plain PNGs. Resizing uses the browser's own scaler, so a detailed image will look better if you start from a square at 512 pixels or larger.