A favicon is the small icon that appears in your browser tab next to the page title — the tiny visual marker that lets you identify a site at a glance when you have fifteen tabs open. It also appears in browser bookmarks, reading lists, browser history, mobile home screen shortcuts, and increasingly in Google search results alongside your site name. It's one of the smallest pieces of a website's visual identity and one of the most consistently overlooked.

Most new websites launch without a favicon, or with a browser's generic placeholder icon — the functional equivalent of putting a "Coming Soon" sign on a shop window. It's a small detail, but visitors notice its absence. A missing favicon quietly signals an unfinished or amateur site. A well-designed one reinforces brand recognition every time someone glances at their browser tabs.

Here's everything you need to know about favicons — what they actually are, where they appear, how to create one, and how to install it correctly.

What a Favicon Actually Is

The name "favicon" comes from "favorites icon" — the icon that Internet Explorer displayed next to bookmarked URLs in the late 1990s. It's stuck as the standard term for any small site icon regardless of where it appears.

The original favicon format was ICO — a Microsoft file format that could store multiple image sizes in a single file. Browsers would pick the appropriate size for the context. The ICO format is still widely used because of its multi-size capability, but modern browsers also accept PNG and SVG favicons, which are easier to create and work well across most contexts.

A complete modern favicon setup actually involves several files at different sizes and formats for different contexts:

  • favicon.ico — the classic format, typically containing 16×16, 32×32, and 48×48 pixel versions. Placed in the root directory of your site, it's automatically found by browsers without any HTML required.
  • favicon-32x32.png and favicon-16x16.png — PNG versions for browsers that prefer them over ICO
  • apple-touch-icon.png — 180×180px PNG used when someone adds your site to their iPhone or iPad home screen
  • android-chrome-192x192.png and android-chrome-512x512.png — used for Android home screen shortcuts and Progressive Web App manifests
  • site.webmanifest — a JSON file that ties the Android icons together and provides PWA metadata

That might sound like a lot of files, but a good favicon generator handles all of them from a single source image in one step — which is exactly what the ImageToolShack Favicon Generator does.

Where Favicons Appear

Understanding where favicons are displayed helps you design one that works in all those contexts — and explains why a simple, high-contrast design almost always works better than a complex one.

Browser tabs. The most visible location, displayed at 16×16 pixels on standard displays and 32×32 on high-DPI displays. At 16px, you have very little room to work with — a recognizable symbol, initial, or simplified logo mark reads far better than a detailed illustration or small text.

Bookmarks and browser history. Slightly larger display in some browsers, but still small enough that simplicity is essential.

Mobile home screen shortcuts. When a user adds your site to their iPhone or Android home screen, the apple-touch-icon or Android chrome icon is displayed at close to full app icon size — 60×60px on older iPhones, up to 180×180px on newer ones. This is where you have enough room for more detail, but the icon also needs to look like a proper app icon rather than just a website logo.

Google Search results. Google now displays favicons next to site names in mobile search results and in the "About this result" panel on desktop. This is a relatively new development and one that significantly raises the visibility stakes — your favicon isn't just a browser tab decoration anymore, it's appearing in search results next to every listing from your site.

Browser address bar. Some browsers display the favicon in the address bar when you navigate to a site, alongside the URL.

The 16px test: Before finalizing any favicon design, view it at exactly 16×16 pixels. Most design tools let you zoom out to check this. If you can't immediately tell what it is at that size, simplify. The most effective favicons are almost always simple geometric shapes, single letters or initials, or highly reduced versions of a logo mark — not full logos with text.

Designing an Effective Favicon

Favicon design has a few constraints that are different from other logo or icon design contexts:

Simplicity is non-negotiable. At 16×16 pixels, you have 256 pixels of total space. A complex illustration, fine details, or thin lines will become an unreadable muddle. A single bold letterform, a simple geometric mark, or a highly simplified version of your logo works. Your full logo almost certainly doesn't.

High contrast is essential. Browser tabs can appear on both light and dark backgrounds depending on the user's system theme and browser settings. A favicon that only works on white backgrounds will disappear when someone uses dark mode. Design with strong contrast that reads clearly on both light and dark backgrounds, or use a solid background color on the favicon itself.

Use your brand colors. The favicon is a brand touchpoint — even at tiny size, consistent use of your brand colors reinforces recognition. If your brand is strongly associated with a specific color, that color should feature prominently in the favicon.

Think about the tab context. People often have many tabs open simultaneously. Your favicon competes with every other favicon in that row for visual distinctiveness. A favicon that's very similar in shape and color to common icons (Gmail's envelope, Google's G, etc.) will blend in rather than stand out. Distinctiveness matters.

Start from a high-resolution source. Even though the final favicon is tiny, start with a source image of at least 512×512 pixels — ideally a clean vector export (SVG or high-resolution PNG) of your logo mark. The generator handles the downscaling; you want the sharpest possible source to start from.

How to Create a Favicon with ImageToolShack

The Favicon Generator takes a single source image and produces a complete favicon package — all the sizes and formats you need for full cross-browser and cross-platform support, in a single ZIP download. It's the same tool we use for every site in the ImageToolShack network, from ImageToolShack itself to PDFToolShack, DevToolShack, and the rest — a single tool that handles the entire favicon workflow in minutes.

The process:

  1. Prepare your source image. A square PNG with a transparent background works best. 512×512 pixels minimum; larger is better. If you have an SVG version of your logo mark, convert it to a high-resolution PNG first using the SVG to PNG converter.
  2. Upload to the Favicon Generator. Drop your image into the tool at /tools/favicon-generator.php.
  3. Download the package. The generator produces a ZIP containing all required sizes and formats, plus a ready-to-use HTML snippet for your <head> section.
  4. Upload the files to your server. The favicon.ico, PNG files, and site.webmanifest go in your site's root directory (the same folder as your homepage).
  5. Add the HTML snippet to your <head>. The generator provides the exact link tags — copy and paste into your site's <head> section.

Installing a Favicon: The HTML

A complete modern favicon implementation in your HTML <head> looks like this:

<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">
<link rel="manifest" href="/site.webmanifest">

The favicon.ico in your root directory will be found automatically by most browsers even without the explicit link tag — but including all the link tags ensures every browser and device gets the right format and size.

Platform-Specific Notes

WordPress. WordPress has built-in "Site Icon" support under Appearance → Customize → Site Identity. Upload a square image of at least 512×512px and WordPress generates the necessary sizes automatically. You can also upload the pre-generated favicon package directly via FTP if you want full control over the output.

Shopify. Online Store → Preferences → Favicon. Same requirements: square, 512×512px minimum.

Squarespace and Wix. Both have favicon upload sections in their site settings panels. Check your specific platform's documentation for the current path — it moves occasionally with platform updates.

Static HTML sites. Place the favicon files in the root directory and add the link tags to the <head> of every page — or to your shared header template/include if you have one.

Troubleshooting: Why Your Favicon Isn't Showing Up

Favicon caching is aggressive — browsers cache them for a long time because they change infrequently. If you've uploaded a new favicon and the old one (or the missing icon placeholder) is still showing, try these in order:

  • Hard refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac)
  • Clear your browser cache specifically for the site
  • Open the site in an Incognito/Private window — this bypasses the cache entirely
  • Verify the favicon files are actually in the root directory by navigating directly to yourdomain.com/favicon.ico — you should see the icon, not a 404 error
  • Check that the HTML link tags are in the <head> section and point to the correct paths

It's a small thing — 16 pixels wide — but a favicon is part of the finished quality of any website. It takes about five minutes to create and install correctly, and it's one of those details that visitors might not consciously notice when it's there but absolutely notice when it isn't. The Favicon Generator is free, produces a complete package in seconds, and requires no design software or technical knowledge. It's a five-minute task worth doing right.