Early Access
PWA
Tags used to create and configure a Progressive Web App.
Get Started
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="/manifest.json">
<meta name="application-name" content="MyApp">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="MyApp">
<meta name="msapplication-TileColor" content="#0078D7">
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#0000FF">
Explanation
viewport
Defines how a website is displayed on mobile devices, influencing its width, scale, and initial zoom level. It is essential for creating responsive designs that adapt to various screen sizes.
manifest
The manifest link tag is used to link a web application to a JSON manifest file. This file contains metadata about the web app such as its name, icons, and start URL. It is a key component in creating a Progressive Web App (PWA) that can be installed on a user’s device.
<link rel="manifest" href="/manifest.json">
theme-color
Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.
<meta name="theme-color" content="#0000FF">
application-name
Defines the name of the web application as it should be displayed when bookmarked or added to a mobile home screen.
<meta name="application-name" content="MyApp">
Specifies whether a web application runs in full-screen mode when added to the homescreen of an Apple device.
<meta name="apple-mobile-web-app-capable" content="yes">
Specifies the style of the status bar for a web application when added to the homescreen of an iOS device. This meta tag influences the appearance of the status bar to either match the web app design or maintain the default iOS style.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Provides a custom title for a web application when added to the home screen on Apple iOS devices. This title appears below the app icon, offering more control over branding and user interface.
<meta name="apple-mobile-web-app-title" content="MyApp">
Defines the background color for the Windows 8 and Windows 10 Start screen tile when the website is pinned. This color appears as the tile background, enhancing brand consistency and user recognition on Windows platforms.
<meta name="msapplication-TileColor" content="#0078D7">
Specifies the image to be used when the website is pinned to the Windows Start menu as a Live Tile. This tag is part of Microsoft's compatibility meta tags for enhancing user experience on Windows devices.
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
Specifies the path to the Microsoft application configuration file for a web page, enabling customization of certain features for browsers and devices that support Microsoft configurations, such as pinned sites in Windows.
<meta name="msapplication-config" content="/browserconfig.xml">
theme-color
Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.
<meta name="theme-color" content="#0000FF">
HTML Tag Collections
Ready to use <head> code samples to get started, and finished quickly.
Community