How to Create a Favicon for Your Website (Free Online Tool)

Every website has one, but most people only notice when it is missing. The favicon — the small icon that appears in browser tabs, bookmarks, and reading lists — is one of the smallest yet most visible parts of your brand identity. A polished favicon makes your site look professional. A missing or broken one signals a half-finished project.

This guide explains what a favicon is, the sizes and formats you need, how to create one from scratch or from an existing logo, and how to add it to any website.

What is a favicon?

A favicon (short for "favorites icon") is a small image that browsers display in several places:

• Browser tab: next to your page title, so users can identify your tab among many open tabs
• Bookmarks and favorites: next to your site name in bookmark menus
• Browser history: next to URLs in the address bar dropdown
• Reading lists and home screen shortcuts: on iOS, Android, and desktop apps
• Google Search results: next to your site name in mobile search results

Browsers look for a file named favicon.ico in your site's root directory automatically, or you can specify a different file and location with an HTML <link> tag.

Favicon sizes you need

The original favicon standard used 16×16 pixels. Today, the ecosystem has expanded:

Size	Use case
16×16	Classic browser tab, minimum size
32×32	Standard browser tab on high-DPI displays
48×48	Windows taskbar pinned sites
180×180	Apple touch icon (iPhone home screen)
192×192	Android Chrome home screen
512×512	Progressive Web App (PWA) splash screen

For a simple blog or marketing site, a 32×32 or 64×64 .png file covers most cases. For a full multi-platform setup — especially if you want home screen icons on mobile devices — you need the full range.

The .ico format is a container that bundles multiple sizes (typically 16×16, 32×32, and 48×48) into a single file. Browsers pick the best size automatically. For modern sites using the HTML <link> approach, individual .png files at specific sizes work just as well.

What makes a good favicon?

At 16×16 pixels, you have 256 pixels of canvas. That is not much. Effective favicons share a few characteristics:

Simplicity over detail. Complex logos, wordmarks, and photographs turn into unrecognizable blobs at small sizes. The best favicons use a single letter, a simple geometric shape, or a bold symbol.

High contrast. Your favicon will appear against browser chrome that might be white, gray, or dark depending on the user's theme. High contrast between the icon's foreground and its background ensures visibility in all conditions. Avoid light-on-light or dark-on-dark combinations.

Recognizable at a glance. Users switch between dozens of tabs. Your favicon needs to be identifiable within half a second. Think about what makes your brand distinctive and distil it to a single visual element.

Transparent background (optional). A .png favicon with a transparent background adapts to the browser's tab color automatically. A solid background color makes the icon appear as a small square, which can look good if it matches your brand palette.

Creating a favicon: three approaches

Approach 1: Use a letter or initial

The simplest approach is to use the first letter of your site or company name. Choose your brand color as the background, use a contrasting color for the letter, and pick a bold, legible font. This is what many major companies (Google's "G", Figma's "F") do at small sizes.

You do not need design software to do this. Image editing tools that let you set a canvas size, add a background fill, and type a character are sufficient.

Approach 2: Simplify your existing logo

If you already have a logo, the favicon is usually not a direct crop or resize — it is a simplified version created specifically for small sizes.

Take your logo into an image editor and ask: what is the single most recognizable element? For a text logo, it is usually the first letter or a distinctive letterform. For a symbol logo, it is the core shape with fine details removed. For a combination mark (symbol + text), use the symbol alone.

Resize this simplified version to 64×64 pixels and check that it is still legible and recognizable. If it is not, simplify further.

Approach 3: Design from scratch with a free tool

Several free tools let you design and export favicons without any prior design experience. They typically offer:

• Icon libraries with thousands of symbols
• Color customization
• Background shape options (circle, rounded square, none)
• Export at multiple sizes simultaneously

FixTools' Image Format Converter can help you prepare and resize images for favicon use. The Image Resizer lets you set exact pixel dimensions so your favicon hits the target sizes precisely.

Creating a favicon from an existing image

If you have a PNG, JPG, or SVG file and want to convert it to a favicon:

1. Start with the highest-resolution version of your image. Downsampling from a large image to a small one produces better results than upscaling a small image.
2. Crop to a square. Favicons are square. If your image is not square, crop it to include the most important element centered in a square frame.
3. Resize to 64×64 or 128×128 pixels. This gives you a clean starting size before converting.
4. Convert to .ico or save as .png. For .ico, you need a tool that bundles multiple sizes. For .png, a standard image save is fine.
5. Test at small sizes. Zoom out until the favicon appears at actual tab size (roughly 16×16 points on screen). If it looks like noise, simplify the design.

The FixTools Image Resizer handles precise pixel resizing. Use it to get your image to exactly 64×64 before converting to your target format.

Adding a favicon to your website

Plain HTML sites

Place the favicon file in your site's root directory and add a <link> tag to the <head> section of every page (or your HTML template):

<!-- Basic favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

WordPress

Go to Appearance → Customize → Site Identity and upload your favicon in the "Site Icon" field. WordPress handles the HTML automatically.

Next.js (App Router)

Place your favicon.ico file in the app/ directory root. Next.js picks it up automatically. For custom sizes, export a generateMetadata function or place icon.png and apple-icon.png in the app/ directory.

Webflow

Go to Site Settings → General → Favicon & Touch Icons and upload your file. Webflow handles all the HTML link tags.

Squarespace, Wix, Shopify

All three have a "Favicon" field in their site settings panel. Upload a square PNG (512×512 is recommended) and the platform resizes and applies it automatically.

Testing your favicon

After adding a favicon, test it in multiple places:

1. Browser tab: open your site in a new tab and check the icon appears
2. Bookmark it: save it to favorites and verify the favicon shows in the bookmarks bar
3. Mobile home screen: on iPhone or Android, add your site to the home screen via the browser share menu. The icon that appears is your touch icon
4. Incognito window: this bypasses your browser's favicon cache, so you see the current state without stale data

Browsers cache favicons aggressively. If your icon is not appearing after an update, force a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache.

Troubleshooting common favicon problems

Favicon shows on one page but not others: The <link> tag is probably only in some pages' <head> sections. Add it to your site-wide HTML template or layout file.

Old favicon still showing after update: Browser cache. Use incognito mode to check the current state, then wait for the cache to expire or force-clear it.

Favicon looks blurry: You are serving a small source file that is being upscaled, or the original design has too much detail for small sizes. Create the favicon at a larger size (64×64 or 128×128) and let the browser downsample it.

Google Search shows a different icon: Google has its own cache for favicons and may take days or weeks to pick up a change. Ensure your favicon is in the root directory and reachable at yoursite.com/favicon.ico. Submit your URL for recrawling via Google Search Console.

Favicon not showing on iOS home screen: You need an Apple touch icon — a PNG named apple-touch-icon.png at 180×180 pixels. Regular favicons do not appear as iOS home screen icons.

Create your favicon now

The process takes minutes. Start with a 512×512 square image — either a simplified version of your logo or a fresh design using an initial or symbol. Use the FixTools Image Resizer to hit the exact pixel sizes you need, and the Image Format Converter to convert between formats. Upload the result to your site's root directory and add the appropriate <link> tags. Your site will have a polished, professional favicon visible across every browser, device, and platform.