Как сделать и установить на сайт анимированный фавикон


Доброго всем времени суток дорогие друзья.

В статье "Как установить favicon на сайт"" я уже рассказывал об установке фавикона - графического изображения, которое отображается в адресной строке браузера, на ваш сайт.

А сегодня я хочу рассказать вам как сделать и установить на сайт анимированный фавикон. То есть такой фавикон, который будет двигаться и при желании еще и выводить следом какой то поясняющий текст.

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

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

А поможет нам в этом онлайн сервис HTMLKit, который позволяет без предварительной загрузки и установки каких либо вспомогательных программ создать фавикон из практически любого изображения. Этот сервис сделает за нас всю работу по уменьшению и преобразованию нашего исходного изображения в анимированный файл favicon.gif, а так же в статичный, уже знакомый нам favicon.ico.

А порядок работы у нас будет следующий:


  1. Заходите ссылке на сайт HTMLKit


  2. Загружаете то изображение, которое хотите преобразовать в favicon:
    Анимированнный_фавикон_1


  3. Пару секунд ожидания и открывается окно предпросмотра:
    Анимированнный_фавикон_2


  4. Хотите добавить поясняющий текст? Пожалуйста! Вводите текст и при желании выбираете его цвет (а можно еще и цвет фона задать), а затем скачиваете полученный результат в виде архива себе на компьютер:
    Анимированнный_фавикон_3


  5. Ну а дальше распаковываем полученный архив и помещаем в корень сайта файлы favicon.ico и animated_favicon1.gif. А на каждую страницу сайта , где вы хотите чтобы у вас красовался анимированный фавикон, добавляем между тэгами <head>...</ head> следующий код:
    Анимированнный_фавикон_4


Вот все и готово! У меня, например, получилось вот что:  Анимированный фавикон

А на этом у меня сегодня все. Будут вопросы - пожалуйста обращайтесь. До свидания.

Автор: Сергей Зарубин

Дата: 2012-06-07

Колличество просмотров: 21448

Нравится

Комментарии к заметке:

Комментарий добавил(а): Сергей
Дата: 2012-09-03

А почему у Вас на сайте нет анимации?
я вот себе сделал www.02021983.com
точно также как сказано у Вас, но анимации тоже нету(

Комментарий добавил(а): Сергей Зарубин
Дата: 2012-09-04

К сожалению пока не все браузеры поддерживают анимированные фавиконы и
в таких браузерах будет отображаться статический фавикон.
Попробуйте посмотреть в браузере Firefox -
все должно работать

Комментарий добавил(а): евгений
Дата: 2015-03-11

чет я наверно неправильно сделал не анимируется udonet-pro.ru

Комментарий добавил(а): Сергей
Дата: 2015-04-01

Не сохраняется в ICO формате - тольго GIF по этому и не работает

Комментарий добавил(а): Накилай
Дата: 2015-04-23

Спасибо!
Только в Хроме не работает.
<a href="http://xn----8sbhfekgeb9aiml4c7c7h.xn--p1ai/"><a/>

Комментарий добавил(а): Вадим
Дата: 2015-10-06

Я сделал ВСЕ ОК Зацените http://umnyj-nasos.ru/

Комментарий добавил(а): Михаил
Дата: 2015-10-31

Получается. Только вопрос: есть анимированный фавикон и статичный - в каом порядке их прилинковать к страниуе? Если анимация не поддерживается - то всё понятно - загрузится статичный. А если поддерживается - то загрузится статичный PNG, а объявленный за ним анимированный GIF его перекроет? Или загрузится первый PNG и привяжется к сайту, а второй "пролетит мимо" так как место уже занято?
http://sgpmsk.com
Здесь сначала ico, потом png, потом анимированный gif.
Отпишите, появилась ли у вас анимация на закладке и какой у вас браузер.

Комментарий добавил(а): Андрей
Дата: 2015-10-31

У меня на вкладке появился http://sgpmsk.com с анимированной иконкой, а, при занесении в избранное, иконка у закладки без анимации.
FireFox.
Интересно, как отобразится, после индексации, в столбце результатов поиска Яндекса и Google?
Пока вижу в их проиндексированной сохранённой копии старые страницы без фавикон.

Комментарий добавил(а): Иван
Дата: 2015-10-31

Михаил, у тебя получилась здоровская анимация логотипа в favicon на http://sgpmsk.com! Как добился такой плавности анимации при таком малом размере файла - всего 3.4кБ?

У меня во вкладках твой логотип анимированный.

Вопрос: а можно ли добавить его в адресную строку? И как туда прописывают текст (пример у Сбербанка.онлайн).

Комментарий добавил(а): Екатерина
Дата: 2015-11-15

Классная идея! Спасибо автору за подробное объяснение. Сразу все понятно.
У меня получился вот такой фавикончик: http://gololyod.ru/

Комментарий добавил(а): Юлия
Дата: 2017-09-07

У меня не получается русский текст добавить на анимированную иконку, только английский... как вы сделали с русским? Пробовала разные браузеры...



Добавить новый комментарий


Введите число с картинки:

captcha