What is a favicon and why do I need one?

A favicon (short for 'favorites icon') is a small icon displayed in browser tabs, bookmarks, history lists, and search results next to your website's name. Favicons help users quickly identify your site among multiple open tabs and improve brand recognition. Every professional website should have one.

What sizes do I need for favicons?

Modern websites need multiple favicon sizes: 16x16 and 32x32 for browser tabs, 48x48 for Windows site shortcuts, 180x180 for Apple touch icons (iOS home screen), 192x192 and 512x512 for Android Chrome. This tool generates all required sizes from a single source image.

What image format should I use as the source?

For best results, use a square PNG or SVG image at least 512x512 pixels. SVG files scale perfectly to any size. PNG files with transparency work well too. JPEG and WebP are supported but don't support transparency.

How do I add favicons to my website?

Place the generated favicon files in your website's root directory, then add the provided HTML link tags to the section of your HTML document. This tool generates the exact HTML code you need to copy and paste. You should also include the site.webmanifest file for Android/Chrome support.

What is site.webmanifest and do I need it?

site.webmanifest is a JSON file that provides metadata about your web application to Android Chrome and other browsers. It specifies your app's icons for the home screen, splash screen, and app switcher. Including it ensures your site looks professional when users add it to their Android home screen.

Favicon Generator

Upload an image and generate all favicon sizes for your website

All sizes included | 100% client-side

Drop your image here

or click to browse — PNG, JPG, SVG, WebP — square images work best

Choose File

Source Image

Replace Image

Options

Background Color

For transparent images

Keep transparent

Border Radius

Round the corners

Square Circle

Padding

Space around the icon

None 20%

Generated Favicons

HTML Code

Add this code inside the <head> section of your HTML

site.webmanifest

Save this file as site.webmanifest in your website’s root directory

100% Browser-Based — Your Images Stay Private

All favicon generation runs locally using the HTML5 Canvas API. Your images never leave your device and no data is sent to any server. You can even disconnect from the internet and the tool keeps working. Free to use with no file size limits.

What Is a Favicon?

The small icon that makes a big difference for your website

A favicon (short for “favorites icon”) is the small icon that appears in browser tabs, bookmark lists, history entries, and search engine results next to your website’s name. Originally introduced by Internet Explorer 5 in 1999, favicons have become an essential part of web identity.

Favicons serve multiple purposes: they help users quickly identify your site among dozens of open tabs, reinforce your brand recognition, and signal professionalism to visitors. Search engines like Google also display favicons in mobile search results, making them an important element of your search presence.

Modern favicons go beyond the traditional 16×16 pixel favicon.ico file. Today’s websites need multiple icon sizes to support browser tabs, mobile home screens, app switchers, and desktop shortcuts across all major platforms including iOS, Android, Windows, and macOS.

Browser Tabs

Favicons appear in every browser tab, helping users identify your site at a glance when multiple tabs are open. The 16×16 and 32×32 sizes are used here.

Mobile Home Screens

When users add your site to their phone’s home screen, the apple-touch-icon (180×180) or Android Chrome icon (192×192) is used as the app icon.

Search Results

Google displays favicons next to your site name in mobile search results. A recognizable favicon can improve click-through rates from search listings.

Favicon Sizes Explained

Every size you need and where each one is used

Size	File Name	Usage	Platform
16 × 16	favicon.ico	Browser tab icon (standard)	All browsers
32 × 32	favicon-32x32.png	Browser tab icon (high-DPI)	All browsers
48 × 48	favicon.ico	Windows site shortcut	Windows
64 × 64	favicon-64x64.png	Windows site icon	Windows
96 × 96	favicon-96x96.png	Google TV / shortcut icon	Chrome, Google TV
128 × 128	favicon-128x128.png	Chrome Web Store icon	Chrome
180 × 180	apple-touch-icon.png	iOS home screen icon	Apple iOS / iPadOS
192 × 192	android-chrome-192x192.png	Android home screen icon	Android Chrome
256 × 256	favicon-256x256.png	Windows 10 medium tile	Windows
512 × 512	android-chrome-512x512.png	Android splash screen / PWA	Android Chrome

How to Add Favicons to Your Website

Follow these steps to set up favicons for all platforms

Generate Your Favicons

Upload a square image (at least 512×512 pixels) to this tool. For best results, use a simple, recognizable logo or icon. Adjust border radius and padding if needed, then download the ZIP file containing all sizes.

Upload Files to Your Server

Extract the ZIP file and upload all the favicon files to the root directory of your website. Also upload the site.webmanifest file to the same location.

Add HTML to Your Head Tag

Copy the generated HTML code snippet and paste it inside the <head> section of every page on your site. Most frameworks and CMS platforms have a single template file where you can add this.

Verify & Clear Cache

Open your site in a new browser tab to verify the favicon appears. If you see an old favicon, clear your browser cache or try an incognito/private window. Favicons are aggressively cached by browsers.

Tip for CMS platforms: WordPress users can set favicons via Appearance → Customize → Site Identity. However, manually adding the HTML tags gives you full control over which sizes are served. For Laravel, Next.js, or other frameworks, add the link tags to your main layout template.

Frequently Asked Questions

Everything you need to know about favicons and this generator tool

A favicon (short for “favorites icon”) is the small icon displayed in browser tabs, bookmarks, and search results next to your website’s name. It helps users quickly identify your site among multiple tabs, reinforces your brand identity, and signals professionalism. Google also shows favicons in mobile search results, making them important for click-through rates.

Use a square image at least 512×512 pixels for best results. A simple logo mark, icon, or monogram works best since favicons are displayed at very small sizes. Avoid complex designs with fine details or text that won’t be legible at 16×16 pixels. SVG or PNG with transparency are the ideal formats.

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images never leave your device and no data is sent to any server. You can verify this by disconnecting from the internet — the tool continues to work perfectly.

favicon.ico is the legacy ICO format that can contain multiple sizes in a single file (typically 16×16, 32×32, and 48×48). It’s supported by all browsers including very old ones. favicon.png is a modern approach using individual PNG files linked via <link> tags. Most modern websites use PNG favicons with an ICO fallback.

site.webmanifest is a JSON file that provides metadata about your web application to Android Chrome and other browsers. It specifies your app’s name, icons, theme color, and display mode. When users “Add to Home Screen” on Android, the browser uses this manifest to create the app icon and splash screen. Including it is recommended for all websites.

You can provide an SVG favicon with a prefers-color-scheme media query inside it, which lets you define different colors for light and dark modes. Alternatively, use a favicon with enough contrast to be visible on both light and dark backgrounds. A simple approach is to add a subtle background or border to your icon so it remains visible in all contexts.