How to create a favicon for your website

The favicon is the tiny icon in the browser tab, bookmarks, the iPhone home screen and Google search results. Getting it right used to mean juggling a dozen sizes; today four files cover every platform.

The files you actually need

favicon.ico with 16, 32 and 48 px — legacy browsers, Windows shortcuts, Google's crawler.
apple-touch-icon.png at 180 px — iOS home screen.
icon-192.png and icon-512.png — Android and the web app manifest (installable sites, splash screens).
site.webmanifest — points to the two PNGs.

Generate all of them

Draw a square logo. Simple shapes and one or two colours read best at 16 px; text does not.
Open Favicon generator and drop the logo — SVG is ideal because every size is rasterised sharply; a 512 px PNG also works.
Download the ZIP and copy the files to the root of your site.

Favicon generatorCreate a favicon.ico (16/32/48) plus apple-touch-icon and PNG icons from a PNG, JPG, WebP or SVG. All sizes in one ZIP, generated in your browser.

Add this to your <head>:

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Common problems

The logo is not square. The generator centres it with transparent padding; for a tighter icon, crop it to a square first with Crop image.
Old favicon still shows. Browsers cache favicons aggressively. Change the file name or add ?v=2 to the link.
Dark tabs. A black logo vanishes on a dark browser theme. Give it a filled background shape.

Convert SVG to PNG onlineConvert SVG vector files to PNG at any size in your browser. Set the width, keep transparency, convert many files at once and download a ZIP. No upload.

Published 2026-09-21