Есть два способа которые используют для анимирования иконки. Я вам расскажу об обоих.

Первый (самый быстрый):

Второй(кроссбраузерность да и больше графики чем скриптов):
Делаем не простую иконку, а… анимированную. Выглядит это уж больно эффектно как в закладках браузера, так и просто среди открытых окон с различными сайтами. Жалко вот только, что не все браузеры поддерживают такие иконки, но любимый и родной Firefox справляется на-ура!

Нам понадобится:
Для создания favicon достаточно любого графического редактора, например Photoshop, но мы пойдем другим путём. Будем делать это в пакете Macromedia Flash восьмой редакции.

Запускаем Macromedia Flash.

Создаём новый проект: Файл > Новый… >Документ flash. Теперь мы видим пока пустой "монтажный стол”, а ниже его свойства. Нам нужно поменять размеры и фон. Давайте проставим длину и ширину по 100 px, цвет фона сделаем оранжевым.

Далее с помощью инструментов в левой панельке рисуем "первый кадр” предварительно увеличив масштаб, исключительно для удобства.

Во Macromedia Flash также как и в Photoshop реализована идея слоёв, помним об этом и размещаем все элементы своей иконки правильно.
В первом слои размещаем рамочку, во втором - букву.

Далее существует 2 варианта развития событий: а) рисовать покадрово свою иконку; б) воспользоваться инструментом для создания промежуточных кадров.
Подробнее: Вы нарисовали первый кадр, скопировали содержимое первого кадра, вставили в 5ый кадр, изменили форму (например уменьшили ширину вдвое); теперь можно создать промежуточные кадры (2ой, 3ий, 4ый). Так мы и поступим.

Выбираем нужный нам слой, в данном случае сначала выбираем первый слой в первом кадре, переходим в 4ый кадр (слой тот же, первый), нажимаем F6 (Этой командой создаётся новый кадр с копией содержимого предыдущего ключевого кадра). Такую же операцию проделываем и для второго слоя.

Теперь переходим к редактированию содержимого четвёртого кадра. Выбираем первый слой, нажимаем лат.букву А или в панеле инструментов выбираем "Подвыделение”, щелкаем по нарисованной рамке и видим линии с узлами в углах, так вот, тащим эти узлы как нам нужно. Я преследовал цель сделать иконку с псевдо-трехмерной буквой и рамкой, которые вращаются.

Теперь на очереди буква из второго слоя. Букву можно редактировать также перемещением узлов как и рамку, а можно еще проще: выделяем букву, нажимаем комбинация Ctrl+B (буква из текста превратится в изображение, типа как в Photoshop’е перегон текста в растр), переходим по меню Изменить > Трансформировать >Искажения и мы увидим, что вокруг буквы появились линии с узлами по углам и по центрам линий. Тянем как нам надо. Всё, четвертый кадр готов.

Сейчас создадим недостающие кадры, заодно обеспечим плавность перехода между каждым кадром. Итак, просто щелкаем, например, по кадру 2 или 3 и в свойствах выбираем Tween-параметр "Форма”.

Подобными манипуляциями создаем все ключевые кадры для всех слоёв, а затем промежуточные.

Далее, когда уже после тысячного нажатия Enter’а глаз начинает радоваться сотворённому, переходим к экспорту сего чуда в формат gif, предварительно сохранив для потомков сам проект (формат .fla). Нажимаем Файл > Настройки публикации. В закладке "Форматы” поставьте галочку рядом с GIF Image (.gif), остальные форматы можете отключить, ибо не пригодятся. Теперь переходим в закладку "GIF” и выставляем все параметры как на картинке ниже

Нажимаем "Публиковать” и смотрим что получилось. Затем переименовываем в favicon.ico и закидываем в корень своего сайта/блога. Добавляем строчку:

Перезагружаем браузер и радуемся новой анимированной иконке. Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.

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

Удачи вам с рисованием анимированых иконок

Автор: Vsebudetok