How to Make a Favicon — Create .ICO & PNG Icons from Any Image

What Is a Favicon and Why Does It Matter?

A favicon (short for "favorite icon") is the tiny image that appears in browser tabs, bookmark lists, and on the home screen when a visitor saves your site. It’s one of the first brand signals a returning visitor notices — and a missing or blurry favicon looks unprofessional.

Browsers and devices request several favicon sizes:

16×16 px — classic browser tab icon.
32×32 px — Windows taskbar and higher-DPI tabs.
180×180 px — Apple Touch Icon for iOS home screen.
192×192 px — Android Chrome home screen shortcut.
.ico file — still required by many browsers as a fallback at /favicon.ico.

Creating all these manually is tedious. The PPImage Favicon Generator produces every size in one click.

How to Create a Favicon Online (Step by Step)

Step 1 — Prepare your source image

Start with a square image — ideally 512×512 px or larger. PNG with a transparent background works best for logos. JPEG works too if you want a solid-color background.

Step 2 — Open the Favicon Generator

Go to ppimage.com/favicon-generator. No account or installation needed.

Step 3 — Upload your image

Drag and drop your source PNG or JPEG onto the upload zone. The tool shows a live preview of how your icon will look at different sizes.

Step 4 — Adjust the padding (optional)

Use the padding slider to add breathing room around your logo. Many designers add 10–15% padding so the icon doesn’t touch the edges at small sizes.

Step 5 — Choose background style

Select transparent (recommended for logos) or a solid color. If your logo has a white background you may want to set it to transparent here.

Step 6 — Click Generate

The tool instantly produces all sizes: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), and android-chrome-192x192.png.

Step 7 — Download and install

Download the ZIP, extract it into your website’s /public folder, and add the following tags to your HTML <head>:

html <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Favicon Size Cheat Sheet

File	Size	Used By
favicon.ico	16×16 + 32×32	All browsers (fallback)
favicon-16x16.png	16×16	Browser tabs
favicon-32x32.png	32×32	HiDPI tabs, Windows taskbar
apple-touch-icon.png	180×180	iPhone / iPad home screen
android-chrome-192x192.png	192×192	Android home screen

Pro Tips

Test at actual size — zoom out until your favicon is 16px on screen to see exactly what visitors will see.
Use a simple shape — detailed illustrations become unreadable at 16px. A single letter or bold icon works better.
Dark mode compatibility — if your logo is dark, add a light border or background so it’s visible on dark browser themes.
Cache busting — when you update your favicon, append a version query string: href="/favicon.ico?v=2".

Related Tools

SVG to PNG Converter — if your logo is in SVG format, convert it to PNG first for best favicon quality.
Image Resizer — manually resize any image to exact pixel dimensions before uploading.

Create your favicon right now with the free Favicon Generator.