Анимированный favicon (иконка для вашего сайта сайта) Есть два способа которые используют для анимирования иконки. Я вам расскажу об обоих.
Первый (самый быстрый):
Code
<link rel="shortcut icon" id="favicon_id" href="http://logical-portal.ru/anim_icon1.gif">
<script>
setTimeout(function() {document.getElementById('favicon_id').href='Второе изображение.gif'}, 1000)
setTimeout(function() {document.getElementById('favicon_id').href='Третее изображение.gif'}, 2000)
setTimeout(function() {document.getElementById('favicon_id').href="Четвертое изображение.gif'}, 3000)
setTimeout(function() {document.getElementById('favicon_id').href='Последнее изображение.gif'}, 4000) }
</script>
ссылки переделать под себя, работает не во всех браузерах, уж очень они не любят править заголовки и статичную информацию. Второй(кроссбраузерность да и больше графики чем скриптов):
Делаем не простую иконку, а… анимированную. Выглядит это уж больно эффектно как в закладках браузера, так и просто среди открытых окон с различными сайтами. Жалко вот только, что не все браузеры поддерживают такие иконки, но любимый и родной 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 и закидываем в корень своего сайта/блога. Добавляем строчку:
Code
<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
или
Code
<link rel="icon" href="http://ваш-сайт.ru/ваш_анимированный_GIF.gif" type="image/gif">
Code
<link rel="shortcut icon" href="http://ваш-сайт.ru/ваш_анимированный_GIF.gif" type="image/gif">
Перезагружаем браузер и радуемся новой анимированной иконке. Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.
от себя добавлю, что в этом способе браузер может не захотеть воспросизводить анимацию, тогда он покажет просто первый кадр как статическую картинку. Учитывая это советую первым кадром делать картинку которую увидят в неработающей анимации иконки в браузере.
Удачи вам с рисованием анимированых иконок
Автор: Vsebudetok