Image guide
How to Generate a Favicon for a Website
A favicon is a tiny site icon shown in tabs, bookmarks, and browser surfaces. Good results begin with simple square artwork that stays recognizable at 16 or 32 pixels.
Open the Favicon Generator toolQuick answer
Use a square source with bold shapes, high contrast, and little or no small text. Detail that looks good at 512 pixels can disappear in a browser tab.
Choose artwork that survives at small sizes
Start with a square PNG or another supported image. Leave a little breathing room around the symbol so it does not touch the edges. A logo mark usually works better than a full wordmark.
Transparent backgrounds are useful when the mark has a clear silhouette. Test it against light and dark browser themes.
How to generate favicon files
- Prepare one square source image.
- Generate the available favicon sizes and download the files.
- Open the smallest icons at 100 percent zoom and confirm the symbol remains clear.
Keep the source separately so you can regenerate the set after a brand update.
Add a favicon to HTML
Place the chosen file in your public assets and reference it from the document head. A basic link can use <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
An SVG favicon can scale well in modern browsers, while PNG sizes provide predictable raster rendering. Use only files your site actually serves.
Test and refresh correctly
Browsers cache favicons aggressively. If an update does not appear, confirm the file URL loads directly, then clear site data or test in a private window.
Check a normal tab, bookmark, and mobile home-screen workflow separately. Those surfaces may use different metadata.
Try it in your browser
The free ToolPixels Favicon Generator processes your file locally in the browser. Review the result and keep the original file for comparison.