How to Add a Cross-Browser Bookmark Button to Your Website

Bookmarks (also known as Favorites) in browsers make it easy to get back to your favorite websites or webpages. This article will show you how to add a cross-browser bookmark button to your website.

We are going to use the <a> tag (HTML anchor tag) to create a bookmark button. We'll add some CSS rules to make the anchor look like a button. You may be wondering why we don't use the <button> tag. The reason is that some browsers (Firefox 23+ and Opera prior to version 15) require using an anchor tag with rel="sidebar" to create a bookmark.

Place this code wherever you want the button to appear on your page.

<a id="bookmark-this" href="#" title="Bookmark This Page">Bookmark This Page</a>

Inside your head tag, add a style block with the following CSS:

#bookmark-this {
  padding: 5px 10px;
  background-color: #f0ad4e;
  border: 1px solid #eea236;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

#bookmark-this:hover {
  background-color: #ec971f;
  border: 1px solid #d58512;
  text-decoration: none;
}

#bookmark-this:active {
  background-color: #ec971f;
  border: 1px solid #d58512;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

The CSS above adds some styles to the anchor so it would look like a button. You can apply your own CSS to style the anchor.

Supporting Mobile Browsers

To support mobile browsers, we use the Add to Homescreen script by Matteo Spinelli. The script opens a message inviting the mobile user to add the website to homescreen. You can get the script here. Include the addtohomescreen.css and addtohomescreen.js in your head tag. The files can be found inside the src and style folders.

<link rel="stylesheet" href="css/addtohomescreen.css">
<script src="js/addtohomescreen.js"></script>

<!-- Additionally, include jQuery (necessary for the bookmark script) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

The Bookmark Script

Before the closing body tag, add a script block with the following code.

jQuery(function ($) {

  $('#bookmark-this').click(function (e) {
    var bookmarkTitle = document.title;
    var bookmarkUrl = window.location.href;

    if ('addToHomescreen' in window && addToHomescreen.isCompatible) {
      // Mobile browsers
      addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
    } else if (/CriOS\//.test(navigator.userAgent)) {
      // Chrome for iOS
      alert('To add to Home Screen, launch this website in Safari, then tap the Share button and select "Add to Home Screen".');
    } else if (window.sidebar && window.sidebar.addPanel) {
      // Firefox <=22
      window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent) && !Object.fromEntries) || (window.opera && window.print)) {
      // Firefox 23-62 and Opera <=14
      $(this).attr({
        href: bookmarkUrl,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e);
      return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
      // IE Favorites
      window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
    } else {
      // Other browsers (Chrome, Safari, Firefox 63+, Opera 15+)
      alert('Press ' + (/Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
    }

    return false;
  });

});

At the time of writing this article, WebKit & Blink browsers on desktop (e.g. Safari, Chrome, Opera 15+) do not support adding bookmark through JavaScript, an alert box will be prompted and tell the user using Ctrl+D or Cmd+D to add the bookmark instead.

Demo