Change Web page title and favicon when user switchs to other tab

You may have written a nice article and spent your much precious time on this but what happens when a user gets a popup dialog box about a funny cat video. He leaves your website and forgets to have another look at your work. How cool it will be to remind a user to come back to your website by displaying a cool message in place of your web page title. While this may sound little complicated to implement but in real it can be done even if you have no coding experience. This is fairly simple and can be achieved by using jQuery.

change web page title favicon

What it will do is that when a user switches to another tab then the web page title of your website will change to “we miss you” or whatever you want to display to the user and also change the favicon to something relatable like a heart icon resembling that they need to come back to your website.

How to implement this for your own website

Firstly, Download this plugin from Github

Extract the downloaded zip file and place it anywhere on your computer.

Now paste the following code before the closing head tag of your website and click save.

<link rel=”shortcut icon” href=”favicon.ico”/>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”jquery.iMissYou.js”></script>
<script>
jQuery(document).ready(function($){
$.iMissYou({
title: “I Miss you !”,
favicon: {
enabled: true,
src:’iMissYouFavicon.ico’
}
});
});
</script>

paste the code

You can change the title and icon as per your liking but be careful to reference the appropriate icon image after making any changes.

Now copy the following four files from the downloaded plugin and paste it in your website root directory.

copy the files

Again, now open your website from google chrome and open a new tab. You will notice that title of your website changes along with favicon as described in the code.

Download this plugin from Github

Leave a Reply