How to configure Web Manifest

December 27, 2024
|
15 min

In today’s fast-evolving web landscape, delivering a seamless, app-like experience to users is more important than ever. Enter the Web Manifest — a simple yet powerful JSON file that lets you control how your website appears and behaves when installed on a user’s device. If you’re building Progressive Web Apps (PWAs) or just want to improve your site's mobile experience, understanding the Web Manifest is essential.

What Is a Web Manifest?

A Web Manifest (or Manifest.json) is a JSON file that provides metadata about your web application. This file tells the browser important details like the app’s name, icons, theme colors, how it should launch, and more.

By linking this manifest to your site, you enable users to “install” your website on their home screen or app launcher, giving your site the look and feel of a native app without the need for app store downloads.

Why Is the Web Manifest Important?

  • App-like experience: Customize the splash screen, icon, and theme colors to match your brand.

  • Installability: Browsers use the manifest to allow users to add your web app to their home screens.

  • Better engagement: Installed web apps load faster and can work offline (when paired with service workers).

  • Cross-platform support: Works on Android, iOS (with some limitations), Windows, and more.

Key Fields in a Web Manifest

Here are some of the most common fields you’ll see in a manifest file:

  • name: The full name of your app.

  • short_name: A shorter name for display on the home screen.

  • icons: An array of icon objects with different sizes to ensure crisp display on various devices.

  • start_url: The URL that loads when the app is launched.

  • display: Controls the display mode, e.g., standalone (app-like without browser UI), fullscreen, minimal-ui, or browser.

  • background_color: The background color for the splash screen.

  • theme_color: The color of the browser toolbar or the task switcher.

  • orientation: Locks the app orientation (portrait or landscape).

{
    "name": "My Cool Web App",
    "short_name": "CoolApp",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#317EFB",
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

How to Add a Web Manifest to Your Site

  1. Create the JSON manifest file (e.g., manifest.json).
  2. Host it on your server.
  3. Link it inside the section of your HTML:
<link rel="manifest" href="/manifest.json" />

Browser Support and Limitations

Modern browsers like Chrome, Edge, and Firefox fully support the Web Manifest standard. Safari on iOS supports it partially but has some quirks, especially around icons and display modes.

Final Thoughts

The Web Manifest is a foundational step towards creating Progressive Web Apps that users can easily install and engage with like native apps. By defining your manifest properly, you boost your web app’s discoverability, user engagement, and overall user experience.

If you’re ready to make your web app shine on users’ devices, start with the Web Manifest — it’s lightweight, easy to implement, and unlocks powerful features that users love.

Example of Web Manifests

How to Add a Web Manifest to Your Site

You can reach my Web Manifest by the next URL: https://bazyvoliakmaksym.site/meta/manifest.json

{
    "name": "Maksym Bazyvoliak | Blog",
    "short_name": "Maksym Bazyvoliak",
    "id": "/",
    "start_url": "/",
    "author": "Maksym Bazyvoliak",
    "developer": {
        "name": "Maksym Bazyvoliak"
    },
    "version": "1.0.0",
    "version_name": "1.0 web",
    "manifest_version": 3,
    "default_locale": "en",
    "theme_color": "#222831",
    "display": "standalone",
    "display_override": ["window-control-overlay", "standalone"],
    "background_color": "#222831",
    "description": "Hello, I'm Maksym, skilled web developer experienced in developing and maintaining eCommerce platforms; creating scalable, optimized and secure solutions.",
    "icons": [
        {
            "src": "/meta/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/meta/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "shortcuts": [
        {
            "name": "Home Page | Blog List",
            "short_name": "Home | Blogs",
            "description": "Blog List page.",
            "url": "/",
            "icons": [
                {
                    "src": "/meta/icons/icon-96x96.png",
                    "sizes": "96x96",
                    "type": "image/png"
                }
            ]
        }
    ],
    "screenshots": [
        {
            "src": "/meta/screenshots/pc.png",
            "sizes": "1899x783",
            "type": "image/png",
            "form_factor": "wide",
            "label": "Application"
        },
        {
            "src": "/meta/screenshots/mobile.png",
            "sizes": "318x726",
            "type": "image/png",
            "form_factor": "narrow",
            "label": "Application"
        }
    ]
}