A favicon is the small icon in browser tabs, bookmarks, and browser history. It's usually 16×16 or 32×32 pixels at display size, takes under 20 minutes to set up correctly, and it still surprises people how often it's misconfigured — showing a browser's generic globe icon or a broken image thumbnail instead of the site's mark.
Here is how to create a favicon from any image you already have, and what needs to be added to a site for full browser and device coverage.
What a favicon is and where it shows up
The favicon appears in several places:
- Browser tabs — the small icon to the left of the page title
- Browser bookmarks and favorites lists
- Browser history entries
- Search engine results in some layouts (site icons next to the URL)
- Home screen shortcuts on iOS and Android when a user saves the site
- Progressive Web App (PWA) install prompts and splash screens
Each context has different size and format requirements. Setting up a favicon correctly means covering the main contexts with the appropriate format — not just putting one small image somewhere on the server.
ICO, PNG, and SVG: what browsers use
Three formats are in active use for favicons in 2026:
ICO (favicon.ico). The original favicon format. A single ICO file can contain multiple sizes — 16×16, 32×32, 48×48 — embedded in one container. Browsers pick the right size for the display context. ICO is still the most compatible option for older browsers, RSS readers, bookmark managers, and applications that fetch favicon.ico from the site root as a convention. Many external tools request /favicon.ico directly without reading HTML link tags at all.
PNG. PNG favicons are declared via the <link rel="icon" type="image/png"> tag. They give you precise control over which sizes appear in which contexts. Browsers that support the tag use the PNG declared there; older tools fall back to favicon.ico in the root. PNG is the required format for Apple touch icons — the icon that appears when a user adds a site to their iPhone or iPad home screen.
SVG. SVG favicons are scalable — one vector file works at any display size without pixelation. Supported by Chrome, Edge, and Firefox since 2021; Safari added support in Safari 15. SVG is the cleanest modern option if your logo is available as a vector, but it still needs a PNG or ICO fallback for older Safari versions and tools that don't read SVG favicons.
The sizes you need
The minimum setup that covers most browsers and use cases:
- 32×32 PNG: The standard browser tab and bookmark size. Works on standard and high-DPI displays. Most modern browsers use this as the primary icon when a link tag declares it.
- favicon.ico: A multi-resolution ICO file containing 16×16 and 32×32, placed at the site root (
/favicon.ico). Picked up automatically by tools that fetch it by convention, without reading your HTML at all. - 180×180 PNG: Required for the Apple touch icon — the icon shown when a user adds your site to their iPhone or iPad home screen. Declared via
<link rel="apple-touch-icon">.
For Progressive Web App coverage, the web app manifest (a JSON file linked from the HTML head) specifies additional PNG sizes — typically 192×192 and 512×512 — used by Chrome and Android for home screen shortcuts and splash screens. If your site is a PWA or you want consistent Android home screen coverage, you need those PNG files and a manifest.json that references them.
Preparing your source image
The ideal favicon source is a square image with clean edges and a transparent background. A logo mark — not the full wordmark — works better at small sizes. At 16×16 pixels, a full company name in a logo becomes illegible. The icon element of the logo, a monogram, or a simplified shape is what registers at favicon scale.
If your source is a rectangle (a logo with text alongside the mark), crop to just the icon portion. If the background is white or solid color rather than transparent, removing the background before converting gives a clean result on any browser tab color.
Source resolution: any PNG at 512×512 or larger is more than enough to downsample to 32×32 cleanly. A 64×64 source will work but leaves less headroom for quality at the downsampling step. If you're starting from a JPEG or WebP, convert to PNG first to preserve quality through the resize step — JPEG compression artifacts become visible and blocky at favicon dimensions.
If you need to resize your source image to the target dimensions before converting, the AT USE Image Resize tool handles any starting format up to 20 MB and outputs the exact pixel dimensions you specify.
Creating the favicon.ico file
An ICO file is a container format that holds one or more bitmap images at specific sizes. Creating a proper favicon.ico starts from a PNG at your target dimensions:
- Resize your source image to 32×32 pixels using the Image Resize tool or your image editor.
- Convert the 32×32 PNG to ICO using the AT USE PNG to ICO converter. The output is a valid
favicon.icofile ready for upload. - Upload the resulting
favicon.icoto the root of your website so it's accessible athttps://yourdomain.com/favicon.ico.
Browsers and crawlers that look for favicons by convention will find it there without any HTML configuration. The link tag in your HTML head is still recommended because it gives explicit control over which file is used and at what size, but the root-level ICO is the fallback that matters for external tools, feed readers, and browser history rendering.
Adding the favicon to your website HTML
Add these link tags to the <head> section of your HTML:
<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="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The order matters. Browsers read link tags top to bottom and use the first one they support. Put the specific PNG sizes before the ICO fallback so modern browsers pick the PNG version — which renders more clearly on high-DPI screens — and older tools fall back to the ICO.
The rel="apple-touch-icon" tag is read exclusively by iOS Safari when a user saves the page as a home screen shortcut. Other browsers ignore it. The image at that URL should be exactly 180×180 pixels — iOS does not resize the image; it uses it as-is for the home screen icon. Adding rounded corners to the image yourself is unnecessary; iOS applies the corner radius automatically.
Mobile home screen icons
ICO is a Windows format. It is not used for mobile home screen icons on Apple or Android devices.
iOS (iPhone and iPad): Uses the apple-touch-icon PNG. 180×180 pixels. iOS crops the image to a rounded-square shape automatically — you do not need to pre-round the corners. A flat, transparent background will show through to the device's wallpaper behind the icon; if you want a specific background color, include it in the image itself rather than relying on device defaults.
Android: Uses icons declared in the Web App Manifest (manifest.json). The manifest references PNG files at 192×192 and 512×512 pixels. Without a manifest, Chrome on Android falls back to the apple-touch-icon PNG if one is present. If mobile home screen support matters for your site, add the manifest and the two PNG sizes.
The web app manifest is a plain JSON file linked from the HTML head with <link rel="manifest" href="/manifest.json">. It contains your site name, display mode, theme color, and the icons array pointing to your PNG files. Creating a basic manifest takes less than 10 minutes for a site that doesn't need full PWA functionality — just the icon metadata.
When the favicon doesn't update
Browsers cache favicons aggressively — often more aggressively than regular page content. After uploading a new favicon, you may see the old one for some time even though the file is updated on the server.
Force a refresh: open the browser's developer tools, right-click the reload button, and select "Empty Cache and Hard Reload" (Chrome/Edge). In Firefox, hold Shift while clicking Reload. This clears the browser's local cache including favicons for the current domain.
If the favicon still doesn't appear after a hard reload, verify the file is accessible at its declared URL. Open https://yourdomain.com/favicon.ico directly in the browser. A 404 means the file isn't where the HTML says it is. If you get the old favicon, server-side caching (a CDN or reverse proxy) may need to be purged separately. Most CDNs have a cache purge option in their control panel — purging /favicon.ico and the specific PNG paths forces the CDN to fetch fresh copies from the origin server.
Testing in an incognito or private browsing window is a reliable way to see the current favicon without browser cache interference. Private windows don't carry cached favicon data from previous sessions.
A complete favicon setup in one session
The full setup — ICO for legacy compatibility, PNG for modern browsers, Apple touch icon for iOS home screens — takes less than 20 minutes from a good source image to working favicons across all major contexts. The main investment is the source image: square, clean icon mark, transparent background, high enough resolution to downsample cleanly to 32×32.
Start with the AT USE PNG to ICO converter to generate favicon.ico. Produce the 32×32 and 180×180 PNG files by resizing your source at the Image Resize tool. Add the link tags to your HTML head. Test by opening your site in multiple browsers and verifying the tab icon appears correctly — then test in an incognito window to confirm it's not a cached result.