Change Browser Tab Bar Color for Safari

Change Browser Tab Bar Color for Safari

Safari's newer browser version (Version 15 and later) lets website owners 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.20.41_PM.png Screen_Shot_2021-09-27_at_5.40.11_PM.png

 

To get started, open your Websites dashboard and navigate to the Pages tab:

  1. On the right-hand side of the Pages panel, under the section labeled Global Content, select Footer.
  2. Select the (+) button at the bottom of the page.


  3. Select HTML from the menu that appears.



  4. In the HTML Block, paste the code below:
    
    
  5. In the code that you pasted, highlight the content that is inside of the "quotation" marks (see screenshot below), and delete it.
  6. 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
  7. 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 blue 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 Color of Your Website's Links

      You can change the color of your hyperlinks globally so that all links on your website apply to the same rules. To change your sitewide hyperlink color: Click Design at the top of your Websites app to open the Design panel. On the right-hand sidebar, ...
    • Image Tool Tabs

      The Image Collection allows you to edit image information with great detail. Each image has a Details, SEO, and Tags tab that allows you to modify the information for surface-level information, as well as SEO-level information. Details tab SEO tab ...
    • Change a Page's Background

      You can set a unique background for any page on your site. You can choose a solid color, a gradient, or an image to use as your page's background. If you would like to set the same background for every page on your site, then you can visit the ...
    • Verify & Submit Your Websites 360® Site to Google and Bing

      When you submit your sitemap to Google and Bing, you are ensuring that your website is listed in their search results. While search crawlers will find your website eventually, submitting your sitemap will speed up that process. Submitting your ...