How to Create a Favicon from a PNG Image

IP & Network โ€” views

What Is a Favicon?

A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmarks, and search results. Though tiny โ€” typically 16ร—16 or 32ร—32 pixels โ€” it plays a big role in making your website look polished and professional. Without one, browsers show a generic blank icon in the tab.

What Sizes Does a Favicon Need?

Different devices and contexts require different favicon sizes:

  • 16ร—16: Browser tab (minimum required)
  • 32ร—32: Windows taskbar, some browser tabs
  • 48ร—48: Windows site shortcuts
  • 64ร—64: High-DPI Windows taskbar
  • 128ร—128: Chrome Web Store
  • 256ร—256: High-resolution displays

Creating all these sizes manually is tedious. A favicon generator takes one high-resolution PNG and produces all the sizes at once.

How to Create a Favicon with tool.tl

  1. Prepare your PNG โ€” Use a square PNG of at least 256ร—256 pixels. Transparent background works best
  2. Open the generator โ€” Go to tool.tl/to-favicon
  3. Upload your image โ€” Click to upload or drag your PNG onto the page
  4. Download the ICO file โ€” The tool generates a multi-size favicon.ico automatically. Click to download

How to Add the Favicon to Your Website

Place favicon.ico in your site's root directory, then add these tags inside your HTML <head>:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Most modern frameworks (Next.js, Astro, Nuxt, etc.) have a dedicated folder for favicon files โ€” check your framework's documentation for the exact setup.

Design Tips for a Good Favicon

  • Keep it simple: At 16ร—16 pixels, complex text and fine details become unreadable. Use a bold icon or a single letter
  • Avoid thin lines: Lines of 1โ€“2px disappear at small sizes
  • Use a transparent background: PNG transparency lets your favicon look good on both light and dark browser themes
  • High contrast: Make sure the icon is visible on both white and dark backgrounds

Frequently Asked Questions

Is the favicon generator free?

Yes โ€” tool.tl's favicon generator is completely free with no account required.

Why isn't my new favicon showing up?

Browsers cache favicons aggressively. Force-refresh with Ctrl+Shift+R (or Cmd+Shift+R on Mac), or clear your browser cache to see the updated icon.

Can I use SVG for a favicon?

Modern browsers support SVG favicons, but for maximum compatibility, always include a .ico version. You can declare both formats in your HTML and the browser will use what it supports.

What input formats are supported?

tool.tl's favicon generator accepts PNG, JPG, and SVG. For best results, use a PNG with a transparent background.