Favicon Generator

How to Create a Favicon for Your Website

📅 April 2026⏱ 6 min read✍️ ToolsBox

A favicon is the small icon that appears in browser tabs, bookmarks, browser history, and on mobile home screens when users save your website. It is a small detail that has a significant impact on brand recognition and perceived professionalism. Creating and implementing a favicon correctly requires generating multiple sizes and adding the right HTML tags — this guide covers everything.

What Is a Favicon?

Favicon stands for "favourite icon." It was introduced by Internet Explorer 5 in 1999, originally as favicon.ico placed in the root of a website. Browsers would automatically look for this file and display it in the address bar and bookmarks.

Today, favicons appear in many more places:

  • Browser tab icons
  • Browser bookmarks and favourites
  • Mobile home screen icons (when users "Add to Home Screen")
  • Taskbar thumbnails when the browser is pinned
  • Google search results (the small icon next to the page URL)
  • Social bookmarking tools and link preview cards
  • PWA (Progressive Web App) app icons

This means you now need several different favicon sizes to cover all contexts — not just the classic 16×16px.

Favicon Sizes You Need in 2026

Here is the complete set of favicon sizes to generate for broad compatibility:

  • 16×16px — Classic browser tab size (the minimum)
  • 32×32px — Standard for most modern browsers and high-DPI displays
  • 48×48px — Windows taskbar icon
  • 180×180px — Apple Touch Icon for iOS (used when users add to home screen on iPhone/iPad)
  • 192×192px — Android Chrome home screen icon
  • 512×512px — Android Chrome splash screen and PWA app icon
  • SVG — Scalable vector favicon for modern browsers (Chrome 93+, Firefox 41+, Safari 10+). A single SVG looks perfect at any size.

Our Favicon Generator takes a single source image and automatically produces all of these sizes in a downloadable package.

Choosing the Right Source Image

Your favicon source image needs to work at tiny sizes. At 16×16px, fine details become unrecognisable blobs. Consider these design principles:

  • Simple shapes: A favicon is not the place for a complex illustration. Use a single letter, a simple logo mark, or an abstract icon.
  • High contrast: The icon must be readable against both light and dark browser tabs. Test it on both.
  • Square crop: Favicons are square. If your logo is horizontal, create a square variant (just the icon, not the wordmark) for favicon use.
  • Transparent background: Use PNG with transparency so the icon works on any browser tab color. Avoid white backgrounds that look out of place on dark-mode browser UIs.
  • Start at 512×512px: Even though favicons are small, design your source at 512px for crisp downscaling. Use a vector (SVG or Illustrator) source for the best results.

How to Generate a Favicon

Our Favicon Generator creates all the sizes you need from a single image:

  1. Open the Favicon Generator on ToolsBox.
  2. Upload your source image (PNG, JPG, or SVG — 512×512px recommended).
  3. Preview how the icon looks at 16px and 32px to make sure it is legible.
  4. Click Generate. The tool creates all sizes and packages them into a downloadable ZIP file.
  5. Extract the ZIP and upload the files to your website's root directory.

The HTML Code for Favicons

Add these tags to the <head> section of every page on your site:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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">
<link rel="manifest" href="/site.webmanifest">

The site.webmanifest file is a JSON file used by Chrome and Android to define the PWA icons. Create it with this content:

{
  "icons": [
    {"src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

Generate your favicon — free

Upload one image and get all the sizes you need in a downloadable ZIP.
Open Favicon Generator →

Frequently Asked Questions

What size should a favicon be?

The minimum is 16x16px for browser tabs. You should also include 32x32px (higher-density displays), 180x180px (Apple touch icon for iOS), and 192x192px plus 512x512px for Android/PWA. A single SVG favicon covers all resolutions perfectly.

What is the difference between favicon.ico and favicon.png?

favicon.ico is a legacy format that can contain multiple sizes in one file and has universal browser support going back to IE. favicon.png is a modern alternative that produces smaller files and supports transparency. Most modern sites use both — .ico as a fallback and .png or .svg as the primary.

Where do I put my favicon file?

Place favicon.ico in your website's root directory (e.g. /favicon.ico). Browsers automatically look there. For PNG and SVG favicons, use <link> tags in your HTML <head> to point to any location on your server.

Why is my favicon not showing up?

Common reasons: the file path in the <link> tag is wrong; the browser cached the old favicon (try a hard refresh with Ctrl+Shift+R); the file format is not supported by the browser; or you are testing on localhost with a proxy that blocks requests to /favicon.ico.

← Back to Blog  |  Related tool: Favicon Generator