A modern website needs more than a single favicon.ico in the root folder. Browser tabs, bookmarks, iOS home screens, and PWA install prompts each look for a different file name and pixel size. The good news: you can generate the full favicon pack from one logo without opening a desktop design suite or uploading assets to a random converter.
What favicon files a modern site expects
Most web projects ship a small bundle of files to the site root (the same folder as your homepage or index.html):
| File | Typical use |
|---|---|
favicon.ico | Classic tab icon with 16, 32, and 48px layers |
favicon-16x16.png | Small tab and bookmark contexts |
favicon-32x32.png | Sharp tab icon on retina displays |
favicon-48x48.png | Windows site icon and some desktop shells |
apple-touch-icon.png | iOS and iPadOS home screen shortcut (180px) |
android-chrome-192x192.png | PWA manifest and Android install UI |
android-chrome-512x512.png | PWA splash screens and large install prompts |
site.webmanifest | Declares PWA icons, theme color, and display mode |
favicon.svg | Optional vector favicon when your source is SVG |
You also add a short HTML snippet to the <head> of your layout so browsers know which file to load.
What you need before you start
Prepare one master image that represents your site mark or logo:
- Format: PNG is ideal when you need transparency. JPG, WEBP, GIF, and SVG also work.
- Resolution: At least 512 by 512 pixels gives clean downscales for apple-touch and PWA icons.
- Composition: Square artwork is best. If the file is rectangular, keep the important content centered because most generators crop to a square before resizing.
Save the file with a clear name. The exported files use standard favicon filenames so you can drop them straight into a project root.
Step 1: Upload your logo
Open the Favicon Generator and drop your image into the upload area. The tool reads the file from your device. Processing runs locally in the browser, so your logo is not sent to a remote server.
You should see a preview thumbnail and your filename displayed below the file checklist.
Step 2: Choose which files to export
All common favicon files are selected by default. Uncheck any you do not need, or use Select all / Deselect all to toggle the full list. You must keep at least one file selected to generate exports.
If you upload an SVG, the tool also includes favicon.svg alongside the PNG and ICO outputs.
Step 3: Generate the favicon pack
Click Generate favicons. The tool center-crops non-square images to a square, then resizes to each selected dimension using high-quality canvas scaling.
When processing finishes, you will see a list of generated files with download buttons for each one, plus an HTML snippet you can copy into your site.
Step 4: Download individual files or a ZIP
You have two delivery options:
- Download next to each file for a single export
- Download All to export every generated file in one ZIP archive named
favicons.zip
The ZIP includes the HTML snippet as html-snippet.txt so you can paste it later without returning to the tool.
Step 5: Upload files to your site root
Place the generated files in your website root, next to your homepage or main layout file. Keep the standard filenames unchanged so the HTML snippet paths stay correct.
Example layout:
/public
favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
favicon.svg
Frameworks like Next.js, Astro, or static site generators often expose a public/ folder as the site root. Copy the files there.
Step 6: Paste the HTML snippet into your layout
Add the generated <link> tags to the <head> of your HTML or root layout component. A typical snippet looks like this:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
If you included favicon.svg, add a vector link as well:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Use Copy HTML in the tool, or open html-snippet.txt from the ZIP.
Step 7: Edit site.webmanifest for your brand
The generated site.webmanifest includes placeholder values for name, short_name, and colors. Update those fields to match your site or PWA:
{
"name": "My Product",
"short_name": "My Product",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0a0a0f",
"background_color": "#0a0a0f",
"display": "standalone"
}
Set theme_color and background_color to match your brand or page background.
Tips for readable small favicons
Favicons appear tiny in browser tabs. Artwork that looks great at 512px may lose detail at 16px.
- Simplify the mark: Remove fine text, thin strokes, and small inner shapes.
- Increase contrast: Light logos on dark tabs (and dark logos on light tabs) read better.
- Check the exports: Open
favicon-16x16.pngandfavicon-32x32.pngat actual size before you ship. - Center the logo: Non-square uploads are center-cropped. Keep the mark in the middle of the canvas.
If small sizes look muddy, simplify the artwork and regenerate.
When to use the App Icon Generator instead
The Favicon Generator focuses on website filenames and web manifest assets. If you also need app store icons at 1024px, 512px, and a full PNG ladder for iOS or Android submissions, use the App Icon Generator alongside this workflow.
For a file-by-file size breakdown, read Favicon Sizes and Files for Modern Websites. For app store icon dimensions, see App Icon Sizes for iOS, Android, and PWAs.
Why browser-based generation helps
Local processing keeps unreleased logos and client marks off third-party upload servers. That matters for NDAs, agency work, and pre-launch sites. You also skip account walls and software installs, which makes quick iterations cheap.
For more on privacy with in-browser tools, see Browser-Based File Conversion and Privacy.
Quick checklist
- Source logo is square or centered for crop
- Required favicon files are selected
- Files uploaded to site root with standard names
- HTML snippet pasted into layout
<head> -
site.webmanifestupdated with your app name and colors - 16px and 32px exports checked for legibility