How to make a favicon
Type one or two letters (or an emoji), or upload your logo. Pick a background colour, a shape and some padding, and watch the icon update at every size, including the 16-pixel version that sits in a browser tab. Then download everything as one zip, put the files in your website's root folder, and paste the HTML snippet into your page's <head>.
What's in the zip?
- favicon.ico: one file with 16, 32 and 48 px icons inside, for every browser and Windows.
- favicon-16x16.png and favicon-32x32.png: crisp PNG tab icons.
- apple-touch-icon.png (180 px): what iPhones and iPads show when someone adds your site to the home screen.
- android-chrome-192 and 512, plus a maskable 512 icon that Android can crop to a circle without cutting your logo.
- site.webmanifest: tells phones your site's name, colours and icons, so it can be installed like an app.
Tips for a good favicon
- At 16 pixels, detail disappears. One bold letter or a simple shape reads best.
- Use strong contrast between the letter and the background.
- A square logo with a little padding looks best in every shape.
Is my logo uploaded?
No. Every icon is drawn by your own browser, so your files never leave your device.