Browser tabs are tiny, so busy artwork turns into a blur. A clean icon helps class sites, club pages, and portfolios look finished.
Design basics
Prefer one or two simple shapes. Avoid very thin lines. Make sure the icon has enough contrast on both light and dark tab bars.
Transparent PNG or WebP is flexible. Do not put a full landscape photo into a favicon.
Check a 16×16 preview. A sharp large image can still be unreadable when tiny.
Common sizes
16×16 and 32×32 are used for tabs. 48×48 appears in some desktop contexts. 180×180 is common for Apple touch icons. One sharp square source image is enough.
Use Favicon Generator, then place the files where your framework expects them, often in public or as metadata icons.
Start from a square source at least 512×512, with a little padding so rounded masks do not clip important edges.
If an old icon still shows, it is usually cache. Hard refresh or change the filename or query string.
Files are generated in your local browser and are not uploaded to our servers. Drop the exports into your static assets folder.