Favicon Generator From Image

Convert PNG, SVG, JPG, JPEG, or WebP images into necessary favicon files.

For the browser using HTML copy this


<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--last one only if you have svg-->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

If you’re making a PWA, also add this to the HTML:


<link rel="manifest" href="/manifest.webmanifest">

And a file with the web app manifest:


// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Maskable icons should have bigger paddings. The safe zone is a 409×409 circle. Use maskable.app to check your icon. Read more in an article about favicons design.

About the Favicon Generator

If you already have an image you’d like to use as a favicon for your website, this tool makes the process simple. Upload a PNG, JPEG, JPG, SVG, or WebP image and the generator will convert it into a favicon-ready ICO file.

For the best results, use a square image with a clean and simple design. Logos, symbols, and single letters usually work best because small favicon sizes can reduce fine detail. If needed, crop or resize your image in any standard image editor before uploading it.

After uploading:

Preview your favicon to make sure it looks sharp at small sizes
Adjust or replace the image if necessary
Download the generated ICO file for use on your website

Modern favicon setups often include more than just an ICO file. In addition to generating a traditional favicon, many websites now also use SVG and PNG icons for improved support across browsers, mobile devices, and Progressive Web Apps (PWAs).

Why use an ICO file?

ICO is the traditional favicon format supported by all major browsers. Unlike standard image formats, ICO files can contain multiple icon sizes in a single file, allowing browsers to choose the best version depending on where the icon is displayed.

Common embedded sizes include:

16×16px — browser tabs
32×32px — bookmarks and taskbars
48×48px — desktop shortcuts and system views

Because of this multi-size support, ICO files provide excellent compatibility across older and modern browsers.

Modern favicon recommendations

Current best practices recommend combining a small set of favicon files instead of generating dozens of different images. A modern favicon setup often includes:

favicon.ico for universal browser compatibility
icon.svg for scalable high-resolution support
apple-touch-icon.png (180×180) for iOS devices
manifest.webmanifest for Android and Progressive Web Apps
PNG icons in 192×192 and 512×512 sizes for app installation support

SVG favicons are especially useful because they remain crisp on high-resolution displays and can even adapt to light and dark browser themes.

What images work best?

Favicons are displayed at very small sizes, so simplicity matters. The best results usually come from:

Simple logos
Bold symbols or icons
Single letters or initials
High-contrast designs

Complex illustrations or detailed graphics may become blurry or difficult to recognize at smaller sizes such as 16×16 pixels. If your logo contains many small details, consider creating a simplified favicon-specific version for better clarity.