Themed Omnibox

In order to give the user an experience more engaging, you should use the colors of your PWA in the browser's address bar as well.

PWA

Why set a theme color for the address bar?

In order to give the user an experience more engaging, you should use the colors of your PWA (Progressive Web App) in the browser's address bar as well (this function is supported in all browsers).

 

How the SeoChecker theme color audit is displayed

When a page does not use a theme to the address bar, SeoChecker will notify it.

themed omnibox

SeoChecker looks for a theme_color property in the Web App Manifest, as well as a theme-color meta tag in the HTML of the page.

 

How can I set a theme color for the address bar?

 

1. For every page you want to personalize, add a theme-color meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#ECF3FF"/>
  …
</head>
…

2. To the Web App Manifest, add the theme_color property:

{
  "theme_color": "#ECF3FF"
  …
}

Share this Guide

Did you like it? Share it!

Share this tool

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page