Favicon Generator

Create professional favicons for your website from any image. Generates all required sizes.

Your Website
https://yourwebsite.com

More Free Tools

SVG to PNG Converter
Image Cropper
Image Resizer

How to Create a Favicon

  1. Add an image - Use the "From Image" tab to pick your logo, icon, or any image. It will be automatically resized to standard favicon dimensions.
  2. Or draw one - Switch to the "Draw" tab to create pixel art directly on a 32×32 canvas. Pick colors and draw pixels one by one.
  3. Preview - See exactly how your favicon will look in a browser tab and at all standard sizes (16×16, 32×32, 48×48).
  4. Download - Get a proper .ico file containing all three sizes bundled together.
  5. Install - Upload favicon.ico to your website's root folder, or add <link rel="icon" href="/favicon.ico"> to your HTML head. For iPhone home screen bookmarks, also upload the 180×180 PNG and add <link rel="apple-touch-icon" href="/apple-touch-icon.png">.

What is a Favicon?

A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmarks, history, and search results next to your website's name. It helps users identify your site at a glance among many open tabs and bookmarks. Most modern browsers support favicons in ICO, PNG, and SVG formats, but the .ico format has the widest compatibility since it can contain multiple sizes in a single file.

Favicon Size Guide

16×16 pixels is the size shown in browser tabs and is the most critical size to get right. 32×32 pixels is used for taskbar shortcuts and on higher-DPI displays. 48×48 pixels appears in Windows site shortcuts and some bookmark managers. This tool generates all three sizes and bundles them into a single .ico file for maximum compatibility.

Tips for Great Favicons

Keep the design simple - at 16×16 pixels, fine details are invisible. Use bold shapes, strong contrast, and no more than 2 to 3 colors. If your logo is text-heavy, consider using just the first letter or a simplified icon version. Test your favicon at actual size (16px) to make sure it's recognizable, not just at the zoomed preview.

Getting the New Icon to Show Up

Browsers hold on to favicons longer than almost anything else they cache, so a freshly uploaded icon often looks like it isn't working when it is. To check, open the icon's address directly in a new tab (your domain followed by /favicon.ico), then load your site in a private window, which skips the cache. In your regular window, a hard refresh usually brings the new icon in, while bookmarks and pinned tabs can hang on to the old one for days.

Google Search shows favicons next to results too, with its own rules: the icon must be square, it must be linked from the head of your home page, and Google recommends something larger than 48×48. The 180×180 PNG this tool makes covers that, so add it as a second line: <link rel="icon" type="image/png" sizes="180x180" href="/apple-touch-icon.png">. Expect Google to take anywhere from several days to several weeks to notice a change.

FAQ

What is the Apple Touch Icon for? When someone adds your site to their iPhone or iPad home screen, iOS uses a 180×180 PNG called apple-touch-icon.png rather than the .ico file. Download both here: the .ico covers browser tabs everywhere, and the touch icon makes your site look proper as a home screen bookmark.
What format should I use? The .ico format has the best browser compatibility and can store multiple sizes in one file. This tool generates a proper multi-size .ico file. For modern browsers, you can also use PNG or SVG, but .ico works everywhere.
Where do I put the favicon file? Upload favicon.ico to your website's root directory (e.g., https://yoursite.com/favicon.ico). Most browsers automatically look for it there. You can also specify a custom location using a <link> tag in your HTML head.
Can I use a transparent background? Yes - both the image upload and drawing tool preserve transparency. The .ico file supports alpha transparency, so your favicon can have a transparent background.
Why does my favicon look blurry? Favicons are very small (16×16 pixels), so complex images will look blurry when scaled down. For best results, use a simple, high-contrast design. The drawing tool lets you place individual pixels for maximum control.
Do I still need favicon.ico if I add PNG icons? It is worth keeping. Many browsers and tools still request /favicon.ico from your site's root on their own, even when the page links to PNG icons, so having the .ico there avoids missing-icon errors and covers older software.