Favicon.ico - Complete Guide & Generator

Everything you need to know about favicon.ico files - what they are, which sizes to use, browser support, and how to create one. Use our free generator below to create a complete favicon package from any image.

Favicon Generator

Drop your image here

or click to browse files

PNG JPG GIF WEBP SVG
High-resolution square images work best (256px+)

Need a specific format? Try our PNG to ICO, JPG to Favicon, SVG to Favicon, or WEBP to Favicon converters.

Related Favicon Tools:
PNG to ICO ICO to PNG SVG to Favicon Favicon Checker ICO Analyzer Favicon Package All Favicon Tools

What is a Favicon.ico File?

A favicon.ico is a small icon file associated with a website. The name comes from "favorite icon" - it was originally created by Microsoft for Internet Explorer 5 in 1999 to display icons next to bookmarked pages. Today, favicons appear everywhere: in browser tabs, bookmark bars, browser history, search results, and even mobile home screens.

The .ico format is special because it can contain multiple image sizes inside a single file. A typical favicon.ico includes 16x16, 32x32, and 48x48 pixel versions, allowing browsers to pick the right size for each context. While modern browsers also support PNG and SVG favicons, the .ico format remains the most universally compatible option.

Every website should have a favicon - it helps with brand recognition, improves user experience when visitors have multiple tabs open, and can even influence click-through rates in search results. You can create one using our generator above, or try our format-specific tools like PNG to ICO, JPG to ICO, or SVG to ICO converters.

Favicon Sizes - Which Ones Do You Need?

Different contexts require different favicon sizes. Here is a breakdown of every size, where it is used, and whether you actually need it.

Size Where It's Used Format Priority
16x16 Browser tabs, address bar ICO / PNG Essential
32x32 Retina browser tabs, taskbar shortcuts ICO / PNG Essential
48x48 Windows site shortcuts ICO Recommended
64x64 Windows high-DPI shortcuts ICO / PNG Optional
128x128 Chrome Web Store PNG Optional
180x180 Apple Touch Icon (iOS home screen) PNG Essential
192x192 Android home screen (PWA) PNG Recommended
256x256 Windows 10/11 tiles, large shortcuts ICO / PNG Optional
512x512 PWA splash screen, Android adaptive PNG Recommended

At minimum, you need a favicon.ico containing 16x16 and 32x32 versions, plus a 180x180 Apple Touch Icon. Our Favicon Package Generator creates all these sizes automatically. For platform-specific icons, try the Apple Touch Icon Generator or Android Icon Generator.

Favicon Formats - ICO vs PNG vs SVG

Three main formats are used for favicons today. Each has strengths and trade-offs.

ICO Format

The original favicon format. Can bundle multiple sizes in one file. Supported by every browser including old versions of IE.

Universal support
Multi-size in one file
Larger file size
No vector scaling

PNG Format

Modern alternative with transparency support. Requires separate files for each size. Best for Apple Touch Icons and PWA manifests.

Transparency support
Smaller file size
One size per file
No IE 10 or below

SVG Format

Vector format that scales perfectly to any size. Supports CSS media queries for dark mode. Still limited browser support.

Infinite scalability
Dark mode support
No Safari support (partial)
Complex images lose detail

The best approach is to use all three: an .ico file as fallback, PNG files for Apple and Android devices, and an SVG for modern browsers. Use our SVG to Favicon converter if you have a vector logo, or convert from PNG, JPG, or WEBP.

How to Add a Favicon to Your Website

Adding a favicon involves two steps: uploading the files and adding HTML link tags to your pages. Here is the recommended setup for maximum browser and device coverage.

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

Step-by-Step Instructions

  1. Generate your favicons using the tool above. You will receive a ZIP with all needed files.
  2. Upload all files (favicon.ico, PNG files, apple-touch-icon.png) to the root directory of your website.
  3. Add the HTML tags shown above inside the <head> section of every page. Most CMS platforms (WordPress, Shopify, Squarespace) have a dedicated favicon setting.
  4. Test your favicon using our Favicon Checker tool to verify everything is working correctly.
  5. Clear browser cache if you are updating an existing favicon. Browsers cache favicons aggressively - try Ctrl+Shift+R to force a reload.
Most browsers automatically look for /favicon.ico in your site's root directory, even without HTML tags. However, adding explicit link tags ensures consistent display across all browsers and devices.

Browser Support for Favicon Formats

Browser
ICO
PNG
SVG
Animated
Chrome
Firefox
Safari
Edge
Opera
The dash icon ( - ) indicates partial support. Safari supports SVG favicons only in recent versions (16.4+) with some limitations. For full compatibility, always include an ICO fallback. Use our Favicon Checker to test your site.

Favicon Troubleshooting

Favicons can be surprisingly tricky. Here are the most common issues and how to fix them.

Make sure favicon.ico is in your website's root directory (e.g., https://example.com/favicon.ico). Check that the file is accessible - try opening it directly in your browser. Verify the HTML link tags are inside <head>, not <body>.

Browsers cache favicons very aggressively. Try clearing your browser cache with Ctrl+Shift+Delete, or do a hard refresh with Ctrl+Shift+R. You can also add a cache-busting query string: /favicon.ico?v=2. On Chrome, try chrome://favicon/ to see cached favicons.

Start with a high-resolution source image (at least 256x256, ideally 512x512). Make sure your favicon.ico includes both 16x16 and 32x32 versions for retina displays. Use our Icon Resizer or the generator above for best quality.

Check file permissions on your server - the favicon files need to be publicly readable (644 permissions). Also verify your server is returning the correct MIME type (image/x-icon for .ico files). Some hosting providers block certain file types by default.

Google has strict requirements for displaying favicons in search results - it must be a multiple of 48px, properly linked, and on an indexed page. We wrote a complete guide on fixing favicons not showing in Google that covers every scenario step by step.

Start with a PNG file that has a transparent background. JPG files do not support transparency. When converting, select "Transparent" as the background option. You can check your source file's transparency using our ICO Analyzer.

Still having trouble? Please contact us and we'll be happy to help!

Where Do Favicons Appear?

Browser Tabs

Your favicon appears next to your website title in browser tabs, helping users identify your site among multiple open tabs.

Bookmarks

When users bookmark your site, the favicon makes it easy to find and recognize your website in their bookmarks list.

Browser History

Favicons appear in browser history, making it easier for visitors to find and return to your website.

Desktop Shortcuts

When users create a desktop shortcut to your website, the favicon becomes the shortcut icon on their desktop.

Search Results

Google and other search engines display favicons next to your site in search results, improving brand visibility and click-through rates. If yours isn't showing, check our complete fix guide.

Mobile Home Screen

When users add your site to their phone's home screen, the Apple Touch Icon or Android PWA icon acts as your app-like favicon. Create these with our Apple and Android icon generators.

Frequently Asked Questions About Favicon.ico

A favicon.ico file should typically be under 100KB. The ideal multi-size ICO file containing 16x16, 32x32, and 48x48 images is usually 5-15KB. If your favicon is much larger, consider optimizing the source image or reducing the number of embedded sizes. Our generator above creates optimally-sized favicon.ico files automatically.

PNG with a transparent background works best for most favicons, because it preserves clean edges and supports transparency. SVG is ideal if you have a vector logo - it scales perfectly and produces the sharpest results at any size. JPG works too but does not support transparency. You can convert from any format using our PNG to ICO, JPG to Favicon, SVG to Favicon, or WEBP to Favicon tools.

Yes, you should still include a favicon.ico file. Some browsers and tools still look specifically for /favicon.ico in the root directory. Without it, you may see 404 errors in your server logs. The ICO format also provides the broadest compatibility across older browsers and email clients. Our generator above creates both formats for you.

Start with a PNG image that already has a transparent background (not JPG - JPG does not support transparency). Upload it to the generator above and select "Transparent" as the background option. The generated favicon.ico will preserve the transparency. If your source image has a solid background you want to remove, use an image editor like Photoshop, GIMP, or an online background removal tool first.

Google has specific requirements for showing favicons in search results. The icon must be a multiple of 48px (48x48, 96x96, etc.), have a visually distinct design (no offensive content), and the page must be indexed by Google. It can take days or weeks for Google to pick up a new or updated favicon. Make sure your favicon is correctly linked in the HTML head and test it with our Favicon Checker. For a detailed walkthrough, read our complete fix guide for favicons not showing in Google.

Animated favicons (using GIF or APNG) are only supported by Firefox. Chrome, Safari, and Edge will show a static frame instead. Given the limited support, animated favicons are not recommended for most websites. If you want to try it, you can use our GIF to ICO converter, but keep in mind most visitors will see a static version.

Most modern CMS platforms have built-in favicon settings. In WordPress, go to Appearance > Customize > Site Identity > Site Icon. In Shopify, go to Settings > Brand > Favicons. In Squarespace, go to Design > Browser Icon. Upload a 512x512 PNG and the platform handles the rest. For manual control, you can also upload favicon.ico to your site root and add the HTML tags to your theme header.

A favicon is the small icon that appears in browser tabs and bookmarks - typically 16x16 or 32x32 pixels. An Apple Touch Icon is a larger icon (180x180 pixels) used when someone adds your website to their iPhone or iPad home screen. Both serve the same purpose of branding your site, but at different sizes and contexts. You can create Apple Touch Icons with our Apple Touch Icon Generator.

Yes, you can set different favicons for different pages by using different <link rel="icon"> tags in each page's <head>. This is sometimes used by web apps to show notification badges or by multi-brand sites. However, for most websites, a single consistent favicon across all pages is the recommended approach for better brand recognition.

A favicon is not a direct ranking factor, but it indirectly affects SEO. Google displays favicons in search results, and a recognizable icon can improve click-through rates. A missing favicon also generates 404 errors in server logs, which wastes crawl budget. Having a proper favicon signals professionalism and trustworthiness to both users and search engines.