How to Create a Favicon for Your Website

Turn a logo into a favicon and website icon pack. Learn which files to use, how to add them to your site and how to check the result.

Step by step

1. Choose a static JPG, PNG or WebP logo. Transparent PNG or WebP works well.
2. Set padding and choose a transparent or solid background. Inspect the square preview.
3. Prepare the pack, then download individual files or the ZIP. Follow the included installation notes.

Check the result

The logo is fitted without stretching. Small icons lose detail, so a bold symbol usually works better than a long wordmark. Enlarging a small source cannot restore detail.

What files are included?

PNG icons at 16, 32, 48, 180, 192 and 512 pixels; a multi-size ICO; a web manifest and a README.

Can I use the pack in WordPress?

Use icon-512.png for the WordPress Site Icon. For a custom site, follow the HTML examples in README.txt and edit the manifest names.

Does the tool install my favicon?

No. It creates downloadable files. You upload them to your website and update its icon settings.

Keep your original

The tool creates new downloads without changing the file you selected. Processing happens in this browser tab, and exported images do not copy the source metadata. Keep your original if you might need a different result later.

Installing the icons

For WordPress, choose the 512-pixel PNG in your Site Icon setting. For a custom website, upload the generated files, copy the link tags from README.txt into the page head, and edit the website names in site.webmanifest. If you place the files in a subfolder, update the paths. Clear your site cache and reopen the page to check the browser tab icon.

Make a readable favicon

A simple symbol with strong contrast usually survives small sizes better than text. Start with a square or compact logo, add a little padding, and inspect the 16-pixel file at its actual size. Transparency works well for some logos; a solid background can make others easier to recognise.

Check a favicon at its real size

These PNGs were produced with the tool’s icon-fitting function. The small versions are shown at 16 and 32 CSS pixels; the enlarged view is only for inspection. A recognisable symbol works better than tiny lettering.