ICO vs PNG vs SVG, what is the difference?

**ICO** is an old Windows format that **packs multiple sizes into a single file** (16, 32, 48 px). Works everywhere but it is bulky and inflexible. **PNG** is today's standard: **transparency yes, animation no**, one file per size. **SVG** is **vector**: a single file for every size, sharp on every screen, but **Safari** only started accepting it in 2022, so you still want a PNG fallback. Recommendation for 2026: **SVG + a 32x32 PNG + a 180 apple-touch-icon + 192/512 manifest icons**.

Why do I need so many different sizes?

Because **every place in the OS uses a different one**. **16x16 and 32x32** are the classic browser-tab favicon (32 covers Retina). **48x48** is what Windows uses when a site is pinned to the taskbar. **180x180** is the [[apple-touch-icon||the icon shown when an iPhone user adds your site to their home screen, usually 180x180 pixels]] for iPhone. **192x192** is the PWA icon on Android Chrome. **512x512** is the **PWA splash screen** (shown while the app boots full-screen). One file for everything? Works, but the browser will scale it on the fly and it will look fuzzy.

How is the apple-touch-icon special?

The [[apple-touch-icon||the icon shown when an iPhone user adds your site to their home screen, usually 180x180 pixels]] is a **dedicated iOS icon** Safari uses when a user taps "Add to Home Screen". 180x180 pixels, always **PNG**, ideally **without transparency** (iOS rounds the corners for you anyway). A plain ` ` is **not enough** for iOS, because Safari ignores it on the home screen. If you skip `apple-touch-icon`, iOS will generate one from a **screenshot of your page** - usually a disaster.

What is the PWA manifest and what icons live in there?

The [[PWA manifest||a small JSON file that describes the site as an app, used by "Add to Home Screen"]] is a file called **manifest.webmanifest** (or **manifest.json**) that tells the browser: "this site is an app, it is called Such-and-Such, it has these colours, these icons". Inside is an `icons` array with `src`, `sizes`, `type` and `purpose` fields. **Android Chrome** uses these icons **instead of** the regular favicon when a user adds the PWA to their home screen. Key sizes: **192x192** (icon) and **512x512** (splash screen). The `purpose: "maskable"` value marks an icon that Android can crop to a circle or square without losing the artwork.

What about a dark-mode favicon?

Since 2022 Safari (and more recently Chrome) support **mode-aware favicons**. You declare two files: ` ` and a second one with `media="(prefers-color-scheme: dark)"`. The browser picks the right one. Useful when your logo is solid black and the user has a light tab on a dark theme - the favicon would disappear into the tab. Our fetcher surfaces the `media` attribute in each icon's detail panel when a site uses this trick.

Which browser uses which size?

**Chrome desktop**: 16, 32 from ` `. **Firefox**: 32, 48. **Safari macOS**: SVG or 32 PNG, plus `mask-icon` for pinned tabs. **Safari iOS**: `apple-touch-icon` 180. **Edge Windows**: 32, plus 70/150/310 for pinned tiles (rarely used now). **Android Chrome**: 192/512 from the PWA manifest. **Google Search**: at least 48x48, a multiple of 48 (96, 144, 192). One file does not cover everything, which is why every favicon generator ships **8-10 files** in a single ZIP.

How does theme-color fit in?

` ` is the **companion** to your favicon set. On Android it paints the status bar this colour when the site is open as a PWA. **Discord** uses it as the vertical accent strip on link embeds. **Safari iOS 15+** paints the address bar that colour. Sites often declare a separate `theme-color` for dark mode (` `). It is **not a favicon**, but together with the favicon pack it creates a consistent visual identity, so it is worth getting both right at the same time.

Do you log the URLs I check?

**No. We do not log URLs, do not store page contents, do not run analytics on the API requests.** Your URL hits our server, it fetches the **public** page (the same one every social-media bot or Google crawler gets), parses the favicon tags, and sends back the result. Everything lives in serverless memory for a few seconds. Rate limit: **30 requests per hour** per IP, to avoid abuse.

Why does the fetch run on the server and not in my browser?

Because the browser **cannot** download the HTML of an arbitrary cross-origin site - CORS policy blocks it (`No 'Access-Control-Allow-Origin' header`). Servers have no such restriction. On top of that, many CDNs (Cloudflare, Akamai) **block image hotlinking**, so even when you have the favicon URL, a plain ` ` may return 403. That is why we load thumbnails through our **image proxy**, which sends the right Referer header and a Chrome User-Agent.

YourDevToolsPro

Favicon Pack Fetcher

Type a URL, get every favicon, apple-touch-icon and PWA manifest icon with live thumbnails and one-click ZIP download.

LiveRuns in your browser

Paste a URL. We will fetch the page from our server, parse every favicon link tag, read the PWA manifest, probe each file for size and type, and show you the full pack with previews. Download individual icons or grab everything as a ZIP.

Why would I download someone else's favicons?

Paste a URL, click "Fetch". We load the page on our server, parse every favicon tag in the HTML (`<link rel="icon">`, `<link rel="apple-touch-icon">`), open the PWA manifest file if the site has one, and return the complete list of icons with live thumbnails.

You get a visual preview of every icon, a "Copy URL" button, a "Download" button per file, and "Download all as ZIP" for the whole pack at once.

Great for audits, visual inspiration, competitor research, or when you need to recover your own favicon after a backup goes missing.

How to use it

Type a URL (e.g. `github.com` or `https://vercel.com`). You can skip `https://` - we add it for you.
Click "Fetch favicons" or press Enter. The server has 8 seconds to load the page, usually it takes 1-3.
You will see a grid of thumbnails. Each tile shows the icon preview, its type (`icon`, `apple-touch-icon`, `manifest-icon`), declared sizes, and file weight.
Click "Copy URL" to copy the address of a single icon, or "Download" to save it to disk.
Need everything at once? Click "Download all as ZIP" to pack the whole set into a single archive with a `manifest.txt` mapping filenames back to their source URLs.

When this is useful

Six typical situations where this fetcher saves you half an hour:

Competitor favicon audit. Drop in a competitor's URL, hit fetch, and you instantly see their full icon set (do they ship an `apple-touch-icon`, is their PWA manifest wired up, do they have a dark-mode variant).
Visual inspiration. Pull favicons from 20 sites in your niche, drop them into a Figma grid, and you have an instant moodboard before you start designing your own.
Recover your own favicon. You shipped a site two years ago, lost the source files, but the site is still live. Pull the favicon, regenerate the full pack in the Favicon Generator, and you have a complete set again.
Verify the apple-touch-icon is in place. A client complains their site icon looks odd on iPhone - in 5 seconds you see the page has no `apple-touch-icon.png` at all, so iOS is autogenerating one from a screenshot.
Domain migration check. After moving from `old-domain.com` to `new-domain.com` you want to confirm every favicon survived. Pull both packs, compare side by side.
Client SEO audit. You write a report, drop in a screenshot of the icon list, highlight the gaps (no SVG, no manifest, no 512x512 for the PWA manifest splash screen).

Related tools: Favicon Generator (build a fresh pack from one source image), ICO Converter (PNG to .ico), ICNS Converter (macOS icon set), OpenGraph Preview (see how your link looks on social media).

Questions and answers

A favicon is the tiny icon shown next to a page title in your browser tab, in your bookmarks bar, in Google search results (to the left of the snippet title), in Safari's address bar, and on the home screen of your phone when someone adds your site as a shortcut. It is the first thing people visually recognise among 20 open tabs, and Google has used it in mobile search results since 2019.

Related tools

Favicon generator (full pack)

Upload one image, get a complete favicon pack: 16, 32, 48, 64, 180, 192, 512 px plus a PWA manifest and ready HTML tags to paste in head.

PNG to ICO converter (Windows)

Upload a PNG, get a multi-resolution .ico file (16, 32, 48, 64, 128, 256 px) in a single bundle. Perfect for Windows icons and enterprise-grade favicons.

PNG to ICNS converter (macOS)

Upload a PNG, get an .icns file for macOS apps with every size: 16, 32, 64, 128, 256, 512, 1024 px (including Retina @2x variants).

OpenGraph / Twitter Card Preview

How will your link look on Facebook, X, LinkedIn, Slack, Discord and iMessage? Paste a URL, get 5 side-by-side previews plus a list of problems.

Images converter

Images converter online - dozens of formats, preserves quality, wiped from the server after a few minutes.

Favicon Pack Fetcher

Type a URL, get every favicon, apple-touch-icon and PWA manifest icon with live thumbnails and one-click ZIP download.

LiveRuns in your browser

Favicon Pack Fetcher

Why would I download someone else's favicons?

You get a visual preview of every icon, a "Copy URL" button, a "Download" button per file, and "Download all as ZIP" for the whole pack at once.

Great for audits, visual inspiration, competitor research, or when you need to recover your own favicon after a backup goes missing.

How to use it

Type a URL (e.g. `github.com` or `https://vercel.com`). You can skip `https://` - we add it for you.
Click "Fetch favicons" or press Enter. The server has 8 seconds to load the page, usually it takes 1-3.
You will see a grid of thumbnails. Each tile shows the icon preview, its type (`icon`, `apple-touch-icon`, `manifest-icon`), declared sizes, and file weight.
Click "Copy URL" to copy the address of a single icon, or "Download" to save it to disk.
Need everything at once? Click "Download all as ZIP" to pack the whole set into a single archive with a `manifest.txt` mapping filenames back to their source URLs.

When this is useful

Six typical situations where this fetcher saves you half an hour:

Competitor favicon audit. Drop in a competitor's URL, hit fetch, and you instantly see their full icon set (do they ship an `apple-touch-icon`, is their PWA manifest wired up, do they have a dark-mode variant).
Visual inspiration. Pull favicons from 20 sites in your niche, drop them into a Figma grid, and you have an instant moodboard before you start designing your own.
Recover your own favicon. You shipped a site two years ago, lost the source files, but the site is still live. Pull the favicon, regenerate the full pack in the Favicon Generator, and you have a complete set again.
Verify the apple-touch-icon is in place. A client complains their site icon looks odd on iPhone - in 5 seconds you see the page has no `apple-touch-icon.png` at all, so iOS is autogenerating one from a screenshot.
Domain migration check. After moving from `old-domain.com` to `new-domain.com` you want to confirm every favicon survived. Pull both packs, compare side by side.
Client SEO audit. You write a report, drop in a screenshot of the icon list, highlight the gaps (no SVG, no manifest, no 512x512 for the PWA manifest splash screen).

Related tools: Favicon Generator (build a fresh pack from one source image), ICO Converter (PNG to .ico), ICNS Converter (macOS icon set), OpenGraph Preview (see how your link looks on social media).