How to use Favicon generator
- Choose your logo, ideally a square PNG of 512 pixels or more.
- Fit it inside the square with padding, or fill the square, and pick a background and theme colour.
- Select Generate favicons and check the previews.
- Download the zip, upload the files to your site's root, and paste the HTML into your pages' <head>.
What a modern favicon set contains
Browsers, phones and operating systems each look for a different icon. Browser tabs use small PNGs at 16 and 32 pixels. Some browsers, RSS readers and bookmarking tools only ever request /favicon.ico, so that file still matters; this one bundles 16, 32 and 48 pixel images. iPhones and iPads use a 180 pixel apple-touch-icon when someone adds your site to the home screen. Android and installed web apps use 192 and 512 pixel icons listed in a web app manifest, site.webmanifest, which also carries your site's name and theme colour.
The generator makes every one of those files from a single image, plus a short HTML snippet that links them, so you don't have to remember which tag each platform wants.
Getting a crisp result
Start from a square image of 512 pixels or more with a transparent background: a logo mark rather than a full wordmark, because text is unreadable at 16 pixels. Fit inside keeps the whole image visible with a little padding, which suits most logos. Fill the square crops the image to fill every pixel, which suits photos and logos that are already square.
Icons for browser tabs keep their transparency. The 180 pixel and larger icons are placed on a background, white unless you choose another colour, because iOS shows transparent areas of home-screen icons as black. The theme colour tints the browser interface on Android and in installed apps.
Installing the files
Unzip the download and upload every file to the root of your site, so they're available at addresses such as example.com/favicon.ico. Then paste the HTML snippet into the head of every page, or into your framework's layout or head component. Browsers cache favicons aggressively, so a changed icon can take a hard refresh or a new browser tab to appear.
Everything is drawn in your browser: the logo is never uploaded, and the zip is assembled on your device.
Questions
- Which files do I actually need?
- favicon.ico for browsers and tools that only look for it, 16 and 32 pixel PNGs for browser tabs, a 180 pixel apple-touch-icon for iPhone home screens, 192 and 512 pixel icons for Android and installed web apps, and site.webmanifest to describe them. The zip contains all of them.
- Why do large icons get a white background?
- iOS shows transparent parts of a home-screen icon as black, so the 180 pixel and larger icons are placed on white unless you choose another colour. Browser-tab icons keep their transparency.
- Is my logo uploaded?
- No. Every size is drawn in your browser and the zip is built there.