How to Bookmark a Web Page Using JavaScript

Introduction

Adding a webpage to a user’s favorites (bookmarks) directly via JavaScript is heavily restricted in modern browsers due to security and privacy concerns. However, there are several workarounds you can use—ranging from manual prompts to draggable bookmark links and PWA installation flows.

Below is an improved and expanded guide covering all modern techniques, browser compatibility notes, and enhanced code examples.

Method 1: Legacy Bookmarking (Internet Explorer Only)

Older browsers like Internet Explorer supported direct bookmarking using specific APIs:

function addToFavorites(url, title) {
  if (window.sidebar && window.sidebar.addPanel) {
    // Old Firefox
    window.sidebar.addPanel(title, url, '');
  } else if (window.external && 'AddFavorite' in window.external) {
    // Internet Explorer
    window.external.AddFavorite(url, title);
  } else {
    alert('Press Ctrl+D (or Cmd+D on Mac) to add this page to your favorites.');
  }
}

addToFavorites('https://example.com', 'Example Page');

Modern Browser Status

• Chrome: ❌ Not supported
• Firefox: ❌ Removed in modern versions
• Safari: ❌ Not supported
• Edge (Chromium): ❌ Not supported

Use this method only for legacy enterprise environments.

Method 2: Manual “Add to Favorites” Prompt

Since browsers block programmatic bookmarking, the simplest approach is guiding the user:

function promptAddToFavorites() {
  const key = navigator.platform.toLowerCase().includes('mac') ? 'Cmd' : 'Ctrl';
  alert(`Press ${key} + D to bookmark this page.`);
}

promptAddToFavorites();

This works everywhere and is widely used today.

Method 3: Create a Draggable Bookmark Link

Users can drag a special link to their bookmarks bar:

<a href="https://example.com" title="Example Page" draggable="true">
  Drag this link to your bookmarks to save the page
</a>

Additional enhancement: “Bookmarklet” script

You can also offer a dynamic bookmarklet link:

<a href="javascript:alert('Thanks for bookmarking!')">
  Bookmarklet Example
</a>

Method 4: PWA “Add to Home Screen” (Mobile + Desktop)

While PWAs do not create a browser bookmark, they give users another way to “save” your site.

manifest.json

{
  "name": "My Web App",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

PWA Install Prompt (Chrome)

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
});

function showPWAInstall() {
  if (!deferredPrompt) return;

  deferredPrompt.prompt();
  deferredPrompt = null;
}

PWAs significantly improve bookmark-like behavior on mobile.

Method 5: Custom “Save Page State” Using Local Storage

If your goal is not literally bookmarking but saving user progress, you can store their current state:

function saveProgress() {
  localStorage.setItem('savedPage', window.location.href);
  alert('Page saved inside this browser. Open the site later to restore.');
}

saveProgress();

This creates an internal bookmark system independent of browser favorites.

Method 6: Server-Side “Bookmark This Page” (User Accounts)

If your users are logged in, you can implement cloud bookmarks:

async function saveBookmark() {
  await fetch('/api/bookmarks', {
    method: 'POST',
    body: JSON.stringify({ page: window.location.href })
  });

  alert('Page saved to your account bookmarks.');
}

This gives you full control and works across devices.

Summary

Modern browsers no longer allow JavaScript to directly create bookmarks, but you still have several reliable options:

Choose the approach that matches your users and your platform requirements.

Conclusion

Although the traditional programmatic “Add to Favorites” feature is no longer supported, combining modern alternatives—PWA install prompts, manual hotkeys, local storage, and account-based bookmarking—lets you recreate the functionality using secure and user-friendly methods.

With these solutions, you can guide users to save your webpage effectively across all browsers and devices.