Skip to content
Utilboxes

Favicon Generator

Upload a square logo, or type a letter or emoji, adjust the shape and padding, and download a ZIP with favicon.ico (16, 32 and 48 px), PNG icons, a 180-pixel Apple touch icon, 192 and 512-pixel Android icons and a web manifest, plus the HTML to paste into the head of your pages.

Runs entirely in your browser

Updated

How to use the Favicon Generator

  1. 1Upload a square logo or icon, or switch to Letter or emoji and type one or two characters.
  2. 2Adjust the shape, padding and background until the small previews read clearly.
  3. 3Enter your site name for the web manifest.
  4. 4Download the ZIP, upload the files to your site's root folder, and paste the HTML into the head of your pages.

How it works

Browsers, phones and operating systems each look for a different icon file. The ZIP contains favicon.ico with 16, 32 and 48-pixel images for browser tabs and Windows; 16 and 32-pixel PNGs; a 180-pixel apple-touch-icon.png for iPhone and iPad home screens; 192 and 512-pixel PNGs for Android and installable web apps; and a site.webmanifest that points to them.

Each icon is drawn once at 512 pixels and then scaled down in halving steps, which keeps small sizes smoother than a single jump from a large image. The .ico file stores each size as an embedded PNG — a variant Windows has supported since Vista and every current browser reads — so transparency survives intact.

The Apple touch icon always gets a solid background, because iOS shows transparent areas as black and applies its own rounded corners. The other icons use the shape and transparency you choose.

Detail disappears at 16 pixels. The enlarged previews show exactly what a browser tab will display, so simplify the design until the 16-pixel version is still recognisable.

Tips and common mistakes

  • Design for 16 pixels. If the tiny preview is not recognisable, simplify: one bold shape or a single letter.
  • Use a square source image; anything else has to be padded or cropped.
  • Add padding so the icon does not touch the edges, especially for the rounded and circular shapes.
  • Test in a private browser window after uploading, because browsers cache favicons for a long time.

Frequently asked questions

Do I still need favicon.ico?
Browsers request /favicon.ico automatically even when no icon is declared, and some tools and feed readers only look there. Shipping it alongside the PNG files covers every case.
Where do I put the files?
Upload them to the root of your site so they are served from addresses like example.com/favicon.ico, then paste the HTML into the head of your pages. If the files live in a subfolder, change the paths in the HTML and the manifest to match.
Why doesn't my new favicon show up?
Browsers cache favicons aggressively. Open the icon's address directly, hard-refresh the page, or check in a private window.
Can I use an SVG?
Yes. SVG uploads are rasterised at each size. An SVG without width and height attributes needs a viewBox so its proportions are known.
Which sizes are included?
favicon.ico with 16, 32 and 48-pixel images, 16 and 32-pixel PNGs, a 180-pixel Apple touch icon, 192 and 512-pixel icons for Android and installable web apps, and a web manifest.
Do I need the site.webmanifest file?
It tells Android and browsers that install web apps which icons and name to use. It is small and harmless, so include it.
Can I make a favicon from a letter or an emoji?
Yes. Switch to Letter or emoji, type one or two characters and pick the colours and shape.
Share this toolShare on XShare on FacebookShare on LinkedInShare on RedditShare by email

Guides

Related tools

Resize ImageChange dimensions by pixels or percentage, aspect ratio locked.Color Palette ExtractorPull the dominant colours out of any image as HEX, RGB and HSL.Crop ImageDrag out a crop area or snap to a preset aspect ratio.QR Code GeneratorQR codes for links, text, email, phone, SMS and Wi-Fi.Generators