Завлекающий favicon и title, если ваш сайт открыт в неактивной вкладке

Всем — привет. Сегодня статья, как говорится: «по заявкам». Речь пойдет о завлекающем favicon и title на неактивной вкладке с вашим сайтом.

Недавно я получил комментарий от одного из читателей (привет Артем) со следующим текстом:

А не могли бы вы сделать разбор вот такой штуки: на сайте __bizneschina.ru/besplkurs.html когда вкладка не активна — меняется фавикон и заголовок (тем самым завлекая), а когда жмем на вкладку то все возвращается в нормальное состояние. Думаю, будет полезная статья. Спасибо!

Расскажу чуть более подробнее, что происходит. Когда пользователь находится на сайте, то ему отображается обычный ваш фавикон и title, но когда посетитель перейдет на другую вкладку, то можно показать ему другой текст и другую иконку. Логичный вопрос: «Зачем?». Попробую ответить этой гифкой:

Согласитесь, такая favicon привлекает намного больше внимания. Тема действительно интересная и давайте разбираться как реализовать подобный эффект на своих сайтах.

Покопавшись в интернете (и в исходном коде сайта донора), я понял, что используется jquery-плагин mfFancyTitle, который поможет решить нам поставленную задачу.

Первым делом подключим нашу фавиконку. Делается это между тегами head, например, так:

<link rel="icon" href="img/favicon.ico">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="apple-touch-icon-152x152.png" sizes="152x152" />

Теперь подключим jquery перед закрывающим тегом body, если он еще не подключен к проекту и сам скрипт:

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

Пол дела сделано, давайте инициализируем скрипт и добьемся того, что favicon будет меняться на другую картинку, попутно меняя и текст заголовка:

$.mFancyTitle({
	mftMissYou: true,
	mftMissYouTitle: 'Вернись на эту страницу', // Текст на который измениться заголовок, когда вкладка не активна
	mftMissYouFavicon: {
		'icon': 'img/fav/favicon-16x16-r.png', // Иконку которая появится, когда вкладка не активна
	}
});

Из комментария, думаю, понятно, что происходит. Теперь, переключаясь на другую вкладку, у нас изменится favicon и title.

Но WOW — эффект был в том, что favicon мигал и привлекал внимание. Давайте реализуем это и дополним наш код следующими строками:

mftFaviconBlink: [false, true], // Должен ли мигать favicon на активной и неактивной вкладке
mftTitleBlink: [false, false],   // Должен ли мигать title на активной и неактивной вкладке
mftFaviconAltIcon: {
  'visible': {
    'icon': '', 
  },
  'hidden': {
    'icon': 'img/fav/favicon-16x16-y.png' // Вторая иконка, которая будет показываться на неактивной вкладке 
  }
}

Все вместе — это выглядит так:

$.mFancyTitle({
	mftMissYou: true,
	mftMissYouTitle: 'Вернись на эту страницу', // Текст на который измениться заголовок, когда вкладка не активна
	mftMissYouFavicon: {
		'icon': 'img/fav/favicon-16x16-r.png', // Иконка которая появится, когда вкладка не активна
	},

	mftFaviconBlink: [false, true], // Должен ли мигать favicon на активной и неактивной вкладке
	mftTitleBlink: [false, false],   // Должен ли мигать title на активной и неактивной вкладке
	mftFaviconAltIcon: {
		'visible': {
			'icon': '', 
		},
		'hidden': {
			'icon': 'img/fav/favicon-16x16-y.png' // Вторая иконка, которая будет показываться на неактивной вкладке 
		}
	}
});

Теперь наши вкладки выглядят так:

Подробнее с настройками можно ознакомиться на странице проекта. А на сегодня — все. Вот такая интересная статья получилась. Спасибо Артем за интересную тему, которая действительно может оказаться полезной для многих людей. Напоминаю, что каждый может предложить тему для следующей статьи тут.