What is a favicon?
A favicon is the small icon a browser displays next to a website's title in the tab, address bar, bookmarks and browser history. It is usually a square PNG or ICO file, commonly 16×16 or 32×32 pixels.
The word combines "favorite" and "icon" — browsers originally used it for the "favorites" (bookmarks) list. Today the same file is reused across the home screen and app launchers on mobile and desktop.
What size should a favicon be?
A 16×16 or 32×32 pixel PNG is the minimum for browser tabs. A complete favicon set also includes 48×48 for Windows, 180×180 for the Apple touch icon, 192×192 and 512×512 for Android and PWAs, and 270×270 for Windows tiles.
| Size | Used by |
|---|---|
| 16 × 16 | Browser tab, bookmarks (legacy) |
| 32 × 32 | Browser tab, taskbar (modern) |
| 48 × 48 | Windows shortcuts, favicon.ico |
| 180 × 180 | iOS home screen (apple-touch-icon) |
| 192 × 192 | Android / PWA |
| 512 × 512 | Android / PWA store icons |
| 270 × 270 | Windows live tile |
What is the best favicon file format?
Use a multi-resolution ICO for legacy compatibility with Windows and older browsers, PNG for modern browsers, and optionally SVG for crisp scaling in browsers that support it. The safest setup links an ICO plus 16×16 and 32×32 PNG files.
PNG gives the best quality-to-size ratio for today's high-DPI screens. ICO is the only format every Windows version expects. SVG scales perfectly but is ignored by some older browsers, so it is always used alongside, never instead of, PNG/ICO.
ICO vs PNG — what is the difference?
ICO is a container format that can hold several image sizes in one file, which Windows and legacy browsers expect. PNG is a single-size image format supported by all modern browsers. Most sites should ship both an ICO and PNG favicons.
An .ico file stores 16×16, 32×32, 48×48 and up to 256×256 frames together, so Windows can pick the sharpest one. A PNG is a single bitmap. Our guide ICO vs PNG Favicons covers the trade-offs in depth.
How do I add a favicon to WordPress?
Upload your favicon files to your theme folder and add the link tags to header.php inside the <head>, or use the Site Icon setting under Appearance → Customize. Clear any caching plugin afterwards so the new icon appears.
WordPress also auto-discovers favicon.ico at the site root with no code at all. For custom PNGs and Apple icons, a child theme's header.php or a small snippet plugin works best. See How to Add a Favicon to Your Website.
Why is my favicon not showing?
The most common causes are browser caching, an incorrect file path, a 404 on the favicon file, linking an unsupported format, or a non-square source image. Do a hard refresh and open the favicon URL directly in your browser to confirm it loads.
Other frequent culprits: the file is still uploading, a CDN is serving a stale copy, the link tag references a wrong folder, or the image contains transparency where the browser expects an opaque tile. Our guide Why Is My Favicon Not Showing? lists twelve fixes.
How do I make a favicon with a transparent background?
Generate the favicon from a PNG image that already has transparency, or enable the transparent background option in a favicon generator. PNG and ICO formats both support transparency; JPG does not.
Keep in mind that many platforms draw favicons on a colored tile, so a fully transparent icon can look inconsistent. A rounded-square icon with a small transparent margin is the safest look across platforms.
Can I create a favicon from text?
Yes. A favicon generator with a text mode draws your initials or a short word onto a canvas, lets you pick the font, background color and shape, and exports the result in every standard size.
This is the fastest way to get a professional icon for a new project, personal site or SaaS — no designer or image required. Try the text mode in our generator.
What is an apple-touch-icon?
An apple-touch-icon is the 180×180 pixel PNG file iOS uses for a website's icon on the home screen when you add it via "Add to Home Screen". Apple ignores the favicon.ico file and looks for this specific file.
iOS applies its own rounded-corner mask, so the source should be a full-bleed square with no transparency. The file is referenced with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
What is site.webmanifest?
site.webmanifest is a JSON file that describes a web app for Progressive Web Apps (PWAs). It declares the app name, display mode, theme color, background color, and the 192×192 and 512×512 icons Android and Chrome use.
{
"name": "My Website",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#4f46e5",
"background_color": "#ffffff",
"display": "standalone"
}What is browserconfig.xml?
browserconfig.xml is an XML file that tells Windows which images to use for the site's Start menu live tile. It references the 70×70, 150×150, 310×150 and 310×310 pixel tile images and a tile background color.
It is linked with <meta name="msapplication-config" content="/browserconfig.xml">. Without it, Windows falls back to the favicon.ico file at a smaller, blurrier size.
Which browsers support SVG favicons?
As of 2026, Chrome, Firefox, Edge and Safari all support SVG favicons via a link tag with type="image/svg+xml". SVG scales perfectly at any size, but you should still provide ICO and PNG fallbacks for older browsers.
Because SVG favicons render crisply on any screen density, they are a great addition to a favicon set — add them in front of the PNG links so supporting browsers use the SVG version.
Do I need every favicon size?
No. A small blog needs only a 16×16 or 32×32 PNG plus a favicon.ico. Larger or app-like sites benefit from the full set, because Android, iOS, Windows and PWAs each request their own specific sizes.
When in doubt, download the full set from a generator — extra files cost almost nothing and guarantee your icon looks right everywhere.
How long does it take for a new favicon to appear?
Changes can take from a few minutes to several days because browsers cache favicons aggressively. Force a hard refresh, or append a query string such as favicon.ico?v=2 to your link, to see the new icon sooner.
On Chrome try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) or open the favicon URL directly. iOS and Windows tiles are the slowest to update and may need a restart.
Is it safe to upload my logo to a favicon generator?
It depends on the tool. FaviconX never uploads your image anywhere — all processing runs in your browser using the Canvas API, so your logo never leaves your device. Always check a tool's privacy policy before uploading brand assets.
On FaviconX, images are read with the browser's File API and processed in memory; they are never sent over the network, stored, or logged.