Favicon Generator

How to use Favicon Generator

1. Choose Letters or emoji and type one or two characters, such as your initials or 🐱. Or choose Image and pick a PNG, JPG, WebP or SVG logo.
2. Set the Background colour and Text colour, or tick Transparent background. For images, pick Show the whole image or Fill the square.
3. Check the Preview. The 16 and 32 pixel versions show how it will look in a browser tab.
4. Download favicon.ico and the PNG sizes you need, then Copy the HTML tags into your site’s <head>.

If you enjoy what we do, consider supporting us. Every little bit means the world! Support Catpool on Ko-fi

What a favicon is

A favicon is the small icon that sits next to your page title in a browser tab, in bookmarks and in search results. Phones also use a larger version when someone saves your site to their home screen. A clear favicon makes your site easier to spot among a row of open tabs and looks more trustworthy than the browser’s blank page icon.

Favicons are tiny, so simple works best. One or two bold letters, a single emoji or a plain logo mark reads far better at 16 pixels than a detailed picture or a full company name. If your logo has fine detail, try the letters option with your brand colours instead. The Colour Palette Generator can help you choose them, and the Colour Contrast Checker tells you whether your letters stand out against the background.

Which files you get

favicon.ico holds 16, 32 and 48 pixel icons in one file. Browsers look for it at your site’s root (/favicon.ico) even without a tag, so it is worth uploading. favicon-16×16.png and favicon-32×32.png are the sharp tab icons modern browsers prefer. apple-touch-icon.png (180 pixels) is used when someone adds your site to an iPhone or iPad home screen. android-chrome-192×192.png and android-chrome-512×512.png cover Android home screens and web app manifests. The 48 pixel PNG is a spare for anywhere that asks for one.

Adding the favicon to your site

Upload the files to the top level of your website, so that favicon.ico opens at yoursite.co.uk/favicon.ico. Then paste the copied tags inside the <head> of your pages. If you keep the files in a folder instead, change the paths in the tags to match. On WordPress you can skip the tags: go to Appearance, Customise, Site Identity and upload the 512 pixel PNG as your Site Icon. Browsers hold on to old favicons, so if you do not see the new one straight away, open the site in a private window.

Using your own image? Shrink a large logo first with the Image Compressor & Converter, which can also turn a WebP or JPG into a PNG.

Privacy

Everything happens in your browser. Your letters and images are drawn on your own device, and the files are made there too. Nothing is uploaded, there is no sign-up and nothing is stored on Catpool’s servers.

FAQ

What size should a favicon be?

There is no single size. Browser tabs use 16 and 32 pixels, Apple devices use 180 pixels and Android uses 192 and 512 pixels. This tool makes all of them, plus a favicon.ico with three sizes inside.

Do I still need favicon.ico?

It is a good idea. Modern browsers use the PNG files from your tags, but older browsers, some feed readers and tools that request /favicon.ico directly still look for it.

Can I use an emoji as a favicon?

Yes. Type an emoji in the letters box and it is drawn into every file as a picture, so it looks the same for all visitors. The style follows the emoji set on your device, for example Apple’s emoji on an iPhone.

Why is my SVG or logo blurry at 16 pixels?

Detail gets lost at that size. Use a simpler version of your logo, a single initial or a bolder shape. Choosing Fill the square also makes the image bigger by cropping the edges.

Can I make a transparent favicon?

Yes. Tick Transparent background. Transparent PNG logos keep their transparency too. Bear in mind that tabs can be light or dark, so make sure your icon shows up on both.

Related: Image Compressor & Converter, Colour Palette Generator, Colour Contrast Checker, Developer, Catpool home.