Анимированные favicon (GIF и JavaScript)
Анимированный favicon — это обычно анимированный GIF, используемый как иконка; Firefox и некоторые сборки Chromium проигрывают его на вкладке, а Safari и другие показывают только первый кадр. Сайты в основном используют анимацию, чтобы обозначить живую активность (спиннер, число непрочитанных, точка записи), часто подменяя иконку из JavaScript, а не полагаясь на GIF. Для фирменного знака статичная иконка яснее и шире поддерживается.
Поддержка неравномерна, так что относитесь к этому как к дополнению
Анимированный GIF, подключённый как favicon, проигрывается в Firefox и некоторых сборках Chromium, но Safari и некоторые другие отрисовывают только первый кадр. Так что анимация никогда не может быть несущей: всё, что иконка должна сказать, должно быть разборчиво в одном этом первом кадре.
Из-за этого большинство «анимированных» favicon в реальности вовсе не GIF. Это скрипт, перерисовывающий иконку из canvas и подменяющий href тега <link>: спиннер, пока что-то загружается, красная точка во время записи или число непрочитанных, нарисованное поверх знака. Это даёт точный контроль и работает через тот же механизм подмены ссылки везде.
Путь через JavaScript для живого статуса
Чтобы показать бейдж непрочитанных или точку статуса, нарисуйте каждое состояние на canvas, экспортируйте и задайте href ссылки favicon этому результату. Браузер обновляет иконку вкладки на лету. Именно так почтовые и чат-приложения ставят число на вкладку, и это плавно деградирует до статичной иконки там, где скрипты отключены.
Частые вопросы об анимированном favicon
Работают ли анимированные favicon в Chrome и Safari?
Поддержка непоследовательна. Firefox анимирует GIF-favicon, Chromium ведёт себя по-разному, а Safari обычно показывает только первый кадр. Никогда не полагайтесь на то, что анимацию увидят.
Как показать число непрочитанных в favicon?
Нарисуйте иконку плюс бейдж на canvas в JavaScript, затем задайте href ссылки favicon выводу canvas. Обновляйте его при каждом изменении числа. Это тот же приём, что используют почтовые и чат-приложения.
Стоит ли использовать анимированный favicon?
Для фирменного знака — нет. Статичная иконка яснее и поддерживается повсеместно. Приберегите анимацию для настоящего живого статуса и реализуйте его подменой ссылки в JavaScript, а не GIF.