How to Create a Favicon
A modern favicon is more than a 16×16 image. Here's the full workflow for a setup that looks crisp on every browser, OS, and device.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
What is a favicon?
A favicon is the tiny icon a browser shows in the tab, the bookmark bar, and the history list. On mobile it's the home-screen icon. On Windows it's the shortcut icon.
Modern sites ship multiple resolutions and formats so every surface gets a crisp render.
Prepare your source image
Start from a square image that's at least 512×512 — ideally an SVG with a square viewBox. Anything smaller will blur when downscaled.
Avoid thin lines and small text. They disappear at 16×16.
Generate a multi-size .ico
Bundle 16, 32, 48, 64, 128, and 256 inside a single favicon.ico. Browsers pick the right size automatically.
Our favicon generator does this client-side in under a second.
Add the HTML tags
Drop favicon.ico into your site root. Then add the SVG, apple-touch-icon, and manifest icons in <head> for a complete setup.
Verify in every browser
Hard-refresh in Chrome, Safari, Firefox, and Edge. Check the bookmark bar, tab, and a home-screen install.
FAQ
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.