Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Change Tab Title with JavaScript

By  on  

Changing the tab (or window) title is an age old practice.  Gmail does it to notify the user of a new chat message and this blog does it to update the tab title after a new page loads via AJAX.  How is it done?  By setting a property on the document object, of course:

That property, of course, is document.title:

document.title = 'Hello!'; // New title :)

One common misconception is that you change the window.title property, but you must use the document object, otherwise you'll see no effect.  You'll oftentimes see a setInterval used with document.title to quickly change title to get the user's attention.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

Discussion

  1. Roger

    This is great – in 15 years of working in web design the thought of changing page title never crossed my mind. Could be useful though, cheers!

  2. Chris Heilmann

    If you want to be evil about it change it to:

    document.title = '(3) mytitle';

    And see how many people wonder what is unread :)

    • David Walsh

      If that’s not in evil.js, it should be added immediately

    • Matthew

      Thats pure evil.

  3. Loilo

    That’s really nice – I always did that via getElementsByTagName and innerHTML, but this solution’s way more convenient.

  4. Ben Wilson

    Of-course this is tricky. It also affects DOM document ( element in HTML). Also In XUL, retrieving document.title before document gets completely loaded has unfixed behavior (document.title might pull an empty result or may effect-less.)

  5. Russ Weakley

    I’m happy to be corrected on this, but if you change the tab title after a screen reader initially caches the page, they are not informed of this change. So, if you are changing the page for a relevant reason, could this be a problem? The page title is the first thing screen readers hear when a page loads, and it is like a road map to where they are, where they want to be.

  6. Alex Periera

    This is such a simple tweak and can make us look our website state of the art!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!