tool

Favicon Generator

Turn any image into a favicon.ico and apple-touch-icon.png for your website. Upload an image and generate both icons instantly.

drag images here, or click to browse

JPG, PNG, AVIF, GIF, BMP, TIFF, SVG, and more

Turn any image into a favicon.ico and Apple touch icon

Upload your logo or any image (PNG, JPG, WebP, SVG, GIF or another format your browser can open) and get the two icon files almost every website needs: a multi-size favicon.ico for browser tabs, bookmarks and search results, and a 180 × 180 apple-icon.png for iPhone and iPad home screens. Non-square images are centre-cropped rather than stretched, and the files are generated in your browser.

What can you do?

  1. 1. A real multi-size favicon.ico
    The ICO file contains 16 × 16, 32 × 32 and 48 × 48 PNG images, so each browser and operating system can pick the sharpest size for tabs, bookmarks, taskbars and search results.
  2. 2. Apple touch icon
    A 180 × 180 PNG used when someone adds your site to their iPhone or iPad home screen.
  3. 3. Smart square cropping
    Wide or tall images are cropped from the centre to a square, so your icon keeps its proportions instead of being squashed.
  4. 4. Transparency preserved
    Transparent areas in PNG, WebP or SVG logos stay transparent in the generated icons.
  5. 5. Download one or both
    Download favicon.ico and apple-icon.png separately or together, ready to drop into your project.

Why does a favicon matter?

The favicon is the first piece of your brand people see in a browser tab, a bookmark list and often next to your page in Google's mobile results. A missing favicon shows a generic globe icon, which makes a site look unfinished, and browsers keep requesting /favicon.ico anyway, filling your logs with 404 errors.

Creating an ICO file by hand requires a specialised editor because a single .ico file bundles several image sizes. This generator builds that file directly from your logo in one step.

How to create a favicon from an image

  1. 1. Start with a simple, square logo
    Icons are shown as small as 16 pixels, so use a bold symbol or initial rather than a full logo with small text. Crop it to a square first if you want to control the framing.
  2. 2. Upload the image
    Drop the file into the uploader or click to choose it.
  3. 3. Check the previews
    Make sure the icon is still recognisable at small sizes. If it isn't, simplify the artwork and try again.
  4. 4. Download and add the files to your site
    Download favicon.ico and apple-icon.png and add them to your project as shown below.

Favicon sizes and where they're used

Icon sizes generated by the favicon generator and where each one is used
SizeFileWhere it appears
16 × 16favicon.icoBrowser tabs and bookmark lists on standard screens
32 × 32favicon.icoTabs on high-density screens, Windows taskbar shortcuts
48 × 48favicon.icoDesktop shortcuts and Google Search results (Google asks for a square favicon that is a multiple of 48 px)
180 × 180apple-icon.pngHome screen icon when a page is added on iPhone or iPad

Building an installable web app (PWA)? Android and the web app manifest also expect 192 × 192 and 512 × 512 PNG icons. You can make those from the same logo with the image resizer.

How to add the favicon to your website

For a plain HTML site, upload both files to the root of your site and add these tags inside <head>:

HTMLindex.html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-icon.png">
TEXTNext.js App Router
app/
├── favicon.ico      ← Next.js adds the <link rel="icon"> tag automatically
├── apple-icon.png   ← Next.js adds the <link rel="apple-touch-icon"> tag automatically
└── layout.tsx

For WordPress, upload a square image under Appearance → Customize → Site Identity → Site Icon. For Shopify, use the favicon setting in your theme editor.

Frequently asked questions

Why is my new favicon not showing?

Browsers cache favicons aggressively. Do a hard refresh, open the site in a private window, or visit /favicon.ico directly. Google Search can take days or weeks to pick up a new favicon after it recrawls your homepage.

Can I use a PNG or SVG instead of favicon.ico?

Modern browsers accept PNG and SVG favicons, but favicon.ico remains the most compatible option because browsers and other tools request /favicon.ico by default. Using the ICO plus an Apple touch icon covers nearly every case.

Why does my Apple touch icon have a black background?

iOS fills transparent areas of home-screen icons with black. If your logo has a transparent background, place it on a solid colour square before generating, or the icon may look different from what you expect.

What image works best for a favicon?

A square image at least 180 × 180 pixels (larger is fine) with a simple shape and strong contrast. Fine details and thin text disappear at 16 pixels.

Is my logo uploaded?

No. Resizing and ICO packaging happen in your browser, so the image never leaves your device.

Related tools