Free Online Real Favicon Generator

Free online favicon generator. Upload one image and download a complete icon kit — favicon.ico, PNG icons, Apple touch icon, and web manifest — ready for browser tabs, bookmarks, and Android and iOS home screens.

A square image, 512 x 512 px or larger, works best.

0%
Edge to edgeRoom to breathe
0%
SquareCircle
App & installation settings

Root-relative path, such as / or /icons/.

#FFFFFF

Choose an image or try a text icon to get started.

512 PX
BROWSER TAB
My website
your-website.com
HOME SCREEN
My website
PIXEL PERFECT?

Compare small sizes.

16px
32px
48px
64px

Download your icon kit

7 icon files, a web manifest, and installation instructions.

Inside your download

9 files
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

HTML code

HTML

Upload your files, then add this inside your website’s <head>. Paths update with your settings.

index.html
FROM UPLOAD TO EVERYWHERE

How it works

Skip the manual resizing and format guessing.
Go from your idea to a recognizable website in three steps.

01 /

Bring your identity.

Upload your logo or create an icon from a letter. Simple shapes, bold contrast, and a square canvas are your best starting point.

02 /

Fine-tune the details.

Choose a background, adjust spacing, and check the live previews. Make sure your mark is recognizable even in a tiny browser tab.

03 /

Give every tab a home.

Download your complete kit, upload the files, and paste the HTML. Your brand is ready for browser tabs, bookmarks, and home screens.

BUILT FOR THE LITTLE THINGS

Works across browsers and devices

A favicon is often the smallest part of your brand. It should still feel intentional. Generate the right sizes for the places people find, save, and revisit your site.

Create your favicon
Everyday browsersICO + PNG for tabs, bookmarks, and shortcuts16-48 PX
Apple devicesA dedicated, opaque home-screen icon180 PX
Android & web appsHigh-resolution icons with a web manifest192 / 512
THE TWO-MINUTE GUIDE

Installation

No complicated setup.
Just a few files in the right place.

Jump to your HTML
1

Download and extract your icon kit

Choose your source and adjust the preview, then select Download favicon kit. Extract the ZIP to get all seven icon files, site.webmanifest, and a plain-text installation guide.

2

Put the files where your website can serve them

Upload the icons and manifest to your site’s public root. If you prefer a subfolder, set Icon directory under app settings before downloading. For example, /icons/ means your files should be available at your-site.com/icons/.

3

Add the HTML and check your work

Copy the generated code into the <head> of each page or your shared layout. Remove conflicting old icon tags. Open the icon URLs directly to check they load, then revisit your site in a private window to avoid stale cached icons.

A BETTER ICON STARTS HERE

Favicon design tips

Less detail. More character.

Fine lines and long words disappear at small sizes. Use a distinct symbol, a monogram, or a single letter instead of squeezing your entire logo into a square.

Give it a little space.

Use padding to keep your mark away from the edges. Preview both a browser tab and a home screen: the same image can feel very different at each scale.

Make contrast count.

Transparent icons can disappear against a light or dark browser theme. A solid background gives you predictable contrast. Check both themes before you ship.

Start with a sharp source.

A large, clean image gives the generator more detail to work with. Upscaling a tiny image cannot recover missing information. Use an SVG or a 512 px source when possible.

THE FINER DETAILS

Frequently asked questions

Everything else you might want to know about your new favicon.

What is a favicon, and why do I need one?

A favicon is the small icon that represents your website in browser tabs, bookmarks, history, and sometimes search results. A clear, consistent icon helps visitors recognize your site among many open tabs. Home-screen icons serve a similar purpose when someone saves your site on a phone.

Which image should I upload?

Start with a square PNG, SVG, JPEG, or WebP, ideally at least 512 x 512 pixels. Transparent PNGs and self-contained SVGs work especially well. Keep the design simple: a symbol or initial is usually more legible than a complete wordmark at 16 pixels. Files up to 10 MB and images up to 4096 pixels per side are supported.

Is this tool free? Are my images uploaded?

The generator is free to use, with no account or watermark. Image decoding, previews, and ZIP creation happen in your browser. Your source image is not uploaded to a server. Your browser may download the site assets when you first visit, but the generator does not send your image anywhere.

Why do Apple and Android icons have a background?

Home-screen icons look best on a solid square canvas. This tool flattens those exports onto your selected background color, even when transparent browser icons are enabled. The device applies its own corner treatment. Android exports use the standard "any" purpose; they are not certified maskable icons.

Why is my old favicon still showing?

Browsers cache favicons aggressively. First check that each generated URL opens directly, and that your page has only one intended set of icon links. Then try a private window or clear the site cache. For a reliable update, use a new folder such as /icons-v2/ and update the HTML links. Search engines may take longer to recrawl the icon.

Does the web manifest make my website a PWA?

No. The manifest provides an app name, colors, and icons, but does not add offline functionality or a service worker. Installability depends on your browser and site configuration, including HTTPS. The generated manifest uses / as its start URL; edit it if your app lives in a subdirectory.

Can I use these files with WordPress, Shopify, or Astro?

Yes. The files are standard PNG and ICO images. In Astro, put them in public/ and add the generated tags to your shared layout head. For WordPress or Shopify, use the platform site-icon setting when possible, or upload the files and adjust your theme head. Hosted platforms may control filenames and URLs, so adapt the paths to match.