Web Icon Specifications Guide

Web Icon Specifications

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.

Generated Sizes and Formats

Each file in the generated package serves a specific purpose, representing only the essential modern web standards:

• favicon.ico (Multi-resolution Container): Housing 16x16, 32x32, and 48x48 pixel frames inside a single container file. This acts as the standard desktop browser tab icon and fallback, referenced in your HTML head code.
• apple-touch-icon.png (180x180 pixels): The standard high-resolution icon used by iOS devices when adding the web application to the home screen.
• icon-192.png and icon-512.png (PNG): Standard launcher and splash screen icons referenced inside the PWA manifest.json.
• icon-192-maskable.png and icon-512-maskable.png (PNG): Maskable variants with a safe-zone padding to fit adaptive device launcher shapes.
• icon.svg and icon-maskable.svg (SVG): Optimised vector alternatives (included if you upload an SVG source) for modern browsers that support resolution-independent scaling.

The Role of favicon.ico

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:

1. It acts as a legacy fallback for older browsers.
2. Placing a 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.

Maskable Icons

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.

Legacy Configurations to Avoid

Older tutorials often recommend declaring multiple obsolete link tags. You can safely omit the following to keep your HTML clean and fast:

• msapplication-TileImage & msapplication-TileColor: Legacy declarations for Windows 8 tile customisation. Modern Windows versions use standard web manifest icons.
• browserconfig.xml: Used by Internet Explorer 11 for pinning websites to the Start menu. Obsolete.
• Separate Apple Touch Icons for every iOS device: In the past, developers declared icons for 57x57, 72x72, 114x114, etc. Today, iOS successfully downscales the single high-resolution 180x180 icon.

SVG Favicons (Light & Dark Modes)

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.

Implementing Light and Dark Modes

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.

Interactive SVG Validator & Previewer

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.

PWA Manifest Specifications

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.

Favicon Party Defaults

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:

• display: Defaults to standalone. This runs the PWA in a focused window without standard browser toolbar chrome, giving it a native-app appearance.
• scope: Defaults to /, restricting the application space to the root of your web domain.
• id: Defaults to the resolved start_url (e.g. /). This serves as the unique identifier for the web application, preventing browser installation conflicts.
• orientation: Defaults to any, enabling screen rotation support on mobile devices.
• background_color: Configured to match your selected Theme colour, providing a seamless launch experience on Android splash screens.

Configurable Properties

You can customise these properties in the icon form and see them reflect immediately in the manifest code view:

• Name: The full name of the web application. It is shown to the user on application splash screens, installer prompts, and in list search results.
  Docs
• Short name: A shorter version of the app's name. It is displayed on the device home screen next to the launcher icon where space is limited.
  Docs
• Description: A summary statement explaining the web application's target audience or utility.
  Docs
• Start URL: The specific landing page path the browser opens when the user launches the installed PWA from their home screen. For example, using /index.html, or /?utm_source=pwa to track launcher traffic in analytics.
  Docs
• Theme colour: A hexadecimal value defining the colour of the mobile device OS UI or the browser chrome navigation bar when running the PWA.
  Docs
• Screenshots: Previews shown in app store listings and mobile browser PWA installation overlays. Favicon Party accepts wide (desktop) and narrow (mobile) screenshots, optimizing and outputting them in WebP format.
  Docs
• PWA Installer Popup: Enables or disables the browser's automatic installation promotion. When allowed, modern browsers will display their default mini-infobar or inline prompts.
  Docs

Advanced Parameters (Manual Customisation)

You can add several advanced manifest fields manually before deploying the generated manifest.json to your server. Some popular additions include:

• display_override: An array of preferred display modes in order of priority (e.g. ["window-controls-overlay", "standalone"]). Useful for custom app window border layouts.
  Docs
• categories: An array of categories describing the type of your application (e.g., ["utilities", "productivity"]), which may be used by app store catalogues.
  Docs
• shortcuts: An array of quick links that users can access by right-clicking or long-pressing your app launcher icon (e.g., direct link to "New Message" or "Search").
  Docs
• orientation override: While we default to any, you can pin your application to portrait or landscape (e.g., "orientation": "portrait") if your PWA does not support layout rotation.
  Docs

Using Your Icon Pack Downloads

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.

ZIP Package Structure

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).
• Multiple PNG icons: apple-touch-icon.png (180x180), icon-192.png, icon-512.png, icon-192-maskable.png, and icon-512-maskable.png.
• PWA Screenshots: app-mobile.webp and app-desktop.webp (if you uploaded screenshots).

Step 1: Upload Files to Your Web Server

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:

1. Your project's assets folder (e.g., /assets/icons/ or /static/favicons/). Ensure this directory matches the Path to files you set in the configuration form.
2. The root directory of your website (e.g., /). If you place them in the root, make sure to set the Path to files in the form to empty or /.

Step 2: Add Link Tags to HTML Head

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>

Step 3: Place favicon.ico in the Web Root

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.

Step 4: Verify Deployment

After deploying your files and HTML head changes, you can verify everything is working correctly using your browser's developer tools:

• Favicon: Open your website in a new tab. Verify that the correct icon renders in the browser tab and that no 404 errors appear in the Console.
• PWA Manifest: In Chrome, open Developer Tools (F12), navigate to the Application panel, and select Manifest under the Application section on the left. The browser should display your application name, theme colours, and show the registered icon formats and screenshots.