<meta name="application-title">, which allows developers to control the text that appears in the title bar of their installed applications.
When developing a web application, giving your users a good experience is important. Across the various parts of your application’s user interface, there will be many opportunities to fine-tune the experience and make it feel more polished. For installed web applications though, one of these opportunities lies in the title bar.
The title bar of an app is usually represented as a horizontal bar that sits at the top of the window, and which contains the name of the application and the window control buttons. Sometimes, depending on the application, the title bar can also include contextual information, such as the name of an opened document for example.
On the web platform, several options are available to you to control the information that’s included in the title bar. In fact, in a previous post, we had covered how you can even hide the entire title bar and create your own custom UI by using the Window Controls Overlay API. But, if you choose to retain the default title bar, that UI element displays the text that comes from the page’s <title> HTML element, which can sometimes be a problem.
Indeed, the same <title> HTML element is what controls the text that’s displayed in a browser tab, when your app is not installed. Developers generally use the <title> HTML element to put various pieces of contextual information about the state of their app. This can be, for instance, the number of unread messages, the name of the open document, or any other information about the state of the app. In addition, it’s common for developers to add the name of their app in the <title>.
As an example, a TODO list application called TODO app might define an HTML title like:
My personal list – 4 tasks to do – 2 tasks done | TODO app
When that same TODO list app is installed, it gets its own app window, and therefore, its own title bar. On Windows, the title bar of an installed web application always starts with the name of the app, taken from the manifest file, followed by a dash, and then followed by the contents of the HTML <title> element.
Taking the previous example again, once the app is installed, the following title bar content would appear:
TODO app – My personal list – 4 tasks to do – 2 tasks done | TODO app
The repetition of the app’s name is problematic here. Additionally, a browser tab and an installed application title bar are different UIs that serve different purposes, and we know that developers usually want to display different text content for when their app is displayed in a browser tab vs. when it’s installed.
This is why we implemented <meta name="application-title">, a new HTML meta tag which lets you control your installed application title bar content.
Taking the TODO list application example one more time, setting the title bar content to “TODO app – My personal list” can be achieved with this HTML code: <meta name='application-title' content='My personal list'>.
With the new application-title meta tag, you can now progressively enhance your web app’s UX by displaying the appropriate text content whether it’s installed as a standalone app or running in a tab, all without having to use JavaScript to dynamically change the app’s name.
This functionality is available in Microsoft Edge starting with version 134 (and in other Chromium-based browsers). To learn more, see application-title on MDN and visit our sample application with a supporting browser (source code).
If you have any feedback, please share it with our team by going to Settings and more (…) > Help and feedback > Send feedback in Edge.
