Orisod
What is a favicon, and why it matters
The icon helps people recognize a site among open tabs and saved bookmarks. Mobile home-screen icons use related link metadata and often need a larger asset than a browser tab. A missing favicon does not break the site, but a clear, recognizable mark improves navigation and presentation.
Which favicon files are useful
There is no single package required in every project. Common choices include an ICO file for broad legacy support, PNG or SVG icons for current browsers, and an Apple touch icon when you want a tailored iOS home-screen image:
- favicon.ico: the classic format, still expected by many browsers as a fallback.
- Multiple PNG sizes (typically 16×16, 32×32, 192×192, 512×512): for different display contexts, from browser tabs to Android home screens.
- apple-touch-icon: a specific size Apple devices use when a site is saved to an iPhone or iPad home screen.
- A manifest reference: for progressive web apps, tying the icon set together.
A generator can create the selected sizes, filenames, and HTML references from one source image. Review the output rather than assuming every generated file is necessary for your site.
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16×16 + 32×32 (combined) | Legacy browser tab icon |
| favicon-16x16.png | 16×16px | Browser tab (standard) |
| favicon-32x32.png | 32×32px | Browser tab (high-DPI) |
| apple-touch-icon.png | 180×180px | iOS home screen |
| android-chrome-192x192.png | 192×192px | Android home screen |
| android-chrome-512x512.png | 512×512px | Android splash / PWA |
Choose a source image that works at 16 pixels
Use a square logo mark, one or two initials, or a simple symbol with strong contrast. Preview it at 16 × 16 pixels. Fine lines and small text that look good in the source image may disappear at tab size.
Generating the full file set
A generator can turn one source image into ICO and PNG variants plus an Apple touch icon. Download the set that matches your compatibility goals and keep the source image so you can regenerate it later.
Installing it on your site
Place the files at stable URLs and add the corresponding <link> elements inside the HTML <head>. Use the tags supplied for the files you kept, verify each path, then reload the site without cache if the old icon remains visible.
Common favicon mistakes
- Using a busy or detailed image. Anything with fine text or intricate shading turns into an unreadable smudge at 16×16 pixels. Simpler is almost always better.
- Only uploading one size. A single PNG might look fine in a browser tab but appear blank or oddly cropped when someone saves your site to a phone home screen.
- Forgetting to clear the cache after updating. Browsers aggressively cache favicons, so after replacing one, you may need to hard-refresh or clear cached images before the new one shows up.
- Placing the files in the wrong folder. The
<link>tags need to point to wherever the files live on your server. A mismatch here is the most common reason a "correctly generated" favicon still doesn't appear.
Favicon setup questions
Do I need every generated size? Not always. The right set depends on browser support, whether you need legacy compatibility, and whether the site should provide a dedicated mobile home-screen icon.
Can I use a photo? Yes, but most photographs lose recognizable detail at tab size. A cropped subject or simple graphic usually reads more clearly.
Does file generation require paid software? No. A browser-based generator can create the assets; designing a distinctive source icon is a separate task.
Generate your favicon package now
Generate ICO and PNG variants plus an Apple touch icon from one image. Orisod processes the source locally in your browser and includes the corresponding HTML references.
Generate a favicon →After installation, test the favicon in a new tab, a bookmark, and any mobile context you support. A correct file is not enough if the HTML path or browser cache still points elsewhere.