A favicon is the small icon in a browser tab, a bookmark or a phone’s home screen. Browsers and phones each look for their own sizes, so a complete set is a handful of files plus three lines of HTML.
The files you need
| File | Size | Used by |
|---|---|---|
favicon.ico |
16, 32 and 48 px in one file | Browser tabs and bookmarks, everywhere |
apple-touch-icon.png |
180 × 180 | iPhone and iPad home screens |
icon-192.png |
192 × 192 | Android home screens |
icon-512.png |
512 × 512 | Android splash screens and app installs |
icon-maskable-512.png |
512 × 512 | Android icons cropped to a circle or other shape |
site.webmanifest |
– | Lists the Android icons and your site’s name |
The Favicon Generator makes all of these from one image, in a ZIP.
Start with the right image
- Square, and at least 512 × 512 pixels. Crop it square first with the Image Cropper if needed.
- Simple. At 16 pixels, a detailed logo becomes a smudge. A single letter, symbol or the most recognisable part of your logo works best.
- Transparent background for the browser-tab icon, so it sits well on light and dark tabs. Remove White Background can do this for a logo on white.
- Have an SVG logo? Turn it into a large, sharp PNG with SVG to PNG first.
The generator gives the Apple icon a solid background, because iPhones and iPads show transparent areas of a home-screen icon as black. It also shrinks the maskable icon into the central 80%, so Android can crop it to a circle without cutting off your logo.
Add it to your site
Put the files in the top folder of your website, so they’re at addresses like /favicon.ico. Then add these lines inside the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
If your site uses a website builder or a CMS, look for a “site icon” or “favicon” setting instead; usually you upload the 512 px PNG and it does the rest.
Not showing up?
Browsers keep favicons for a long time. After changing yours, check in a private window, or clear the browser’s cache. Also check the file opens directly at yoursite.com/favicon.ico.