Files are processed locally in your browser and never uploaded

Favicon Generator

Upload a Logo or image to automatically generate the full set of icons a website needs (including favicon.ico and multi-size PNGs), download them as one package, and copy the ready-to-paste HTML snippet.

◎

Click , or drag & drop an image here

A square PNG (512×512 or larger) is recommended · Files are processed locally in your browser and never uploaded

Fit Mode
For non-square images, "Fit Entire Image" is recommended
Background
apple-touch-icon automatically uses an opaque background (white by default)
Padding 0
Percentage; gives the icon breathing room

Related Tools

Image Resizer
Scale images by pixels, percentage, or preset sizes — aspect ratio kept, no stretchingImage Cropper
Crop images freely, with fixed ratios like 1:1, 4:3, and 16:9Remove Image Background
Remove solid-color backgrounds (white, green screen, etc.) and get a transparent PNG in one clickQR Code Generator
Enter a URL or text to generate QR codes in real time, with batch generation and PNG / SVG download
Upload one logo and generate the full set of icons a website needs plus favicon.ico in one click, with HTML reference code ready to copy. This guide covers sizes, transparency, and deployment essentials.

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, and favorites. Tiny as it is, it decides how recognizable your site is once bookmarked.

Beyond the tab icon, larger sizes are used when adding to the home screen on iOS or installing as an app on Android.

Why generate multiple sizes?

Different scenarios need different sizes: tabs use 16/32, home screen icons use 180/192, and app stores or splash screens may need 512.

If only one large image is provided, small icons easily blur after browser scaling. This tool generates all common sizes at once.

  • favicon.ico: the best compatibility, containing the 16/32/48 sizes
  • favicon-16x16.png / favicon-32x32.png: modern browser tabs
  • apple-touch-icon.png (180): iOS add to home screen
  • android-chrome-192x192.png / 512x512.png: Android and PWA

How large should the source image be?

Use a square PNG of 512×512 or larger. A square avoids uneven cropping or padding during generation.

If it is not square, choose "Fit" (keep the full graphic with padding around it) or "Fill and crop" (cover the canvas and crop the excess).

Transparent background and apple-touch-icon

A transparent background usually looks cleaner in tabs; however the iOS home screen icon does not support transparency, and transparent areas turn black.

So when generating apple-touch-icon, this tool automatically uses an opaque background (white by default), while the other sizes keep the transparency setting you chose.

How to deploy?

Put the downloaded files in the site root directory (at the same level as index.html), then paste the generated HTML code into .

Browsers prefer the declared icons; favicon.ico serves as the fallback for older browsers.

FAQ

Will my image be uploaded?
No. The whole icon set is generated locally in your browser, and the image never leaves your device.
What size should the source image be?
A square of 512×512 or larger is recommended. The larger the source, the sharper the generated large-size icons.
Why does apple-touch-icon have a white background instead of transparency?
The iOS home screen icon does not support transparency, and transparent areas display as black. So generation automatically fills an opaque background, white by default.
How to use the generated code?
Upload the files to the site root directory, then paste the code into the <head> of your web page. Click "Copy code" to copy it directly.