How to Add a Favicon to Your Website
Add a favicon in HTML, WordPress, Shopify, Wix, Squarespace, React and Next.js — with copy-paste snippets.
Create professional favicons in seconds. Upload an image or type your initials, then download every size you need — 16×16 to 512×512, multi-resolution ICO files, Apple touch icons, PWA manifests and Windows tiles.
Everything runs in your browser. Nothing is uploaded.
512 × 512 px preview
Bookmarks
Upload these files to the root of your website and add the snippet above to your <head>. All processing is local — nothing is sent to a server.
Three steps from image to a complete favicon set — no software installs, no accounts, no uploads.
Drag & drop a PNG, JPG, SVG or WebP image, or switch to text mode and type your site's initials.
Pick a background, shape and padding. Watch the browser tab, bookmark bar and mobile home screen previews update live.
Download the ZIP with all sizes, copy the ready-made HTML snippet and paste it into your site's <head>.
Every platform expects a different icon size. This generator creates them all automatically.
| Platform | Recommended size | Format | File name |
|---|---|---|---|
| Browser tab (legacy) | 16 × 16 | ICO | favicon.ico |
| Browser tab (modern) | 16 × 16 / 32 × 32 | PNG | favicon-16x16.png / favicon-32x32.png |
| Windows start menu | 48 × 48 | PNG / ICO | favicon-48x48.png |
| iOS home screen (Apple touch icon) | 180 × 180 | PNG | apple-touch-icon.png |
| Android Chrome / PWA | 192 × 192 and 512 × 512 | PNG | android-chrome-192x192.png / android-chrome-512x512.png |
| Windows live tile | 70 × 70, 150 × 150, 310 × 310 | PNG | mstile-*.png |
WHAT IS A FAVICON GENERATOR?
A favicon generator is a tool that converts an image or text into the small icons browsers display in tabs, bookmarks and home screens. FaviconX does this entirely in your browser — your image is never uploaded to a server, and you can download ICO and PNG favicons in every standard size for free.
Short, direct answers to the most common favicon questions.
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.
A 16×16 or 32×32 PNG is the minimum for browser tabs. A complete set also includes 48×48 (Windows), 180×180 (Apple touch icon), 192×192 and 512×512 (Android/PWA) and 270×270 (Windows tile).
Use a multi-resolution ICO for maximum compatibility with older browsers and Windows, plus PNG files for modern browsers. Linking an ICO together with 16×16 and 32×32 PNGs covers every current browser.
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 your caching plugin afterwards.
The most common causes are browser caching, an incorrect file path, a 404 on the file, an unsupported format, or a non-square source image. Do a hard refresh and open the favicon URL directly in your browser to verify it loads.
Yes. FaviconX is 100% free and processes everything in your browser with the HTML5 Canvas API. Your image is never uploaded, stored or shared, and you never need an account.
Step-by-step help for adding favicons to any website.
Add a favicon in HTML, WordPress, Shopify, Wix, Squarespace, React and Next.js — with copy-paste snippets.
Every favicon size you need in 2026, with exact pixel dimensions and formats for each platform.
The technical differences between ICO and PNG favicons, plus the browser support you actually need.