How to Create a Favicon for Your Website (Complete Guide)
A favicon is the tiny icon that appears in the browser tab, bookmarks and history next to your site's name. It's small, but it makes your site look finished and trustworthy — and it's easy to add.
Step 1: Make the icon files
You need more than one size: a classic favicon.ico for browsers, plus PNGs for Android and Apple devices. The free Favicon Generator creates the whole set from one image — a real multi-size favicon.ico (16/32/48) and PNGs at 16, 32, 48, 64, 180, 192 and 512 px.
- Open the Favicon Generator.
- Upload a square image (512×512 or larger is best).
- Download
favicon.icoand the PNG sizes.
Step 2: Upload the files
Put favicon.ico and the PNGs in your website's root folder (the same place as your homepage file).
Step 3: Add the link tags
Paste these into your site's <head> (the tool shows this snippet for you):
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="apple-touch-icon" href="/favicon-180x180.png">Tips for a good favicon
- Keep it simple. At 16×16 pixels, detail disappears — use a bold symbol or single letter, not your full logo.
- Use a square source so nothing gets cropped awkwardly.
- Start from a vector if you can. If your logo is an SVG, convert it first with SVG to PNG at a large size, then feed that in.
Why bother?
A favicon reinforces your brand every time someone has your tab open, makes bookmarks recognisable, and is used as the app icon when visitors add your site to their home screen. It's a five-minute job that makes a site look professional.