Bookmark or Add a Page to Favorites with JavaScript

Older JavaScript examples tried to add the current page directly to a browser's Favorites or Bookmarks list. That approach relied on browser-specific APIs such as window.external.AddFavorite() and window.sidebar.addPanel().

Those APIs are not a dependable option for normal web pages today. A regular page should instead tell the visitor to use the browser's built-in bookmark command. Browser extensions can request bookmark permissions, but ordinary page JavaScript cannot silently create a browser bookmark.

DEMO : Bookmark a page →

Practical Bookmark Button Top ↑

The button can preserve the original Bookmark This Page facility by giving the visitor the appropriate browser instruction instead of calling an obsolete proprietary API.

<button type="button" id="bookmark-page">Bookmark This Page</button>
<p id="bookmark-help" tabindex="-1" aria-live="polite"></p>

const bookmarkButton = document.getElementById("bookmark-page");
const bookmarkHelp = document.getElementById("bookmark-help");

bookmarkButton.addEventListener("click", () => {
  const isMac = /Mac|iPhone|iPad/.test(navigator.platform);
  const shortcut = isMac ? "Command+D" : "Ctrl+D";
  bookmarkHelp.textContent =
    `Use ${shortcut} or your browser's bookmark/favorite menu to save this page.`;
  bookmarkHelp.focus();
});

Original Browser-Specific Technique Top ↑

The historical code is retained below because older pages and archived examples may still contain it. It should not be used as the primary implementation for a modern site.

function bookmark() {
  const bookmarkurl = "https://www.example.com";
  const bookmarktitle = "Example page";

  if (document.all && window.external) {
    window.external.AddFavorite(bookmarkurl, bookmarktitle);
  } else if (window.sidebar && window.sidebar.addPanel) {
    window.sidebar.addPanel(bookmarktitle, bookmarkurl, "");
  }
}

The old body link used href="javascript:bookmark()". A real button with an event listener is preferable because it keeps behavior out of the URL and remains semantically correct.

← Window Object Bookmark a page → Redirect Page →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: