How do I add favicons to my website?

Place the favicon files in your site root and add tags in your HTML . This tool generates the exact HTML snippet you need — just copy and paste it.

⭐ Favicon Generator

Upload an image to generate favicons in all standard sizes. Download individually, as a ZIP, or copy the HTML link tags. 100% in-browser.

⭐

Drop an image here or click to browse

PNG, JPG, SVG, WebP

Everything You Need to Know About Favicons — Sizes, Formats, and Best Practices

A favicon is the small icon displayed in browser tabs, bookmarks, and app launchers. Getting the right sizes and formats ensures your brand looks sharp everywhere — from desktop taskbars to mobile home screens and Progressive Web Apps.

Favicon Sizes and Where They're Used

16×16 px — the classic browser-tab favicon, used by all major browsers
32×32 px — displayed in taskbars, bookmark menus, and some high-DPI browser tabs
48×48 px — used for Windows site shortcut icons and pinned tiles
180×180 px (Apple Touch Icon) — shown when users add your site to an iPhone or iPad home screen
192×192 px & 512×512 px — required by Android and PWA manifests for home-screen icons and splash screens
ICO vs PNG vs SVG — ICO is a legacy multi-size container for old browser support; PNG is the modern standard with broad compatibility; SVG offers infinite scalability and dark-mode adaptation but is not yet universally supported

How to Add a Favicon to Your Website

<link rel="icon"> — place <link rel="icon" type="image/png" href="/favicon-32x32.png"> in your HTML <head> for modern browsers
Apple Touch Icon — add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS home-screen bookmarks
Web App Manifest — reference 192×192 and 512×512 icons in a manifest.json file for PWA install prompts and splash screens
favicon.ico fallback — place a favicon.ico file in your site root; browsers automatically check this path when no <link> tag is found
Dark-mode support — use <link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.png"> to serve a lighter icon variant on dark browser themes

Favicon Design Tips

Keep your favicon design simple — it must remain recognizable at just 16×16 pixels. Use your brand's primary colors for instant recognition and avoid text, which becomes illegible at small sizes. Always test your icon against both light and dark browser themes to ensure sufficient contrast. If you need infinite scalability and modern browser support, consider using an SVG favicon alongside PNG fallbacks for maximum compatibility.

Frequently Asked Questions

At minimum you need 16×16 and 32×32 for browsers, 180×180 for Apple Touch, and 192×192 plus 512×512 for PWA manifests. This tool generates all standard sizes in one click.

Modern browsers support PNG favicons via <link> tags. ICO is a legacy format that bundles multiple sizes. PNG is recommended for simplicity and quality; ICO is only needed for very old browser support.

Apple Touch Icon is a 180×180 PNG used when someone adds your website to their iPhone or iPad home screen. Specify it with <link rel="apple-touch-icon" href="apple-touch-icon.png">.

Place the favicon files in your site root and add <link> tags in your HTML <head>. This tool generates the exact HTML snippet you need — just copy and paste it.

A web app manifest (manifest.json) is needed for Progressive Web Apps. It references 192×192 and 512×512 icons. For regular websites, HTML link tags are sufficient.