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.





    

    • Related Articles
      • 

    • Change the Text in a Browser Tab
      You have the ability to change the text that appears in your browser's tabs. By default, the tabs will display the page title along with your site title. Your site title is automatically appended to the end of your page title for every page on your ...
      • 

    • Change the Text in a Browser Tab
      You have the ability to change the text that appears in your browser's tabs. By default, the tabs will display the page title along with your site title. Your site title is automatically appended to the end of your page title for every page on your ...
      • 

    • Change Your jQuery Version
      Here is how you can change your site's jQuery version: 1. Select the Settings gear icon in the gray navigation bar. 2. Hover over Extras under the Settings header, and select Development. Note: Changing the version of the jQuery library included with ...
      • 

    • Update Title Tag, Description, and Keywords Per Page (Professional and Concierge Members)
      Our SEO tools let you add a Title Tag, Description and other settings without using any advanced coding. To add SEO metadata for each page, follow the steps below: 1. Select the Content tool in the gray navigation bar. 2. Click on the Page you want ...
      • 

    • Update Title Tag, Description, and Keywords Per Page (Premium and Basic Members)
      Our SEO tools let you add a Title Tag, Description and other settings without using any advanced coding. To add SEO metadata for each page, follow the steps below: 1. Select the Content tool in the gray navigation bar. 2. Click on the Page you want ...
      •