Free Favicon Generator Online — Complete Favicon Guide for Websites (2026)

You launch your site. The layout is clean, page load speeds are excellent, and your metrics are green. Then you open it on a mobile browser—and the tab displays a generic grey globe icon. You pin it to your smartphone's home screen—and it is a blurry screenshot. You search your brand on Google—and the search result shows a hollow circle.

You didn't forget the favicon. You tried to add one. You uploaded a legacy file and pasted a standard header link in your document header.

But modern browsers, mobile viewports, search indexers, and Progressive Web Apps (PWAs) all enforce different sizes, transparency behaviors, and cache structures. A favicon generator simplifies this process down to a single click.

Quick Answer

A favicon generator converts a square source logo into all mandatory sizes and formats—including ICO, PNG, SVG, Apple Touch Icons, and PWA manifest configurations—and compiles the exact HTML link markup to deploy them. To automate this process locally in your browser sandbox, use the ToolifyHub Favicon Generator, download the output files, place them in your root directory, and paste the code snippet inside your page's <head> tags.

TL;DR (Key Highlights)

Root Fallback Required: Chrome, Edge, and search bots always request `/favicon.ico` from your root folder. A missing file triggers server 404 logs.
Multi-Format Approach: Use SVG for scalable modern tabs, PNG for mobile home screens and PWA manifests, and ICO as a legacy fallback.
Apple Opaque Requirement: Apple touch icons should have solid background colors. Transparency is rendered as a black box on older iOS platforms.
PWA manifest.json: Installable mobile web apps require 192px and 512px launcher PNGs, plus a maskable icon configuration.
Cache Purging: Favicons are heavily cached by browsers. Force updates by renaming files or using query strings (`?v=2`) in your link paths.

What Is a Favicon? (Fundamentals)

A favicon (short for favorite icon) is the small icon representing your site across tab strips, bookmarks, history entries, search engine results pages (SERPs), mobile home screen shortcuts, and app installations.

When a website loads, the browser follows a structured logic to find and display the correct icon format:

Header Parse: The browser parses page metadata for rel="icon", rel="apple-touch-icon", or rel="manifest" links.
Root Fallback Request: In parallel, the browser always requests `/favicon.ico` at the site root to satisfy legacy bookmarks.
Context Mapping: The browser displays the SVG or PNG format matching the screen resolution (high-density screen vs. standard tab).

Where Favicons Appear: Surface Mapping

Modern web designs require your favicon to adapt across desktop screens, iOS mobile devices, Android launcher sheets, and search index previews.

User Interface Surface	Required Resolution	Preferred Format	Key Requirement
Desktop Browser Tab	16x16 / 32x32 / SVG	SVG (Primary) / PNG	Vector formats scale cleanly on Retina displays
Google Search Results (SERP)	48x48 minimum	ICO / PNG / SVG	Must be crawlable, square, and not blocked by robots.txt
Apple Touch Icon (iOS Home)	180x180	PNG	Must be opaque (use a solid background fill)
Android launcher / PWA Splash	192x192 / 512x512	PNG (via Web Manifest)	Requires a 409x409 safe zone for maskable cropping

File Formats: ICO vs. PNG vs. SVG

Selecting the correct file formats ensures compatibility across legacy search engines and modern mobile operating systems:

ICO (Legacy Fallback): A container file containing 16px, 32px, and 48px sizes. Essential at root to prevent crawler errors.
PNG (Mobile Workhorse): Lossless raster format with alpha transparency support. Required for Apple device shortcuts and PWA launchers.
SVG (Modern Vector): Scalable vector files that look sharp at any density. SVG supports dark mode swapping dynamically.

Step-by-Step: Generate & Deploy Favicons

1. Prepare Your Source Image

Start with a square image of at least 512x512 pixels (SVG preferred). Because favicons are displayed at 16x16 pixels in browser tabs, simplify detailed logo marks into initials or monograms so they remain recognizable at tiny dimensions.

2. Run the Generator Tool

Upload your image to the ToolifyHub Favicon Generator. The client-side utility will compute:

favicon.ico (16, 32, 48 bundled)
favicon.svg (scalable vector icon)
favicon-16.png & favicon-32.png
apple-touch-icon.png (180x180 opaque)
icon-192.png, icon-512.png, & icon-512-maskable.png
site.webmanifest (JSON file for PWA metadata)

3. Deploy to Your Root Directory

Extract the ZIP contents and upload all files directly to your server's root folder (the same directory level as your index.html).

4. Paste the HTML Head Tags

Insert the following code block inside your page's <head> element:

<!-- SVG for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

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

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

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

<!-- Web Manifest -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Generate Your Favicon Now

Don't risk your privacy on remote servers. ToolifyHub processes all images locally inside your browser.

Go to Favicon Generator

Installation Guides by Development Platform

Next.js App Router Integration

In Next.js App Router, place `favicon.ico`, `icon.svg`, and `apple-icon.png` directly inside the root `app/` folder. Next.js automatically scans these files on compile and generates the correct metadata tags. Alternatively, configure them inside `layout.tsx` metadata config.

WordPress Integration

If your theme supports custom PHP injections, copy the generated HTML block and use functions hooks to render the tags on login pages and admin screens:

add_action('wp_head', function() {
    $path = get_stylesheet_directory_uri() . '/favicons';
    echo '<link rel="icon" type="image/svg+xml" href="' . esc_url($path . '/favicon.svg') . '">';
    echo '<link rel="icon" type="image/png" sizes="32x32" href="' . esc_url($path . '/favicon-32.png') . '">';
    echo '<link rel="icon" type="image/x-icon" href="' . esc_url($path . '/favicon.ico') . '">';
});

Shopify Integration

For Shopify sites, upload your favicon files to your theme Assets directory and render them inside the <head> wrapper of theme.liquid using Shopify asset URL tags.

Common Mistakes & Troubleshooting

Browser Caching Persistence

Browsers cache favicons very aggressively. If your icon does not update after deployment, force a cache purge by appending query strings (e.g. /favicon.svg?v=2) to your HTML links or renaming the assets.

Safari Black Backgrounds

If iOS displays a black border around your home screen icon, your apple-touch-icon.png contains transparent pixels. Replace it with an opaque PNG file filled with a solid background color.

Android Icon White Borders

Android launchers require PWA icons to be maskable. Ensure your 512x512 maskable PNG centers all critical logo graphics inside a 409x409 safe zone circle. You can compress these files using our **Image Compressor** to minimize loading latency.

Privacy & Security Disclosures

Stateless Client-Side Processing

ToolifyHub's Favicon Generator runs entirely locally on your computer. Your files are processed inside your browser sandbox via WebAssembly (Rust to WASM), meaning no image data is uploaded to remote servers. This keeps your staging logo files secure.

Frequently Asked Questions

What is a favicon?

A favicon (favorite icon) is the small square image representing a website in browser tabs, bookmarks, history, search results, mobile home screens, and PWA installs.

What size should a favicon be?

No single size fits all. You need: 16x16, 32x32 (for tabs and bookmarks), 180x180 (for iOS home screen), 192x192 (Android home screen), and 512x512 (PWA splash), plus a scalable SVG and a multi-size ICO fallback.

What format is best for favicons?

A layered approach is best: SVG (primary, modern vector), PNG (fallbacks, Apple, Android manifests), and ICO 16/32/48 (legacy fallbacks and crawler compatibility).

Do I need a favicon.ico file?

Yes. All major browsers still request /favicon.ico at the root folder of your site by default. If this file is missing, it will generate a 404 error in your server logs.

Does a favicon affect SEO?

It is not a direct ranking factor, but Google displays favicons in search results. A crisp, recognizable favicon improves click-through rate (CTR) and user trust, which indirectly boosts rankings.

Why is my favicon not showing in Google search results?

Google only extracts favicons from your homepage. Ensure your favicon is square, at least 48x48 pixels, has a stable URL, and is not blocked by your robots.txt. Google crawls favicons on a slower schedule, which can take weeks.

How do I force browsers to show a new favicon?

Because browsers cache favicons aggressively, the most reliable way is renaming your files (e.g. favicon-v2.svg) or adding a cache-busting query string (e.g. ?v=2) to your HTML links.

What is an Apple touch icon?

It is an opaque 180x180 PNG file used when a user adds your website to their iOS or iPadOS home screen. Transparency should be avoided to prevent iOS from adding a black background.

What is a maskable icon?

It is an Android PWA adaptive icon (512x512 PNG) that stays inside a centered 409x409 pixel safe zone. This allows Android to clip the icon into circles or squares depending on the launcher theme.

Do I need a web app manifest?

Yes, if you want your website to be installable on mobile home screens as a Progressive Web App (PWA). The manifest declares your app's name, theme colors, and launcher icons.

Can I use an animated favicon?

Technically yes (using APNG or GIF formats), but it is highly discouraged. Animations are ignored by most modern browsers and violate accessibility guidelines (WCAG 2.2.2).

How do I make a dark mode favicon?

Use an SVG favicon and embed CSS media queries using the prefers-color-scheme: dark rule inside the SVG XML code to dynamically swap fill colors.

What's the difference between rel="icon" and rel="shortcut icon"?

rel="shortcut icon" is a deprecated legacy tag used for older versions of Internet Explorer. Modern HTML standards use the cleaner rel="icon" markup.

Where should I store my favicon files?

Place them directly at your site's root directory (same level as index.html) so browsers can find /favicon.ico and /site.webmanifest automatically.

Can I use a CDN for my favicons?

Yes, but keeping them on the same origin avoids additional DNS lookups and preflight CORS request delays. If using a CDN, ensure the Access-Control-Allow-Origin header is set to *.

How do I test my favicon configuration?

Check the Icons and Manifest tabs under the Application panel in Chrome DevTools, inspect your page using browser simulation tools, or query the Google s2 Favicons database.

Why does my favicon look blurry on Retina screens?

This happens if you only serve a 16x16 icon. Adding a 32x32 PNG or an SVG vector favicon ensures that high-density screens render the graphic perfectly crisp.

How do I add a favicon to WordPress?

Go to Appearance -> Customize -> Site Identity -> Site Icon and upload a 512x512 PNG. For custom SVG or dark mode support, use hooks in functions.php to inject your head tags.

How do I add a favicon to Next.js?

Place favicon.ico, icon.svg, apple-icon.png, and manifest.json in your app directory (for App Router) or public directory. Next.js automatically detects and registers them.

How do I add a favicon to Shopify?

Upload a square PNG in Theme Settings -> Favicon. For complete PWA manifest and SVG support, upload files to Assets and render them in theme.liquid.

What is the theme-color meta tag?

It defines the tint color of browser tabs, Chrome Android header bars, and PWA launcher boundaries. Match this with your primary brand color hex.

Do I need separate favicons for light and dark modes?

Only if your brand logo loses contrast on white or black backgrounds. Using an SVG favicon allows you to dynamically adjust colors via internal CSS.

Can I use WebP for favicons?

It is not recommended due to inconsistent browser support. Stick to SVG, PNG, and ICO formats for maximum compatibility.

How often should I update my favicon?

Only during a rebrand. Frequent favicon changes confuse returning users and can lead to persistent caching issues where different versions display on different devices.

What is the site.webmanifest file?

A JSON file specifying metadata for mobile installs. It lists parameters like the short name, display mode, theme colors, and paths to your 192px and 512px launcher icons.

Final Action Checklist

Create a square brand icon of at least 512x512 pixels.
Simplify detailed lines so it looks clear at a 16x16 pixel size.
Convert the file using the Favicon Generator.
Ensure apple-touch-icon.png has a solid, opaque background color.
Place all generated files at your root directory path.
Add standard link tags before your closing </head> tag.
Verify using DevTools and Purge Cache debug tools.

*This guide is maintained by the team at ToolifyHub.tools, a free, privacy-first directory of browser-based document and image tools. All processing happens locally in your browser — your files are never uploaded to a server.*

Executive Summary & Reference Guide