Google Noah Levin

iOS Google App Colored Headers

  • Save

One of my favorite parts of the new Google app for iOS is the colored headers we provide for web pages. We wanted to celebrate the unique brands of the sites you visit, and help blend the chrome in with the content to feel more like a native application.

All you have to do if you want your web site to be colored is add a theme-color meta tag. We're using the same spec we provided for android lollipop's recents view so you'll benefit from doing this on both platforms!

Now here's the fun behind-the-scenes part. Because we realized it would takes months for developers to adopt this, @Jeremy Goldberg and I went through and colored 562 top web sites by hand. While we considered automating this using something like the favicon, we found doing this manually had much better results and less conflicts with colors at top of the web page.

If you haven't already played with it, be sure to download the app and try out some popular web sites like cnn, amazon, kickstarter, yahoo, etc,.

keyboard shortcuts: L or F like