Set Safari Tab Color Manually

Apple today released iOS 15/iPadOS 15 and will soon release complementary software for the Mac. One small change gives website owners the ability to choose the tab/menu color of the browser (Safari) when their site is being viewed.

By default (if there is no specification), Safari will use the background-color property if specified. However, you can easily override that by adding this to the <head></head> of your site.

<meta name="theme-color" content="#c84b53">

Or if you would prefer, you can specify different color for dark and light modes.

<meta name="theme-color" content="#c84b53" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#c84b53" media="(prefers-color-scheme: dark)">

This is a simple change that can give your site a significant amount of pop if used correctly.

Want more great content?

Enter your email address below to receive all posts in your inbox for free. I will never spam you or provide your email address to a third party. If you don’t love it, easily unsubscribe.