Scalable Vector Graphics (SVG) are the modern standard for web icons. Unlike static PNG images, a single SVG icon can scale infinitely without pixelation and adapt dynamically to the user's operating system colour scheme.
By embedding CSS media queries directly inside your SVG file, you can change the fill colours or paths depending on whether the user's system is in light or dark mode. This prevents dark logos from disappearing on dark browser tabs.
Here is a complete template for a theme-aware SVG favicon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
/* Default styling for light mode */
.icon-shape {
fill: #1a1a1a;
}
/* Styling overrides for dark mode */
@media (prefers-color-scheme: dark) {
.icon-shape {
fill: #f5f5f5;
}
}
</style>
<circle cx="50" cy="50" r="40" class="icon-shape" />
</svg>Read more about the Docs specification and browser support on MDN.
Use the utility below to test your own SVG file. Simply select or drag in an SVG file, and we will analyse its structure client-side (without uploading it to our server) to verify that it is ready for dark mode, and show you side-by-side previews.
Drag and drop your SVG here, or click to browse
Supports files up to 500 KB
This icon will look identical on both light and dark backgrounds. Consider adding standard light/dark media queries.
Modern web browsers and devices require a clean set of icon files to render your site correctly in tabs, bookmarks, and on mobile home screens. Favicon Party processes your uploaded artwork to generate a minimal, high-compatibility set of icon sizes.
Each file in the generated package serves a specific purpose, representing only the essential modern web standards:
manifest.json.
Historically, the .ico format was the only supported favicon format. Modern browsers fully support PNG and SVG. However, a multi-resolution favicon.ico (containing 16x16, 32x32, and 48x48 PNG frames) is still generated for two reasons:
favicon.ico file directly in your website's root directory prevents web servers from logging 404 errors when crawlers or legacy clients search for it automatically.On Android and other platforms, application icons are cropped into various shapes (circles, squircles, or rounded rectangles) depending on the user's system theme. A standard icon might get cropped awkwardly, cutting off important logo details.
A Maskable Icon provides a safe zone (the central 80% of the image) containing the logo, surrounded by a background colour. The operating system can safely mask this icon into any shape without clipping the artwork.
Read more about the Docs specification on MDN.
Older tutorials often recommend declaring multiple obsolete link tags. You can safely omit the following to keep your HTML clean and fast:
Scalable Vector Graphics (SVG) are the modern standard for web icons. Unlike static PNG images, a single SVG icon can scale infinitely without pixelation and adapt dynamically to the user's operating system colour scheme.
By embedding CSS media queries directly inside your SVG file, you can change the fill colours or paths depending on whether the user's system is in light or dark mode. This prevents dark logos from disappearing on dark browser tabs.
Here is a complete template for a theme-aware SVG favicon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
/* Default styling for light mode */
.icon-shape {
fill: #1a1a1a;
}
/* Styling overrides for dark mode */
@media (prefers-color-scheme: dark) {
.icon-shape {
fill: #f5f5f5;
}
}
</style>
<circle cx="50" cy="50" r="40" class="icon-shape" />
</svg>Read more about the Docs specification and browser support on MDN.
Use the utility below to test your own SVG file. Simply select or drag in an SVG file, and we will analyse its structure client-side (without uploading it to our server) to verify that it is ready for dark mode, and show you side-by-side previews.
Drag and drop your SVG here, or click to browse
Supports files up to 500 KB
This icon will look identical on both light and dark backgrounds. Consider adding standard light/dark media queries.
A Web App Manifest (usually named manifest.json) is a simple JSON file that tells the browser about your progressive web application (PWA) and how it should behave when installed on the user's desktop or mobile device.
When you generate a pack using Favicon Party, the exported manifest.json is pre-populated with several highly recommended defaults to save you configuration time:
standalone. This runs the PWA in a focused window without standard browser toolbar chrome, giving it a native-app appearance./, restricting the application space to the root of your web domain.start_url (e.g. /). This serves as the unique identifier for the web application, preventing browser installation conflicts.any, enabling screen rotation support on mobile devices.You can customise these properties in the icon form and see them reflect immediately in the manifest code view:
/index.html, or /?utm_source=pwa to track launcher traffic in analytics.
You can add several advanced manifest fields manually before deploying the generated manifest.json to your server. Some popular additions include:
["window-controls-overlay", "standalone"]). Useful for custom app window border layouts.
["utilities", "productivity"]), which may be used by app store catalogues.
any, you can pin your application to portrait or landscape (e.g., "orientation": "portrait") if your PWA does not support layout rotation.
Once you design and compile your icons, you can download them as a single ZIP archive. This guide walks you through extracting, deploying, and integrating the icons into your website or progressive web application.
Your downloaded package contains the following structure:
head.html: A reference HTML snippet containing the exact tags you need to copy into your site's templates.manifest.json: The Web App Manifest defining application name, theme colours, and pointing to your generated icons.favicon.ico: A legacy multi-resolution favicon fallback (containing 16x16, 32x32, and 48x48 pixel frames).icon.svg and icon-maskable.svg: Vector graphics outputs (if you uploaded an SVG source).apple-touch-icon.png (180x180), icon-192.png, icon-512.png, icon-192-maskable.png, and icon-512-maskable.png.app-mobile.webp and app-desktop.webp (if you uploaded screenshots).Extract the ZIP archive and upload all the files to a directory on your web server. It is common practice to upload them to either:
/assets/icons/ or /static/favicons/). Ensure this directory matches the Path to files you set in the configuration form./). If you place them in the root, make sure to set the Path to files in the form to empty or /.Open head.html inside your editor. Copy all the listed tags and paste them directly into the <head> section of your website's main HTML layout or template file. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- Paste the contents of head.html here -->
<link rel="icon" href="/assets/icons/favicon.ico" sizes="32x32">
<link rel="icon" href="/assets/icons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
<link rel="manifest" href="/assets/icons/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="My App">
<meta name="application-name" content="My App">
<meta name="theme-color" content="#0092b8">
</head>
<body>
...
</body>
</html>Even if you configure the HTML tags to point to a subfolder like /assets/icons/favicon.ico, some legacy browsers, command-line tools, and search engine crawlers will automatically request /favicon.ico from the root of your domain.
To prevent your server logs from filling up with 404 "Not Found" errors, it is highly recommended to upload a duplicate copy of favicon.ico directly to your server's root folder (e.g. https://yourdomain.com/favicon.ico) regardless of where your main icon set is located.
After deploying your files and HTML head changes, you can verify everything is working correctly using your browser's developer tools: