How to Create a Favicon from Any Image

TL;DR: A favicon is the small icon displayed in browser tabs and bookmarks. Start with a square image (at least 512x512), keep it simple so it reads well at 16px, and export it in multiple sizes. Use ToolCrisp's Favicon Generator to create all the sizes you need in seconds.

What Is a Favicon?

A favicon (short for “favorite icon”) is the small icon that appears in your browser tab, bookmarks bar, browsing history, and search results. It was first introduced by Internet Explorer 5 in 1999 and has since become a standard part of every website's identity. Despite its tiny size, a favicon plays a major role in brand recognition — it helps users quickly identify your site among dozens of open tabs.

Favicon Sizes You Need

Different platforms and devices expect different favicon sizes. To ensure your icon looks sharp everywhere, you should generate at least these five variants:

16x16 — Standard browser tab icon
32x32 — Taskbar shortcut and higher-DPI tabs
48x48 — Windows site icons
180x180 — Apple Touch Icon for iOS home screens
192x192 — Android Chrome and PWA icons

Starting from a large source image (512x512 or bigger) gives you the best quality when scaling down to these smaller dimensions.

ICO vs PNG Favicons

The traditional .ico format can bundle multiple sizes into a single file, which is why it has been the default for decades. Modern browsers, however, also support .png favicons, which are simpler and lighter.

Our recommendation: use both. Include a favicon.ico in your site root for maximum compatibility, and add PNG <link> tags for modern browsers and mobile devices.

Step-by-Step: Create a Favicon

Start with a square image. Your source image should be at least 512x512 pixels. A perfectly square canvas ensures the icon won't be cropped or distorted on any platform.
Keep it simple. Your favicon must be recognizable at 16x16 pixels. Avoid fine details, thin lines, and small text. A bold shape or single letter works best.
Use ToolCrisp's Favicon Generator. Upload your image to the Favicon Generator and it will automatically produce all required sizes. Everything runs in your browser — your image never leaves your device.
Add to your HTML. Download the generated files, place them in your project, and add the appropriate link tags to your <head>.

HTML Code to Add Favicons

Once you have your favicon files, add the following tags inside the <head> of your HTML document:

<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- PNG favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />

Place the actual image files in the root of your public directory (or wherever your static assets live). Most frameworks like Next.js, Vite, and plain HTML sites serve files from a public/ folder.

Tips for Great Favicons

Use simple shapes. A single bold symbol or letterform scales down far better than a detailed illustration.
High contrast matters. Your icon sits on varying backgrounds — light tabs, dark tabs, bookmark bars. Pick colors with strong contrast so the icon stays visible.
Test at small sizes. Always preview your favicon at 16x16 and 32x32 before finalizing. If you can't tell what it is at a glance, simplify it further.
Avoid text. Words and even single letters can become illegible at tiny sizes unless they're part of a very bold, thick typeface.

Common Mistakes

Using a non-square image. Rectangular source images get squished or cropped unpredictably. Always start with a 1:1 aspect ratio.
Too much detail. Gradients, shadows, and fine lines vanish at 16 pixels. Flat, geometric designs survive the scaling process.
Forgetting the Apple Touch Icon. Without a 180x180 Apple Touch Icon, iOS will generate a low-quality screenshot thumbnail when users add your site to their home screen.
Only providing one size. A single 16x16 favicon might look fine in a browser tab but will appear blurry on high-DPI displays and mobile home screens. Generate the full set of sizes for a polished result.