What size should a favicon be?

Start from a square source at least 512×512 so every output size is sharp. The pack itself includes 16, 32 and 48 for the .ico, 180 for Apple touch, and 192 plus 512 for PWA / Android icons.

Do I still need a favicon.ico in 2026?

Yes as a fallback. Modern browsers prefer PNG (and SVG when you have one), but many clients and older setups still request /favicon.ico from the site root automatically. Ship both.

Where do I put the favicon files?

At the site root — next to robots.txt and sitemap.xml — then paste the snippet so browsers know which file to use for tabs, home screens and the web manifest.

Is my logo uploaded when I generate a favicon?

Not with Alvseike. Favicon Generator renders every size on your device, so an unreleased mark never leaves the browser. Upload-based generators send the file to their servers first.

How to Create a Favicon for Your Website (ICO, PNG & Apple Touch)

A favicon is the small icon in the browser tab, bookmarks bar, search results and (on phones) the home-screen shortcut. In 2026 one PNG is not enough — you need a multi-size .ico, several PNG sizes, an Apple touch icon, and a short web manifest. This guide walks through generating the full pack locally with Favicon Generator, then wiring it into your site.

What a complete favicon set actually includes

Browsers and platforms ask for different files. A modern pack covers all of them from one square source image:

File	Size	Used for
`favicon.ico`	16, 32 and 48 in one file	Legacy browsers, Windows shortcuts, anything that still probes `/favicon.ico`
`favicon-32x32.png`	32×32	Sharp desktop tabs on modern browsers
`favicon-180x180.png`	180×180	iOS home-screen ("Add to Home Screen")
`favicon-192x192.png` / `favicon-512x512.png`	192 / 512	Android Chrome and PWA install icons
`site.webmanifest`	—	Points Android / PWA at the 192 and 512 icons

You do not need twenty legacy Windows-tile sizes. Four PNGs, one real multi-size .ico, a tiny manifest and four lines in <head> cover every mainstream browser in 2026. For the format trade-off itself, see .ico vs .png favicon.

Prepare the source image

The generator center-crops to a square at every size, so start with something that already reads as a mark:

Square, high-contrast mark — a logo symbol, not a full wordmark. Fine text and thin lines disappear at 16×16, which is the size people see in a tab.
Transparent PNG when you can — transparency is preserved through the PNGs and the .ico, so the icon sits cleanly on both light and dark browser chrome instead of carrying a white box.
At least 512×512 — the PWA icon is 512 pixels; upsizing a small source makes it soft.
No baked-in rounded corners — iOS applies its own mask. Pre-rounding leaves awkward edges on Android and desktop.

If the logo is not square yet, crop it first with Smart Cropper. If the PNG is heavy, run it through Image Compressor before packaging — smaller icons load with the first paint.

Step-by-step: build the pack in Favicon Generator

Open Favicon Generator — the drop zone notes that processing is local; the file never leaves your device.
Drop your square image — PNG, JPG or WebP all work. You will see a live preview at 16, 32, 48, 180, 192 and 512 so you can check the crop before exporting.
Download the favicon pack (.zip) — one export gives you every PNG size, a real multi-size favicon.ico (16/32/48), site.webmanifest, and a head-snippet.html ready to paste. Prefer this over the .ico-only button unless you already have the PNGs elsewhere.
Copy the <head> snippet — the tool shows the same four lines inline; use Copy so you do not retype them.

The snippet looks like this (paths assume the files live at the site root):

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

sizes="any" on the .ico link is deliberate: modern browsers treat it as a fallback and prefer the PNG, while older clients still find the classic file.

Install the files on your site

Unzip favicons.zip into your site root (or public/ / static/, depending on the framework) so /favicon.ico resolves without a redirect.
Paste the four <link> tags into the document <head> of every page — layout component, theme header.php, or your static HTML shell.
Confirm site.webmanifest is served with a JSON content type. Most static hosts do this automatically; if Android icons never appear, check the response headers first.
Hard-refresh or open an incognito window. Favicons are aggressively cached — append ?v=2 to the hrefs if an old icon sticks after a redesign.

Framework notes:

Next.js (App Router) — files in app/ are auto-discovered; you can still keep the explicit <link> tags for the Apple touch icon and manifest.
Vite / plain static — drop the files next to index.html and paste the snippet into your root layout.
WordPress — put the files in the theme or at the web root, and add the links via a header hook or an SEO plugin's "additional head HTML" field.

Why generate favicons in the browser

Most free favicon sites ask you to upload the logo first. That is fine for a public brand mark; it is a poor fit for an unreleased product, a client project under NDA, or anything you would rather not park on a third-party disk "for a while".

Favicon Generator renders every size with the Canvas API on your device, builds a real multi-size .ico locally, and zips the pack in-browser. There is no account wall on the export itself, no watermark on the icons, and no file-size cap beyond what your machine can hold. Free use is metered by daily exports (5 without an account, 15 with a free account); one zip is one export.

Common mistakes that break favicons

Only shipping a renamed PNG as favicon.ico — some browsers forgive it; others do not. Generate a real multi-size .ico.
Wordmark at 16×16 — letters turn into a blur. Use a simple mark, or accept that the tab icon will be unreadable.
Skipping Apple touch — iOS ignores the tab favicon for home-screen bookmarks. Without the 180×180 PNG you get a screenshot thumbnail instead of your brand.
Forgetting the root /favicon.ico — crawlers, feed readers and older tools request it whether or not your HTML mentions it.
Not cache-busting after a redesign — browsers keep the old icon for days. Bump a query string on the hrefs when you replace the files.
Low contrast on dark chrome — a dark mark on a transparent background disappears in dark-mode tabs. Check both themes before you ship.

After the favicon is live

If the same mark needs to appear in social previews, build those separately — favicons are too small for Open Graph. Use Social Graphics Maker for post and story canvases, or Social Pack Exporter when one design has to land in every platform size at once.

Final thoughts

A complete favicon set is four PNG sizes, one multi-size .ico, a tiny web manifest and four lines of HTML. Generate the pack once from a clean square mark, install it at the site root, and you are covered for desktop tabs, iOS home screens and Android / PWA installs — without uploading the logo to a favicon farm first.