Change Browser Tab Bar Color for Safari

Change Browser Tab Bar Color for Safari

Safari's latest browser version (Version 15) allows website owners to change the color of their website visitor's browser tab while viewing the website. You can change the color of your website visitors' browsers on Safari by adding a code snippet to your website's Footer.

Standard Browser Tab Bar Design Browser Tab Bar With Color Added
Screen_Shot_2021-09-27_at_5.45.56_PM.png Screen_Shot_2021-09-27_at_5.45.10_PM.png

 

To get started, log in to your SpaceCraft dashboard and navigate to the Content panel:

  1. On the right-hand side of the Content panel, under the section labeled Global Content, select Footer.
    Screen_Shot_2021-09-27_at_4.18.36_PM.png
  2. On the Footer page, click one of the green (+) buttons and select HTML. This will create a new HTML Block.
    Screen_Shot_2021-09-27_at_4.37.02_PM.png
  3. In the HTML Block, paste the code below:

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

  4. In the code that you pasted, highlight the content that is inside of the "quotation" marks (see screenshot below), and delete it.

Screen_Shot_2021-09-27_at_4.25.38_PM.png

      5. Find the "hex code" for the color that you want to appear on the browser tab. You can find the hex code here: HTML Color Codes

      6. Paste the new color hex code inside the "quotation" marks. Click Save on the HTML Block.
When you are finished editing the HTML Block, click the green Publish button. You will want to open your website in a Safari browser that runs Version 15 or higher to verify that you have added the code successfully.