Как сделать и установить на сайт анимированный фавикон
В статье "Как установить favicon на сайт"" я уже рассказывал об установке фавикона - графического изображения, которое отображается в адресной строке браузера, на ваш сайт.
А сегодня я хочу рассказать вам как сделать и установить на сайт анимированный фавикон. То есть такой фавикон, который будет двигаться и при желании еще и выводить следом какой то поясняющий текст.
Но перед этим хочу отметить, что пока не все браузеры поддерживают анимированные фавиконы, и в таких браузерах у нас по прежнему будет отображаться статический фавикон.
На самом деле сделать анимированный фавикон невероятно просто, и вы будете дольше читать эту статью, чем его делать.
А поможет нам в этом онлайн сервис HTMLKit, который позволяет без предварительной загрузки и установки каких либо вспомогательных программ создать фавикон из практически любого изображения. Этот сервис сделает за нас всю работу по уменьшению и преобразованию нашего исходного изображения в анимированный файл favicon.gif, а так же в статичный, уже знакомый нам favicon.ico.
А порядок работы у нас будет следующий:
- Заходите ссылке на сайт
- Загружаете то изображение, которое хотите преобразовать в favicon:
- Пару секунд ожидания и открывается окно предпросмотра:
- Хотите добавить поясняющий текст? Пожалуйста!
Вводите текст и при желании выбираете его цвет (а можно еще и цвет фона задать), а затем скачиваете полученный результат в виде архива себе на компьютер:
- Ну а дальше распаковываем полученный архив и помещаем в корень сайта файлы favicon.ico и animated_favicon1.gif. А на каждую страницу сайта , где вы хотите чтобы у вас красовался анимированный фавикон, добавляем между тэгами <head>...</ head> следующий код:
Вот все и готово! У меня, например, получилось вот что: 
А на этом у меня сегодня все. Будут вопросы - пожалуйста обращайтесь. До свидания.
Автор: Сергей Зарубин
Дата: 2012-06-07
Колличество просмотров: 23971
|
|
Нравится |
Комментарии к заметке:
Комментарий добавил(а): Сергей
Дата: 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
У меня не получается русский текст добавить на анимированную иконку, только английский... как вы сделали с русским? Пробовала разные браузеры...
Добавить новый комментарий
