Change Browser Tab Bar Color in Safari

Change Browser Tab Bar Color in 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 liveBooks 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: 
  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
      • 

    • Using the SEO Settings in Content
      In this article, we will show you the different SEO settings you can input on your pages. 1. Click on the Content tab in the gray navigation bar, and click into the page you'd like to modify SEO settings for. 2. On the righthand sidebar, select SEO ...
      • 

    • Add a Conversion Tracking Code to Your Website Using Jotform
      If you have added a Jotform to your website, then you can track your form submissions to see how many conversions you have. First, you will want to create a Thank You page on your liveBooks site. This page is what your users will see after they ...
      • 

    • Add a Shopify Button
      You can add a Shopify buy button to your website by using an HTML block. You can set this up by following the instructions below. 1. Login to your Shopify admin area, then select Buy Button. 2. Click Select product. 3. Select a product from your ...
      • 

    • Access to Developer Tools - CSS, Head & Body JS
      Note: The Developer Tools dashboard is only available to the Professional plan or higher. Learn more about liveBooks' subscription plans. Developer tools allow you to add custom CSS and JS code to your site. The tools are not available by default; ...
      • 

    • Install Google Tag Manager
      Note: This article walks through adding Google Tag Manager to your website. For adding the Google Analytics GA4 Tag, please refer to this article. When adding Google Tag Manager to your website, you will want to make sure it "fires" on all pages. To ...
      •