How to change page title and icon on Page leave with jQuery

Page titles and icons are important elements of a website that help visitors identify and remember the website they’re visiting.

However, sometimes you may want to get back the user’s attention to your site by animating the site page title and icon when the user leaves your website or open another tab.

It can be done with and without the jQuery plugin.

In this tutorial, I show how you customize the tab with iMissYou and mFancyTitle jQuery plugins and with the only jQuery on-page leave.

---

Contents

1. I Miss You
2. mFancyTitle
3. Without plugin
4. Conclusion

---

1. I Miss You

A light jQuery plugin that simply changes your web page title and icon when the user is not viewing your site.

Download & include

• Download plugin from GitHub.
• Include scripts.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="I-Miss-You-master/jquery.iMissYou.js"></script>

Initialize

Call iMissYou() method and define title and favicon option.

• title – Enter your title which you want to show when site tab is inactive.
• favicon – This has two more options enabled and src. Set your icon in src and set enabled: true to also change the icon in the inactive state.

jQuery(document).ready(function($){
    $.iMissYou({
         title: "I Miss you !",
         favicon: {
              enabled: true,
              src:'I-Miss-You-master/iMissYouFavicon.ico'
         }
    });
});

---

2. mFancyTitle

mFancyTitle is another jQuery plugin that does the same work as iMissYou but it is more customizable e.g. Blinking the page title and icons, set marquee on the title, alter icons according to the state, etc.

This is also a light jQuery plugin which you can download from their Official website.

Include

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="jquery.mfancytitle-0.4.1.min.js"></script>

Initialize

Call mFancyTitle() method within it specify the following options –

• mftMissYou – This takes boolean (true or false) value. If it set to false then the web page title and icon wouldn’t change when the user leaves the site.
• mftMissYouTitle – Specify your new page title and if you don’t want to modify the title then don’t define this option or leave it blank.
• mftMissYouFavicon – Specify your icons.

Example

jQuery(document).ready(function($){
     $.mFancyTitle({
          mftMissYou: true,
          mftMissYouTitle: 'Hey! I miss you!', // new document title: it will appear when the user leaves your page and open another tab in the browser
          mftMissYouFavicon: {
                'apple-touch-icon-precomposed': 'sitelogo-180x180.png',
                'icon': 'sitelogo-32x32.png',
                'shortcut icon': 'sitelogo-32x32.png'
          } // new favicons: they will be visible when the user leaves your page and open another tab in the browser
     });
});

---

Blink title

Specify mftTitleBlink option which takes Array of boolean values [false,true].

• The Array first index position denotes an active state of site tab and
• another index position denotes an inactive state.

Set it to true to blink the title on a state (active/inactive).

---

Add marquee to title

Specify mftTitleMarquee option which also takes Array of boolean values [false,true].

• The Array first index position denotes an active state of the site tab and
• another index position denotes the inactive state.

Set it to true to add marquee in the title on a state (active/inactive).

Example

jQuery(document).ready(function($){
     $.mFancyTitle({
          mftTitleBlink: [false, true],
          mftTitleMarquee: [false, true], // document title will NOT scroll in visible state but it will scroll in hidden state
     });
});

---

3. Without plugin

I am altering the title element and link icon attribute with jQuery.

Detect tab change

For detecting the active/inactive state of a tab I bind focus and blur event on the window.

// Get current title and icon
var title = $('title').text();
var favicon = $('link[rel=icon]').attr('href');
var newtitle = 'New page title';

// Active
window.addEventListener('focus', resetTitleicon);

// Inactive
window.addEventListener('blur', changeTitleicon);

---

Change Icon & title

When the blur event trigger change the title and icon of the web page.

// Change page title and icon
function changeTitleicon(){

     $("title").text( newtitle ); 
     $('link[rel=icon]').attr('href', 'i-Miss-You-master/favicon.ico');
 
}

And on focus rest the web page title and icon.

// Reset the page title and icon
function resetTitleicon(){
     $('title').text(title);
     $('link[rel=icon]').attr('href', favicon);
}

Completed Code

// Get current title and icon
var title = $('title').text();
var favicon = $('link[rel=icon]').attr('href');
var newtitle = 'Hey! I miss you!';

// Active
window.addEventListener('focus', resetTitleicon);

// Inactive
window.addEventListener('blur', changeTitleicon);

// Change page title and icon
function changeTitleicon(){
     $("title").text(newtitle); 
     $('link[rel=icon]').attr('href', 'i-Miss-You-master/favicon.ico');
}

// Reset the page title and icon
function resetTitleicon(){
     $('title').text(title);
     $('link[rel=icon]').attr('href', favicon);
}

---

4. Conclusion

Changing the page title and icon on page leave with or without the jQuery plugin is a simple and effective way to enhance the user experience of your website. To make a lasting impression on your visitors as they leave your website, customize the title and icon of your page by following the instructions in this article.

It’s important to remember to thoroughly test the changes to make sure they function as intended across a variety of platforms and browsers.

Overall, this technique can be a valuable addition to your website’s branding and user experience.

For more customization, you can use with mFancyTitle jQuery plugin which has more options than iMissYou plugin.

If you found this tutorial helpful then don't forget to share.