Drop your logo or icon here

Best results with a square image — JPG, PNG, WebP, SVG supported

JPG PNG WebP SVG
Browser Tab Preview
Your Website Title
Size Previews
Fit Mode
Background
Files in your package
Paste into your <head>

About This Tool

How to Generate a Favicon

  1. 1Upload your logo or icon image — a square PNG with a transparent background works best. SVG files are also supported.
  2. 2The tool generates the full set of favicon sizes automatically: 16×16, 32×32, and 48×48 for browsers, 180×180 Apple Touch Icon for iOS, and 192×192 and 512×512 for Android PWA manifests.
  3. 3Preview each size to confirm the icon reads clearly at small dimensions. Simple, high-contrast designs work best at 16px.
  4. 4Download the complete favicon package as a ZIP, then follow the included HTML snippet to add the icons to your site's <head>.

When You Need a Favicon

Any New Website Launch
A missing favicon is one of the most visible signs of an unfinished site. Our guide on how to create a favicon explains what it does, why it matters for brand recognition, and how to install it correctly.
Mobile Home Screen Icons
When a user saves your site to their iOS or Android home screen, the Apple Touch Icon and PWA manifest icons are what appear. A single generic icon for all sizes looks poor at larger dimensions.
Search Result Branding
Google displays favicons next to results in mobile search. A clean, recognizable favicon improves click-through rates by making your brand visible in the results page.
Bookmarks & Browser Tabs
Users with many tabs open rely on favicons to identify sites quickly. A distinct, legible favicon at 16×16 and 32×32 makes your site immediately recognizable.

Why Generate Favicons in the Browser

Generating a complete favicon set used to require design software and manual resizing to multiple dimensions. This tool automates all of it in one step, in your browser, with no upload. For the best input, use our SVG to PNG converter if your logo is in SVG format, or our Background Remover to create a transparent PNG from a logo with a solid background before generating your favicon set.

Frequently Asked Questions

The ZIP includes: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png (browser tabs and taskbars), apple-touch-icon.png (180×180, for iOS home screen shortcuts), android-chrome-192x192.png and android-chrome-512x512.png (for Android and PWAs), plus a site.webmanifest file and ready-to-paste HTML link tags.

Place all files in the root directory of your website (the same folder as your homepage). Then paste the provided HTML snippet inside the <head> section of every page. Browsers will automatically find favicon.ico in the root, but the <link> tags ensure correct icons on all devices.

A square image of at least 512×512 pixels gives the best results. Simple, bold designs with good contrast work best at small sizes — detailed logos often become unreadable at 16×16. If your logo is wide/horizontal, use the “Contain” fit mode with a matching background colour so it scales down cleanly. PNG files with transparency are ideal.

The site.webmanifest is a JSON file that tells Android browsers and Progressive Web Apps (PWAs) about your site icons. It references the 192×192 and 512×512 Android Chrome icons. When users add your site to their Android home screen, this file ensures the correct high-resolution icon is used. Place it in your root directory alongside the PNG files.

Modern browsers all support PNG favicons via the <link> tag, so .ico files are no longer strictly necessary. However, older browsers (particularly Internet Explorer) rely on a favicon.ico in the root. If you need maximum compatibility, you can rename the favicon-32x32.png to favicon.ico — modern browsers will accept a PNG with the .ico extension for this fallback purpose.