Ответ 1

Хотя он в настоящее время поддерживается только другими браузерами FireFox, мы надеемся, что в будущем это будет поддерживать его. Чтобы добиться эффекта, вам нужно загрузить gif на свой сервер, а затем добавить строку ниже в head на странице:

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Посмотрите AnimatedFavIcon.com за дополнительной помощью и ресурсами.

Ответ 2

Почти наверняка не то, что вы ищете, но некоторые люди зашли так далеко, чтобы программно писать в favicon на стороне клиента JavaScript. Следующий url показывает старую видеоигру "Defender", играющую в значке:

http://www.p01.org/defender_of_the_favicon/

Это работает в Firefox, Opera и Safari, но не в, по крайней мере, более старых версиях IE. Я не уверен, на что способен последний IE.

Выполнение "источника просмотра" на этой странице делает довольно интересным чтение.

Ответ 3

Fire Fox

Firefox поддерживает анимированные значки. Просто добавьте ссылку на GIF в <link rel="icon">:

<link rel="icon" href="/favicon.gif">

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

Другие браузеры

В других браузерах вы можете анимировать значок с помощью JavaScript. Вам просто нужно извлечь отдельные кадры из GIF и изменять <link rel="favicon"> src при каждом изменении кадра GIF. Посмотрите этот код, например (демонстрация JS Fiddle):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{Я использовал libgif.js для извлечения GIF-кадров.}

К сожалению, анимация не очень плавная в Chrome. В Firefox это прекрасно работает, но Firefox уже поддерживает значки GIF.

Проверьте также библиотеку favico.js.

Смотрите также

• Как добавить значок вкладки браузера (favicon) для веб-сайта?
• Динамическое изменение иконки сайта

Ответ 4

На GitHub есть репозитории, демонстрирующие, как это сделать.

http://lab.ejci.net/favico.js/example-simple/

По сути, они рисуют на холсте, а затем делают canvas.toDataURL('image/png') а затем устанавливают <link> на этот URL-адрес.

Ответ 5

Я создал библиотеку для анимации favicon, по умолчанию это анимация загрузчика (она создается с помощью canvas), но она также поддерживает анимацию gif для браузера, который не поддерживает gif из коробки (с версии 0.3.0).

API прост

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

Версия 0.4.0 будет иметь функцию обратного вызова, которая будет генерировать кадр примерно так:

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

и пользователь сможет нарисовать один кадр

ПРИМЕЧАНИЕ: что нужно учитывать, если вы хотите реализовать что-то вроде этого:

• анимировать, когда вкладка не активна, использовать веб-работника,
• не используйте requestAnimationFrame, потому что он прекращает выполнение в MacOSX/Chrome даже в веб-приложении.

Ответ 6

Чтобы анимировать значок для почти ВСЕХ браузеров, мне помогло следующее:

1. Скачать изображение каждого кадра GIF.

2. Свяжите первое изображение как иконку с идентификатором:

   <link rel="icon" type="image/png" href="/image1.png" id="icon"/>  
   

3. Создайте функцию для зацикливания и используйте setTimeout() для каждого изображения. Время является переменным и может быть установлено так быстро, как вы хотите анимацию. Вот пример:

   function iconChange() {
   setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
   setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
   setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
   }
   

4. Создайте цикл при загрузке окна:

   window.onload = function() {
   setInterval(function() {
   iconChange();
   }, 250);
   };
   

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

Ответ 7

Переименуйте анимированный gif в favicon.gif и поместите его там, где у вас есть ваш index.html(или index.php... или аналогичный) (public_html или его подкаталог, если на вашем сервере больше сайтов), он автоматически работа.