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.
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.