What format should a favicon be?

A favicon should be a PNG, with a favicon.ico file at the root of your site as a backup. PNG keeps edges sharp, supports a transparent background, and works in every modern browser. The .ico file covers older browsers and apps that look for /favicon.ico on their own. Some browsers also accept SVG favicons, but this tool makes PNG and ICO files.

Can a favicon be a PNG?

Yes, a favicon can be a PNG. Chrome, Firefox, Safari and Edge all show PNG favicons. You point to the file with a tag in the of your page, and the browser uses it in tabs, bookmarks and history.

What size PNG do I need for a favicon?

For a PNG favicon you need 16x16 and 32x32 pixels for browser tabs, a 180x180 apple-touch-icon for iPhones and iPads, and 192x192 and 512x512 icons listed in your web manifest for Android home screens. This generator also makes a 48x48 PNG for Windows shortcuts. For Google Search, Google asks for a square icon and recommends one larger than 48x48. Start from a square image of at least 512x512 so the small sizes stay crisp.

PNG vs ICO: which is better for a favicon?

For PNG vs ICO, the best setup uses both: PNG as your main favicon and an ICO as a fallback. A PNG holds one image at one size and handles transparency cleanly. An ICO file is a container that can hold several sizes at once, which suits older browsers and some desktop apps. This tool gives you both: separate PNGs and a favicon.ico that holds the 16x16, 32x32 and 48x48 images.

Do I still need a favicon.ico file?

Yes, you should still add a favicon.ico file, even if your page links to PNG icons. Some browsers, feed readers and other tools ask for /favicon.ico at the root of your site on their own, without checking your HTML. If the file is missing, they show a blank or default icon and your server logs record 404 errors. Put the favicon.ico from the download in your site's root folder so it loads at yoursite.com/favicon.ico.

How do I add a PNG favicon in HTML?

To add a PNG favicon in HTML, upload the file to your site and put a link tag inside the of your page, for example . Add one line per size, plus for Apple devices and for the Android icons. The generator shows these tags ready to copy, and the README in the zip lists them too.

Are my uploaded logo files sent to a server?

No. Images are read directly in the browser using the HTML5 File and Canvas APIs. No bytes leave your machine, and nothing is uploaded or stored on any server.

What favicon sizes are included in the downloadable ZIP pack?

The generated ZIP package contains favicon.ico (embedding 16×16, 32×32, and 48×48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a README.txt.

Favicon generator

A favicon should be in PNG format, in a few sizes, with a favicon.ico file kept as a backup for older browsers and apps. This favicon generator turns your logo into every size you need: 16x16, 32x32 and 48x48 PNGs for browser tabs, a 180x180 Apple touch icon, and 192x192 and 512x512 icons for the web manifest, plus a favicon.ico that holds the three small sizes. Download them as one zip with the HTML tags to paste into your page. It all runs in your browser, so your image is never uploaded.

Upload your brand logo or icon

Supports PNG, SVG, JPG, WebP. Recommended: square 512×512 PNG with transparent background.

Background Fill

Keep transparent for logos, or pick white/black/color if your logo needs a solid backdrop.

Image Scaling

Contain fits the entire image within the square. Cover fills the canvas and crops edges.

Edge Margin / Padding (10%)

10%

Adds breathing room around the logo so icon corners don't touch browser tab edges.

Site Title (for Manifest)

Used in the site.webmanifest file when users add your site to their phone home screen.

Ready to download

Current source: logo.png

Browser Tab Preview

My Site — Home×

iOS Home Screen Preview

My Site

apple-touch-icon.png (180×180)

Displays on iPhone & iPad homescreens

Generated Icon Formats (1 files)

PNG & multi-res ICO

favicon.ico

Multi-resolution container (16×16, 32×32, 48×48 PNGs)

HTML Header Code Snippet

<!-- Favicon and App Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Copy these tags into your HTML page's <head> tag.

site.webmanifest (PWA Specification)

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Where do these files go?

Unzip favicon-pack.zip into your project’s root public directory (e.g. /public in Next.js/Vite or /htdocs in Apache/WordPress). Paste the HTML Header Code Snippet into your site’s <head> template.

Need social media share previews for Facebook and X? Generate rich tags with the Open Graph generator, or optimize your source images with the image compressor.

Favicon generator example

Brand logo to complete PNG and ICO favicon pack

Upload a 512×512 PNG emblem. The generator creates 16×16, 32×32, and 48×48 PNG favicons, a multi-size favicon.ico file, an Apple touch icon, and web manifest code ready to download.

Favicon generator how-to

Stay on this page. Favicon generator runs in the tab.
Enter or drop your input here. The file or text is not posted to a server.
Copy or download the result when it appears.

Related tools

SEO

UTM generator

Add source, medium, campaign, term, and content parameters to a URL you already own.

SEO

Slug generator

Turn a title into a lowercase URL slug, with stop words stripped and unicode transliterated.

SEO

Open Graph generator

Generate Open Graph and Twitter Card meta tags with live social preview cards.

Convert

Image compressor

Compress JPEG, PNG, and WebP images with adjustable quality, scaling, and live file size preview.

SEO

Meta tag generator

Generate HTML title, meta description, canonical, robots, viewport, and theme-color tags with live Google SERP preview. Nothing is uploaded.

Convert

PNG to JPG converter

Convert PNG images to JPG/JPEG in your browser using canvas. Quality slider, background color for transparency, zero server upload.

People also use

SEO

Favicon generator & PNG format FAQ

What format should a favicon be?: A favicon should be a PNG, with a favicon.ico file at the root of your site as a backup. PNG keeps edges sharp, supports a transparent background, and works in every modern browser. The .ico file covers older browsers and apps that look for /favicon.ico on their own. Some browsers also accept SVG favicons, but this tool makes PNG and ICO files.
Can a favicon be a PNG?: Yes, a favicon can be a PNG. Chrome, Firefox, Safari and Edge all show PNG favicons. You point to the file with a <link rel="icon" type="image/png"> tag in the <head> of your page, and the browser uses it in tabs, bookmarks and history.
What size PNG do I need for a favicon?: For a PNG favicon you need 16x16 and 32x32 pixels for browser tabs, a 180x180 apple-touch-icon for iPhones and iPads, and 192x192 and 512x512 icons listed in your web manifest for Android home screens. This generator also makes a 48x48 PNG for Windows shortcuts. For Google Search, Google asks for a square icon and recommends one larger than 48x48. Start from a square image of at least 512x512 so the small sizes stay crisp.
PNG vs ICO: which is better for a favicon?: For PNG vs ICO, the best setup uses both: PNG as your main favicon and an ICO as a fallback. A PNG holds one image at one size and handles transparency cleanly. An ICO file is a container that can hold several sizes at once, which suits older browsers and some desktop apps. This tool gives you both: separate PNGs and a favicon.ico that holds the 16x16, 32x32 and 48x48 images.
Do I still need a favicon.ico file?: Yes, you should still add a favicon.ico file, even if your page links to PNG icons. Some browsers, feed readers and other tools ask for /favicon.ico at the root of your site on their own, without checking your HTML. If the file is missing, they show a blank or default icon and your server logs record 404 errors. Put the favicon.ico from the download in your site's root folder so it loads at yoursite.com/favicon.ico.
How do I add a PNG favicon in HTML?: To add a PNG favicon in HTML, upload the file to your site and put a link tag inside the <head> of your page, for example <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. Add one line per size, plus <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for Apple devices and <link rel="manifest" href="/site.webmanifest"> for the Android icons. The generator shows these tags ready to copy, and the README in the zip lists them too.
Are my uploaded logo files sent to a server?: No. Images are read directly in the browser using the HTML5 File and Canvas APIs. No bytes leave your machine, and nothing is uploaded or stored on any server.
What favicon sizes are included in the downloadable ZIP pack?: The generated ZIP package contains favicon.ico (embedding 16×16, 32×32, and 48×48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a README.txt.