How to make a favicon

By CrispKit · Last updated 27 October 2026

To make a favicon, start from a square image, turn it into a favicon.ico with 16, 32 and 48 px versions inside, add a 180 × 180 apple-touch-icon.png and 192 and 512 px PNGs for a web app manifest, upload them to your site's root folder and link them from the <head>.

The Icon Converter makes all of these files and the link tags from one image.

The files a favicon needs

"Favicon" now means a small set of files, each read by a different part of the web:

File	Size	Who uses it
`favicon.ico`	16, 32 and 48 px in one file	Browser tabs and bookmarks, linked with `rel="icon"`
`apple-touch-icon.png`	180 × 180 px	iPhone and iPad home screens. iOS doesn't use `rel="icon"`
`icon-192.png`, `icon-512.png`	192 × 192 and 512 × 512 px	The web app manifest. Chromium needs at least these two sizes
`site.webmanifest`	Text file	Lists the manifest icons, linked with `rel="manifest"`

16, 32 and 48 px keeps the .ico small. The 180 px size is the iPhone example in Apple's own guide; the 192 and 512 px sizes are the minimum web.dev gives for Chromium.

How to make a favicon, step by step

Start square. Use a square image at least 512 × 512 px, so the largest file is made by scaling down. A logo mark or a single letter reads better at 16 px than a full wordmark.
Check it small. Look at it at 16 and 32 px, on a light and a dark tab. Thin lines and small text disappear first.
Make the files in the table above. In the Icon Converter, choose Favicon package, pick your image and download the zip.
Upload them to your site's root folder, next to your home page.
Paste the link tags below into the <head> of every page.
Open your site and check the icon in the tab, on a light and a dark theme.

The HTML to paste

These are the tags the Icon Converter's package writes, for files in the site root:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If you add several rel="icon" links, the browser uses their media, type and sizes attributes to pick the most suitable one. Use rel="icon" on its own: MDN says the old shortcut icon form is non-conforming and must not be used any more.

.ico vs PNG for a favicon

Feature	.ico	PNG
Sizes per file	Several (16, 32, 48 and more) in one file	One size per file
Transparency	Yes, in 32-bit images (alpha included)	Yes
Browser tab	`rel="icon"`	`rel="icon"` with `type="image/png"` and `sizes`
iPhone home screen	Not used	`apple-touch-icon.png`
Web app manifest	Not used	192 and 512 px PNGs
Google Search	Supported	Supported

You don't have to choose. The usual setup is an .ico for tabs plus PNGs for phones and the manifest, which is what the package above contains.

Adding an SVG favicon

An SVG can be an extra icon, not a replacement. The HTML standard's sizes="any" keyword marks a scalable icon "as provided by an SVG image", and when several icons are linked the browser picks by type, media and sizes, moving to the next one if a format isn't supported:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">

Keep the .ico or a PNG linked as well: Google Search's list of supported favicon formats doesn't include SVG.

Getting your favicon into Google Search

Google's favicon guidelines ask for:

a square image, at least 8 × 8 px; Google recommends larger than 48 × 48 px;
a supported format: BMP, GIF, ICO, PNG, JPEG, PPM or TIFF;
a <link> tag in your home page's header, with rel set to icon, shortcut icon, apple-touch-icon or apple-touch-icon-precomposed;
a favicon URL that Googlebot-Image can crawl, and a home page Googlebot can crawl. Don't block either in robots.txt.

A 48 px favicon.ico meets the 8 × 8 minimum. The 180 px apple-touch-icon is linked with a rel value Google accepts, so it also offers Google an icon larger than 48 × 48.

Windows app icons are different

An .ico for a Windows program, shortcut or folder needs bigger sizes than a favicon. Microsoft says apps should include, at the bare minimum, 16, 24, 32, 48 and 256 px. Windows looks for an exact size and otherwise scales a larger one down, so the 256 px image means it never has to scale up. The Icon Converter's Windows preset makes exactly that set.

Do it with the free Icon Converter

Open the Icon Converter and drop in a PNG, JPG, WebP, SVG or GIF.
Choose Favicon package for a website, or .ico file with the Favicon (16, 32, 48) or Windows preset.
Download, upload the files to your site's root and paste the tags from favicon-tags.html.

The conversion happens in your browser; your image isn't uploaded. It can also pull the PNGs back out of an existing .ico.

Open the Icon Converter

FAQ

What size should a favicon be?

Put 16, 32 and 48 px in favicon.ico, and add a 180 × 180 apple-touch-icon plus 192 and 512 px manifest icons. Google Search needs a square of at least 8 × 8 px and recommends larger than 48 × 48 px.

Should a favicon be .ico or PNG?

Both, for different jobs. favicon.ico holds several sizes for browser tabs in one file; PNGs are what iPhones use for home-screen icons and what the web app manifest lists. Google Search accepts either.

How can I turn an image into a favicon?

Crop it to a square, scale it down to 16, 32 and 48 px and save those in one favicon.ico, then add the 180 px and 192 and 512 px PNGs. The Icon Converter does all of it from one PNG, JPG, WebP, SVG or GIF; from a GIF it uses the first frame.

How can I generate a free favicon?

Use the Icon Converter: choose Favicon package, pick your image and download the zip. It's free, needs no account, and makes the files in your browser without uploading the image.

Should I use PNG or SVG for a favicon?

Use .ico or PNG as the main favicon, and add an SVG on top if you want one. Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as favicon formats, not SVG, and iPhones and web app manifests use the PNGs. An SVG can be linked as an extra rel="icon" with sizes="any".

Can I use a GIF as a favicon?

Yes: GIF is on Google Search's list of supported favicon formats, and the HTML standard doesn't limit icons to particular formats. The standard doesn't say whether browsers must play an animated one, so don't rely on the animation. The Icon Converter turns a GIF's first frame into an .ico or PNGs.

Where do I put favicon.ico?

In your site's root folder, next to the home page, and link it from the <head> with <link rel="icon" href="/favicon.ico">.

Why isn't my favicon showing in Google?

Check that it's square, linked from your home page's header with a supported rel value, in a supported format, and that robots.txt doesn't block Googlebot-Image from the icon or Googlebot from the home page.

Do I still need "shortcut icon"?

No. Use rel="icon". MDN says shortcut is non-conforming and must not be used any more.

Sources

Each page below was read on 27 October 2026.

MDN, HTML attribute: rel. rel="icon"; browsers choose among icons by media, type and sizes; "shortcut" is non-conforming and must not be used; iOS uses apple-touch-icon. Last modified 7 October 2026.
Google Search Central, Define a favicon to show in search results. Square, at least 8 × 8 px, larger than 48 × 48 px recommended; supported formats; Googlebot-Image must be able to crawl it. Last updated 28 August 2026.
WHATWG, HTML Living Standard, §4.6.8.9 Link type "icon". sizes="any" for a scalable icon such as SVG; the browser selects by type, media and sizes and falls back if a format is unsupported; no particular format is required.
web.dev, Add a web app manifest. Chromium needs at least a 192 × 192 and a 512 × 512 icon; .webmanifest extension; link rel="manifest". Last updated 18 September 2024.
Apple, Configuring Web Applications (Safari Web Content Guide). apple-touch-icon link, the 180 × 180 iPhone example, and the apple-touch-icon.png fallback in the site root. An archived page, last updated 12 December 2016.
Microsoft Learn, Icons (Design basics), Win32 apps. One .ico file holds multiple image sizes and colour depths, with 32-bit images including alpha. Written for Windows 7 and marked as not updated since.
Microsoft Learn, Construct your Windows app's icon. Windows app icons: at the bare minimum 16, 24, 32, 48 and 256 px; Windows picks an exact match or scales a larger one down.