Как оживить иконку? - PullRequest
Новая
       27

Как оживить иконку?

38 голосов
/ 03 декабря 2009

Как оживить такой значок?

animated favicon

Кажется, работает только в Firefox.

Ответы [ 6 ]

31 голосов
/ 03 декабря 2009

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

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

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

23 голосов
/ 03 декабря 2009

Почти наверняка не то, что вы ищете, но некоторые люди зашли так далеко, что запрограммировали писать в favicon в клиентском JavaScript. Следующий URL показывает старую видеоигру «Защитник», играющую в фавиконе:

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

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

«Просмотр источника» на этой странице делает чтение довольно интересным.

12 голосов
/ 08 апреля 2016

Firefox

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

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

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

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

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

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 библиотека.

Смотри также

3 голосов
/ 01 июля 2018

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

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

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

1 голос
/ 04 января 2019

Я создал библиотеку для анимации 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 даже в веб-приложении.
0 голосов
/ 25 января 2019

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

  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);
};

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

...