Create website icons and add them to your HTML

Choose a simple source

Use a square logo or symbol with strong contrast. Fine text and tiny details disappear at 16 or 32 pixels. The generator fits a still JPEG, PNG or WebP image into a square; PNG or WebP can preserve transparency.

Download and install the pack

Download the ZIP and put its files in your site root. It contains a multi-size ICO, PNG favicons, an Apple touch icon and 192- and 512-pixel icons with a web manifest. Add the supplied link tags inside your page head. If you use a subdirectory, update the HTML and manifest paths to match.

Check the published result

Open the icon URLs and check your site in a new browser tab. Browsers cache icons, so an older icon can persist after a deployment. A manifest and icon pack alone do not make a site installable as a complete progressive web app.

An example to work from

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Before you finish

Inspect the smallest icon as well as the large preview, and update the site name in the manifest before publishing.