What Is a Favicon?
A favicon is the small icon shown in a browser tab, bookmark list, search result, mobile shortcut and sometimes in browser history. It is tiny, but it affects how polished and recognizable a site feels.
The best favicon is not always a full logo. Wide wordmarks become unreadable at 16 pixels. A symbol, monogram, brand initial or simplified mark usually works better. If your logo is detailed, create a simplified square version before generating the favicon package.
Required Favicon Sizes
| File | Typical size | Purpose |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | Browser tabs and broad compatibility |
| apple-touch-icon.png | 180 x 180 px | iPhone and iPad home screen icons |
| android-chrome-192x192.png | 192 x 192 px | Android and PWA icons |
| android-chrome-512x512.png | 512 x 512 px | High-resolution PWA icon |
| site.webmanifest | JSON | App name, theme color and icon references |
ICO vs PNG
The .ico file is still useful because it can hold multiple icon sizes in one file. Browsers can pick the right size for tabs, bookmarks and legacy contexts. PNG icons are cleaner for modern devices because they support high-resolution app icons and mobile shortcuts.
Use both. The free favicon generator creates the ICO file, PNG icon sizes, the Apple touch icon and the manifest in one browser-based workflow.
Step-by-Step: Create a Favicon From a Logo
- Start with a square PNG logo or a simplified brand mark.
- Use transparent padding so the icon does not touch the edges.
- Preview the icon at 16 px and 32 px. If it is unreadable, simplify it.
- Generate the full favicon package.
- Upload the files to your website root or assets folder.
- Paste the generated HTML into the
<head>of your pages.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Common Favicon Mistakes
Avoid using a wide wordmark as-is. Avoid edge-to-edge icons with no padding. Avoid uploading only one large PNG and assuming every browser will use it correctly. Also avoid changing favicon file names without updating the HTML references.
Fast workflow: resize the source logo with the logo resizer, generate the favicon package with the favicon generator, then compress website images with the image compressor.
FAQ
Should my favicon have a transparent background?
Transparent works well for simple marks, but a solid brand color can improve visibility in dark and light browser themes.
Can I use the same logo for social media and favicon?
You can use the same base brand mark, but social media profiles need larger square images. See the logo size guide for platform dimensions.
Can I make favicon files without uploading my logo?
Yes. Logo Resizer Tool processes favicon files inside your browser, so your source logo stays on your device.