A favicon is the small icon shown in browser tabs, bookmarks and history. The same artwork is also used when someone saves your site to a phone home screen. You do not need dozens of files. You need a handful, each for a specific job.
The short list
| File | Size | Used for |
|---|---|---|
favicon.ico | 16, 32 and 48 px inside one file | Older browsers, and anything that requests /favicon.ico by default |
favicon-32x32.png and favicon-16x16.png | 32 and 16 px | Browser tabs on standard and high-density screens |
apple-touch-icon.png | 180 × 180 px | iPhone and iPad home screen shortcuts |
android-chrome-192x192.png and 512x512.png | 192 and 512 px | Android home screen, install prompts and splash screens |
site.webmanifest | text file | Tells browsers the app name, theme colour and the icons above |
Why keep favicon.ico in the site root
Many browsers, feed readers and crawlers simply request /favicon.ico without reading your HTML. If the file is missing you get a 404 in your logs and no icon in those tools. Put it in the root folder of the site. A single ICO file can contain several sizes, which is why one file serves 16, 32 and 48 pixel needs.
The HTML to add
Place links like these inside the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Design advice for tiny icons
A favicon is shown at 16 pixels across in many places, so the design has to survive being very small.
- Use one bold shape or one to three letters, not a detailed logo.
- Use strong contrast between the symbol and its background.
- Leave a little padding so the edges are not clipped by rounded masks.
- The Apple icon should be a full square without transparency. iOS rounds the corners itself, and transparent areas turn black.
Testing
After uploading, open your site in a private window and hard-refresh, because browsers cache favicons aggressively. If you replaced an old icon and still see the old one, it is usually the cache. Check that yoursite.com/favicon.ico opens directly in the address bar.
What our generator makes
Upload a square logo or make a simple letter icon, and the tool produces the files in the table above, plus a README and ready-to-paste HTML, as one ZIP. It all runs in your browser. If your source image is not square, it is fitted with padding rather than stretched, and tiny sizes of a complex logo will always look rougher than a purpose-drawn simple icon.