Favicon generator

Q: Which HTML tags does a favicon need?

At least and . Add the 32 px PNG and a manifest if you also want to cover Android and web apps.

Turn an image into a site icon, in every size.

What is a favicon?

It is the small icon representing a site in the browser tab, bookmarks, history, mobile search results and a phone's home screen when the site is pinned there. Without a favicon, the browser shows a generic icon, which makes a site look unfinished.

Creating your favicon

Choose an image, ideally square, at least 512 × 512 pixels. Toolo generates:

a favicon.ico file, the historic format recognised everywhere;
a pack of PNGs in modern sizes, downloadable as a ZIP.

File	Size	Role
favicon.ico	16, 32, 48 px	Tabs and bookmarks, all browsers
apple-touch-icon	180 px	iPhone and iPad home screen
Icon 192	192 px	Android home screen, PWA manifest
Icon 512	512 px	Web app splash screen

Installing the files

Place favicon.ico at the root of your site: browsers look for it automatically at /favicon.ico. Then add the matching tags to the <head> of your pages, for example:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

For an installable web app, declare the 192 and 512 icons in your manifest.webmanifest file.

Making a tiny icon work

Simplify: at 16 pixels, a detailed logo becomes a blob. A letter, a symbol or a simple shape works better.
Use contrast: the icon must stay readable on a light tab as well as a dark one.
Fill the space: leave little margin around the design.

My new favicon is not showing

Browsers cache favicons for a long time. Force-reload the page, open the site in a private window, or add a version parameter to the address, such as /favicon.ico?v=2.

How to create a site icon, step by step

Prepare the source image: a square of at least 512 × 512 pixels, ideally a transparent PNG. A simple logo or a single letter stays readable at 16 pixels.
Generate the files: drop the image above, then download the favicon.ico (16, 32 and 48 px in one file) and the PNG pack as a ZIP, which holds favicon-16x16.png up to favicon-512x512.png.
Upload them to the root of your site: favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png, and favicon-180x180.png renamed to apple-touch-icon.png.
Declare them in the <head> of every page.

The HTML tags to copy

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">, only if your site has a manifest, where you list the 192 and 512 PNGs for Android.

WordPress and Shopify: the "Site Icon" setting

On a CMS you don't need to touch any code. In WordPress, the Site Icon lives under Appearance > Customize > Site Identity, or in the Site Logo block with a block theme: upload the 512 px PNG and WordPress adds the tags itself. In Shopify, go to Online Store > Themes > Customize, then the theme settings, under Logo or Favicon depending on the theme.

Why the old icon still shows

Besides the browser cache, a caching plugin or a CDN can keep serving the old file: clear it after the change. In Google results, the favicon only updates the next time Google crawls your home page, which can take several days.

Frequently asked questions

Does the image need to be square?

Ideally yes. A non-square image will be adapted, which may distort it slightly. Crop it to a square first with the Crop image tool.

Is my image sent to a server?

No. The icons are generated in your browser; the image does not leave your device.

Is a transparent PNG kept transparent?

Yes. Transparency is preserved in the ICO file and in the PNGs.

Do I really need every size?

favicon.ico is enough for tabs. The 180, 192 and 512 PNGs improve display on phone home screens and for web apps.

Which HTML tags does a favicon need?

At least <link rel="icon" href="/favicon.ico" sizes="any"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Add the 32 px PNG and a manifest if you also want to cover Android and web apps.

What size should a WordPress site icon be?

WordPress asks for a square image of at least 512 × 512 pixels: use the favicon-512x512.png file from the pack.

Does the pack include a manifest file?

No, the ZIP contains only the PNG images. If your site needs a manifest, create manifest.webmanifest yourself and list the 192 and 512 px PNGs in it.