Skip to content
Utilboxes

Favicon Generator

Create every favicon file a website needs from one image, or from a letter or emoji, and download them as a ready-to-use ZIP with the HTML to paste in.

Runs entirely in your browser

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.

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.

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