Создание анимированной favicon (фавиконки) сайта

Информация о материале: Родительская категория: Программирование; Категория: JavaScript

Для придания сайту индивидуальности, дополнительной привлекательности и для того, чтобы удержать посетителя на сайте многие вебмастера идут на всякие уловки, которые насильно удерживают пользователя от того, чтобы он не мог закрыть вкладку браузера. Я считаю, что это не правильно и нашёл способ, как выполнить все условия, приведённые выше без насильственных действий по отношению к пользователю, зашедшему на сайт. Всего этого можно добиться добавив динамичности в саму вкладку браузера, выделив её в ряду прочих анимационными эффектами. Обычно в браузера у пользователя открыто не меньше 3-4-х вкладок (у некоторых это количество достигает пары десятков). Если при этом вкладка с вашим сайтом будет слегка мерцать и поблёскивать, это вызовет у пользователя непреодолимое желание вернуться к её просмотру. Но всё хорошо в меру — слишком навязчивая анимация закончится тем, что пользователь закроет вашу страницу!

Как сделать анимированную favicon (фавиконку) сайта

Мысль о том, что можно сделать анимированную фавиконку сайта мне пришла в голову после игры в XCraft. Там тоже про ракеты, как и у меня на сайте. И я решил прикрутить мерцающее пламя в выхлопе ракеты. Важным условием было то, что настроенные ранее favicon для всех платформ не должны слетать и поисковые роботы должны однозначно получать единственную и неповторимую фавиконку в свою поисковую базу. Поэтому я даже не стал рассматривать вариант установки анимированной gif-фавиконки (хотя некоторые авторы предлагают остановиться именно на этом варианте). Я пошёл по другому пути, решив, что правильно будет после загрузки страницы менять имя файла в соответствующем теге HTML страницы. HTML-тег, отвечающий за отображение фавиконки следующий:

<link rel="shortcut icon" href="/./путь_до/favicon.ico">

Может быть ещё использован тег:

<link rel="icon" href="/./путь_до/favicon.ico">

но это уже не обязательно.

Дальше осталось создать пару-тройку картинок и написать JavaScript код, который будет через определённое время менять ссылки на эти картинки в заголовке HTML-документа.

Код на JavaScript, позволяющий сделать анимированную favicon (фавиконку) сайта

Собственно сам скрипт:

<script>
var counter		= 1;
var NumberOfPics	= 12 + 1;
var nodeFavicon		= document.getElementsByTagName("link");

function animateFavicon() {
 //console.log(counter); // для отладки счётчика в консоли
    for (var i = 0; i < nodeFavicon.length; i++)
    {
        if( (nodeFavicon[i].getAttribute("rel") == "icon") || (nodeFavicon[i].getAttribute("rel") == "shortcut icon"))
        {
			nodeFavicon[i].setAttribute("href", "./путь_к_папке_с_кадрами_favicon/-" + counter + ".ico");
        }
    }
 if (counter < NumberOfPics) {
  setTimeout(animateFavicon, время_анимации_кадра_в_миллисекундах);
  counter++;
  if (counter == NumberOfPics) { counter = 1; }
 }
}

animateFavicon();
</script>

Собственно и всё!

Вначале создаём и выкладываем картинки, которые будут кадрами для анимации favicon (этот путь используется в строке 14). Нумерация файлов должна быть в виде простой арифметической прогрессии от 1 с шагом 1. Это позволит упростить скрипт.
Первые две строчки — это инициализация счётчика и задание количества кадров (должно соответсвовать кол-ву картинок п.1 + 1)
В третьей строчке получаем массив всех элементов HTML-документа, имеющих имя link
Далее создаём функцию, отвечающую за анимацию фавиконки (смену кадров):
1. в цикле (стр.8-14) обходим весь массив, сформированный в п.2
  1. в стр.10 проверяем соответствие аттрибута rel на условие icon или shortcut icon
  2. если условие соблюдено, значит это HTML-тег фавиконки и в нём нужно поменять картинку на следующую (стр.12)
Условие в стр.15-19 служит для зацикливания анимации:
1. в стр.16 устанавливаем время паузы до смены следующего кадра (в миллисекундах)
2. в стр.17 увеличиваем счётчик на 1, чтобы взять следующую картинку кадра
3. в стр.18 проверяем: если картинка была последняя, возвращаем счётчик в исходное состояние к первому кадру
Функция готова, осталось только её инициировать для запуска в браузере. Это и происходит в вызове функции в стр.22

Пример, того, как можно сделать анимированную фавиконку (favicon) сайта

Посмотреть то, как всё это работает можно посмотреть во вкладке браузера (я конечно сразу всё это реализовал у себя на сайте) + более навороченная анимация по → этой ссылке.

Теперь вообще всё должно быть просто и понятно. Кому лень самому возиться, можете заказать у меня анимацию фавиконки. Ценник - от 500 руб. Подробности по → этой ссылке. Мои контакты можно посмотреть на → этой странице.

Где работает анимированная фавиконка (favicon) сайта

Важным моментом, который стоит сразу уточнить, что всё это работает во всех браузерах на движке Chromium и в FireFox на десктопах. В браузерах от microsoft не работает. В Safari нет возможности проверить.

Но даже этого достаточно, чтобы удержать значительную часть посетителей на сайте и привлечь их внимание тем контентом, который вы им предлагаете.

Данное решение, как уже было отмечено ранее не мешает поисковикам правильно определять основную favicon сайта и не мешает работе и отображению комплексной favicon, а также не вешает и не грузит страницу, и никак не мешает жить пользователю.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)