What is a favicon and why do I need one?

A favicon (short for 'favorites icon') is a small icon displayed in browser tabs, bookmarks, history lists, and search results next to your website's name. Favicons help users quickly identify your site among multiple open tabs and improve brand recognition. Every professional website should have one.

What sizes do I need for favicons?

Modern websites need multiple favicon sizes: 16x16 and 32x32 for browser tabs, 48x48 for Windows site shortcuts, 180x180 for Apple touch icons (iOS home screen), 192x192 and 512x512 for Android Chrome. This tool generates all required sizes from a single source image.

What image format should I use as the source?

For best results, use a square PNG or SVG image at least 512x512 pixels. SVG files scale perfectly to any size. PNG files with transparency work well too. JPEG and WebP are supported but don't support transparency.

How do I add favicons to my website?

Place the generated favicon files in your website's root directory, then add the provided HTML link tags to the section of your HTML document. This tool generates the exact HTML code you need to copy and paste. You should also include the site.webmanifest file for Android/Chrome support.

What is site.webmanifest and do I need it?

site.webmanifest is a JSON file that provides metadata about your web application to Android Chrome and other browsers. It specifies your app's icons for the home screen, splash screen, and app switcher. Including it ensures your site looks professional when users add it to their Android home screen.

Favicon Generator

Create all favicon sizes from text, emoji, or image — download a ready-to-use ZIP

All sizes included | 100% client-side

Text / Emoji

Letter, Abbreviation or Emoji

Up to 3 characters — emoji recommended for best results

Font Family

Text Color

Font Size

Small Large

Style Bold text

Image Upload

Drop image here or click to browse
PNG, JPG, SVG, WebP — automatically cropped to square

Choose File

Auto-cropped to square center

Replace

Background Keep transparent (PNG)

Image Padding

None 25%

Gradient Background

Color 1

Color 2

Direction

Text Overlay (optional)

Appearance

Background Color

Quick Colors

Background Shape

Corner Radius

Slight (5%) Very round (45%)

Live Preview

64px

yoursite.com ×

Updates live as you change settings

Favicon applied to this tab!

Export

ZIP includes: 16, 32, 48, 180, 192px PNGs + SVG + webmanifest

100% Browser-Based

All processing runs locally in your browser. Nothing is ever uploaded to any server.

Generated Favicons ( sizes + SVG)

SVG included

SVG

favicon.svg

HTML Code

Add this inside the <head> of your HTML

site.webmanifest

Save this as site.webmanifest in your website’s root directory

What Is a Favicon?

The small icon that makes a big difference for your website

A favicon (short for “favorites icon”) is the small icon that appears in browser tabs, bookmark lists, history entries, and search engine results next to your website’s name. Originally introduced by Internet Explorer 5 in 1999, favicons have become an essential part of web identity.

Favicons serve multiple purposes: they help users quickly identify your site among dozens of open tabs, reinforce your brand recognition, and signal professionalism to visitors. Search engines like Google also display favicons in mobile search results, making them an important element of your search presence.

Modern favicons go beyond the traditional 16×16 pixel favicon.ico file. Today’s websites need multiple icon sizes to support browser tabs, mobile home screens, app switchers, and desktop shortcuts across all major platforms including iOS, Android, Windows, and macOS. An SVG favicon is also recommended for crisp rendering on all screen densities.

Browser Tabs

Favicons appear in every browser tab, helping users identify your site at a glance when multiple tabs are open. The 16×16 and 32×32 sizes are used here.

Mobile Home Screens

When users add your site to their phone’s home screen, the apple-touch-icon (180×180) or Android Chrome icon (192×192) is used as the app icon.

Search Results

Google displays favicons next to your site name in mobile search results. A recognizable favicon can improve click-through rates from search listings.

Favicon Sizes Explained

Every size you need and where each one is used

Size	File Name	Usage	Platform
SVG	favicon.svg	Scalable vector, dark mode support	Modern browsers
16 × 16	favicon-16x16.png	Browser tab icon (standard)	All browsers
32 × 32	favicon-32x32.png	Browser tab icon (high-DPI)	All browsers
48 × 48	favicon-48x48.png	Windows site shortcut	Windows
180 × 180	apple-touch-icon.png	iOS home screen icon	Apple iOS / iPadOS
192 × 192	android-chrome-192x192.png	Android home screen icon	Android Chrome

How to Add Favicons to Your Website

Follow these steps to set up favicons for all platforms

Design Your Favicon

Use Text mode to type a letter or emoji, upload your logo in Image mode, or create a gradient background. Adjust the shape, color, font, and corner radius to match your brand. Watch the live 64px preview update instantly.

Download the ZIP Package

Click “Generate Favicons” then “Download ZIP” to get all sizes (16, 32, 48, 180, 192px PNGs) plus an SVG favicon and the site.webmanifest file — everything you need in one package.

Upload Files to Your Server

Extract the ZIP and upload all favicon files to your website’s root directory (the same folder as your index.html). Upload the site.webmanifest file there too.

Add the HTML & Verify

Copy the generated HTML snippet and paste it inside the <head> of every page. Then open your site in a new tab — you should see your favicon immediately. Use the “Preview in Tab” button to check before downloading.

Tip for CMS platforms: WordPress users can set favicons via Appearance → Customize → Site Identity. However, manually adding the HTML tags gives you full control over which sizes are served. For Laravel, Next.js, or other frameworks, add the link tags to your main layout template.

Frequently Asked Questions

Everything you need to know about favicons and this generator tool

A favicon (short for “favorites icon”) is the small icon displayed in browser tabs, bookmarks, and search results next to your website’s name. It helps users quickly identify your site among multiple tabs, reinforces your brand identity, and signals professionalism. Google also shows favicons in mobile search results, making them important for click-through rates.

Absolutely! Switch to Text mode and type your site’s initial letter or a relevant emoji. You can choose the background color, shape, font family, font size, and text color. An emoji on a colored background makes a surprisingly professional and recognizable favicon that renders perfectly at all sizes.

An SVG favicon is a vector-format icon that scales infinitely without losing quality. Unlike PNG, SVG favicons can use CSS prefers-color-scheme to adapt to dark mode, and they look pixel-perfect on every screen density. Modern browsers (Chrome, Firefox, Edge) support SVG favicons. You should include both SVG and PNG favicons — SVG as the primary and PNG as fallbacks.

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images never leave your device and no data is sent to any server. You can verify this by disconnecting from the internet — the tool continues to work perfectly.

site.webmanifest is a JSON file that provides metadata about your web application to Android Chrome and other browsers. It specifies your app’s name, icons, theme color, and display mode. When users “Add to Home Screen” on Android, the browser uses this manifest to create the app icon and splash screen. Including it is recommended for all websites.

The generated SVG favicon from this tool can be further edited to include a prefers-color-scheme media query, letting you define different colors for light and dark browser themes. Alternatively, use a favicon with enough contrast to be visible on both light and dark backgrounds — a circular or rounded shape with a solid background color works best for visibility in any context.