Skip to content

Favicon Generator – favicon.ico and App Icons from One Image

Turn your logo, or a single letter on a coloured background, into every favicon and app icon a website needs. Get the files as a ZIP plus the HTML tags to paste.

Make the favicon from

How to generate a favicon

  1. Choose your source. Under Make the favicon from, pick An image and add your logo, or pick A letter and type one or two characters.
  2. Adjust the look. For an image, choose Whole image or Fill square, add Padding and an optional Background colour. For a letter, choose a Font, Letter colour and Background.
  3. Pick a shape and details. Choose Square, Rounded or Circle, and optionally enter your Website name and Theme colour for the web manifest.
  4. Press Generate favicons and download the ZIP.
  5. Install the icons. Upload all the files to the root of your website and paste the HTML tags shown, using the Copy button, into the head section of your pages.

Features

  • Real multi-size favicon.ico containing 16, 32 and 48 pixel images, built in your browser.
  • PNG icons for every platform: 16 and 32 pixel favicons, a 180 pixel Apple touch icon and 192 and 512 pixel Android and web app icons.
  • site.webmanifest with your website name, theme colour and app icons filled in.
  • Ready-to-paste HTML tags with a copy button, including the theme colour meta tag.
  • Image or letter mode: use your logo, or create a clean letter icon with no design software.
  • Three shapes, square, rounded and circle, with transparent corners.
  • Real-size preview at 16, 32, 48 and 180 pixels, so you can judge how the icon reads in a browser tab.

Why use Fileora as your favicon generator

The small icon in a browser tab, bookmark list or search result is often the first thing people notice about a website. A missing favicon leaves a generic blank page icon, and a missing Apple touch icon gives iPhone users a blurry screenshot on their home screen. Creating each size by hand and writing the ICO file is fiddly.

Fileora produces the complete set in one step, in your browser. Your logo is never uploaded, there's no sign-up and no watermark on the icons. The ICO file is assembled directly from the PNG images, so it keeps full transparency.

If your logo has a busy background, crop it first with crop image, or give it soft corners with round image corners. To embed a small icon straight into CSS or HTML instead of a separate file, try image to Base64.

Tips for a favicon that reads well

At 16 × 16 pixels there is room for very little detail. A full logo with a wordmark usually turns into a smudge, so use just the symbol or the first letter of your brand. Strong contrast between the mark and the background matters more than fine colour choices, and a little Padding stops a round or detailed logo from touching the edges.

Check the 16 px preview carefully: if you can't recognise the icon there, simplify it. Letter icons are drawn directly at each size rather than scaled down, which is why they often look sharper than a shrunk logo. The letter fonts come from your device's built-in fonts, so the exact letter shapes can differ slightly between a phone and a computer.

Installing the files

Upload every file from the ZIP to the root folder of your website, the same folder as your home page, so that yoursite.com/favicon.ico opens the icon. Then paste the tags into the head of each page, or into the shared layout or template your site builder uses. Browsers cache favicons aggressively, so if you're replacing an old icon, open the site in a private window to see the new one.

Frameworks such as Next.js and many site builders also let you drop favicon.ico and apple-touch-icon.png into a special folder instead of adding tags; the files from this package work there too.

Frequently asked questions

How do I create a favicon for my website?

Choose An image and add your logo, or choose A letter and type one or two letters. Pick a shape and colours, check the preview at real size, and press Generate favicons. Download the ZIP, upload its files to the root folder of your site and paste the HTML tags shown into your page.

Which files are in the favicon package?

Eight files: favicon.ico with 16, 32 and 48 pixel images inside, favicon-16x16.png and favicon-32x32.png, apple-touch-icon.png at 180 pixels, android-chrome-192x192.png and android-chrome-512x512.png for Android and installed web apps, and site.webmanifest, which tells browsers about those app icons.

What size should my image be?

Square and at least 512 × 512 pixels gives the sharpest results, because the largest icon is 512 pixels. Smaller images still work, and the tool warns you when the shorter side is under 512 pixels. If your logo isn't square, choose Whole image to fit it inside the square, or Fill square to crop it from the centre.

Can I make a favicon from a letter?

Yes. Choose A letter, type one or two letters or digits, pick a Sans, Serif or Mono font, and set the letter colour and background. The letter is drawn fresh at every size, so it stays crisp even at 16 pixels. Emoji and symbols are left out.

Is a PNG inside an ICO file valid?

Yes. The ICO format has allowed PNG-compressed images since Windows Vista, and every current browser reads them. Storing PNGs keeps full transparency and makes the file small.

Why does the Apple touch icon have a background when my favicon is transparent?

iPhones and iPads show transparent parts of a home screen icon as black. To avoid that, apple-touch-icon.png is always a full square filled with your background colour, or white if you left the background off. iOS rounds its corners itself.

Is my logo uploaded anywhere?

No. All icons, the ICO file and the ZIP are created by your browser on your device. Nothing is sent to a server.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.