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.

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • By
    Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

  • By
    Creating the Treehouse Frog Animation

    Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...

Discussion

  1. 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. If you want to be evil about it change it to:

    document.title = '(3) mytitle'; 
    

    And see how many people wonder what is unread :)

    • 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. 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. 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. 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!