The small icon in a browser tab is one of the first things users notice — and one of the last things most website owners set up properly. This free favicon generator takes any image you upload and produces favicon files in every size browsers and devices expect, along with the HTML code to add them to your site.

No design software needed. No account. Works for any platform.

How to Create a Favicon Online

Upload your image — drag and drop or click to browse. PNG, JPG, and SVG are all supported. Use a square image for best results, ideally 512×512 pixels or larger.
Preview — the browser tab preview shows exactly how your favicon will look at actual size before you download anything.
Download the ZIP — the package includes all size variants and an HTML snippet ready to paste into your site’s <head>.
Add to your website — upload the files to your site’s root directory and copy the HTML code into your page template.

What Favicon Sizes Do You Actually Need?

Browsers and devices request favicons at different sizes depending on where they’re displayed. Here’s what the generated package covers:

16×16px — The standard browser tab size. The smallest and most commonly requested size. Appears in the address bar and browser tabs on desktop.

32×32px — Used by some browsers for the taskbar and shortcut icons. Also the standard for most Windows shortcut icons.

48×48px — Windows desktop shortcut and some taskbar contexts.

180×180px — Apple Touch Icon. Used when a user saves your site to their iPhone or iPad home screen. Without this size, iOS uses a screenshot of your page instead of a clean icon.

192×192px — Android Chrome home screen icon and Progressive Web App (PWA) manifest icon.

512×512px — High-resolution PWA splash screen icon. Also what WordPress uses as the base image when you set a Site Icon.

The HTML code the tool generates includes the correct <link> tags for each of these, including apple-touch-icon declarations for iOS devices.

What Image Should You Use?

The quality of your favicon depends heavily on the source image. A few practical guidelines:

Use a square image — Favicons are always displayed in square containers. A non-square image gets cropped or letterboxed, which rarely looks good at small sizes.

Simple designs work best — At 16×16 pixels, there are only 256 pixels to work with. Intricate logos, detailed illustrations, and fine text become unreadable. A single letter, a simple icon, or a bold abstract shape reads clearly at small sizes.

Start from the highest resolution you have — The tool scales down, so starting with a 512×512 or larger image preserves more detail in the smaller output sizes than starting with a small image and scaling up.

Transparent backgrounds usually work well — On light-colored browser tabs, icons with transparent backgrounds look clean and integrated. Test against both light and dark tab colors if you’re using a dark icon.

Test your favicon in dark mode — A growing share of users browse in dark mode. A dark icon on a transparent background becomes invisible against a dark tab bar. Add a light outline or background if your icon has dark elements.

How to Add a Favicon to WordPress

WordPress has had built-in favicon support since version 4.3. You don’t need a plugin for basic setup.

Using the Customizer (Classic Themes): Go to Appearance → Customize → Site Identity → Site Icon. Upload a square image at least 512×512 pixels. WordPress automatically generates all the smaller sizes it needs. Click Publish.

Using Settings (Block Themes): In newer block-based WordPress themes, the Customizer may not be available. Instead, go to Settings → General and scroll down to Site Icon.

Manual HTML method: If you need precise control over which files browsers load, upload the favicon files to your site’s root directory via FTP or your hosting file manager, then add the HTML code from this tool into your theme’s header.php or equivalent template file, inside the <head> section.

If your favicon doesn’t appear immediately after uploading, clear your browser cache — browsers cache favicons aggressively.

How to Add a Favicon to HTML Sites

For plain HTML websites, place the downloaded favicon files in your root directory (the same folder as your index.html) and add this inside the <head> of every page:

html

<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">

The HTML code from this tool already includes these tags pre-filled with the correct filenames. Copy and paste directly.

ICO vs PNG — Which Format to Use?

ICO (.ico) is the original favicon format and the most broadly compatible. It’s a container format that can bundle multiple sizes (16×16, 32×32, 48×48) into a single file. All browsers support it, including older Internet Explorer versions. Placing a favicon.ico file in your root directory is the minimum requirement — most browsers look for it automatically even without an explicit <link> tag.

PNG is a standard image format that all modern browsers support as favicons. You need separate files for each size, but PNG files are more flexible and often sharper than ICO at the same dimensions. Most modern favicon setups use PNG for specific sizes alongside an ICO fallback.

For most websites, the practical answer is: include both. The ZIP file from this tool does exactly that.

Frequently Asked Questions (FAQ)

There is no single best size — different contexts require different sizes. The essential sizes are 16×16 (browser tab), 32×32 (browser shortcut), 180×180 (Apple Touch Icon for iOS), and 192×192 (Android home screen). This tool generates all of these from a single uploaded image, so you don’t need to create each size manually.

Upload your PNG file using the tool above. For best results, use a square PNG at 512×512 pixels or larger. The tool will generate ICO and PNG favicon files in all required sizes, along with the HTML code to add them to your website. If your image is not square, it will be cropped to fit.

Go to Appearance → Customize → Site Identity → Site Icon in your WordPress admin dashboard. Upload a square image at least 512×512 pixels and click Publish. WordPress automatically handles all the resizing. For block themes, the same option may be under Settings → General → Site Icon. No plugin is required for standard favicon setup.

The most common cause is browser caching. Browsers store favicons aggressively to avoid re-downloading them on every visit. Clear your browser cache with Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac), then hard refresh the page with Ctrl+F5. If you use a CDN or caching plugin on WordPress, clear those caches too.

PNG is the most reliable source format. Use a square PNG at 512×512 pixels or larger for the sharpest results across all output sizes. JPG also works but PNG is better because it supports transparent backgrounds, which most favicons need. SVG files are supported as source images and produce particularly clean results at small sizes.

A favicon doesn’t directly affect search engine rankings. However, it appears next to your site’s title in Google’s search results on mobile — a recognizable favicon can improve click-through rates. More importantly, a missing favicon causes 404 errors in server logs because browsers request favicon.ico automatically even if you haven’t specified one. A proper favicon eliminates these errors and gives your site a more professional appearance across tabs, bookmarks, and search results.

An Apple Touch Icon is the image iOS devices use when a user saves your website to their iPhone or iPad home screen. Without it, iOS takes a screenshot of the page instead — which rarely looks good as an icon. The recommended size is 180×180 pixels. This tool generates it automatically and includes the correct <link rel="apple-touch-icon"> tag in the HTML output.

Technically yes, but text rarely reads well at favicon sizes. At 16×16 pixels, even bold 2–3 character text becomes blurry or unreadable on most screens. If your logo includes text, consider using just the graphic mark or a single initial letter as the favicon instead of the full logo. Simple, high-contrast shapes work best at small sizes.