Details

Written by Tech Notes

Published: 05 April 2014

New Versions of Internet Browsers Can Show Animated (Dynamic/Moving) Icons Images.

Please note that I do not get paid to write these articles.  All are done in a best effort manner.

With new versions of Internet browsers, like Firefox and Chrome (NOT all; such as IE), you can have a non-static icon showing in the Internet browser window or browser tab.  Depending if the browser supports this ability, you can have an animated icon showing as the Favicon, which is what the icon image representing website is called.  The favicon image is what is shown when you Bookmark or add to Favorites.  The image file will typically have the name of favicon.ico.  An .ico has a special format of it's own, and not a .gif or .jpg or .png or other graphic formats.

Animated (Dynamic/Moving) Favicon Is A GIF File.

In the case of an animated favicon, again supported by newer Internet browsers, the format of the favicon is in fact a GIF.  A GIF that has multiple slices or frames, and when flipped through the different image slices/frames, the images seems animated (moving or in action).

These two images, and , are part of this animated image, .  There are specific time delays indicated for each image slice within the GIF file, which is located at http://technotes.whw1.com/images/TNfavicon16x16-animated.gif.

Need Software To Make An Animated (Dynamic/Moving) Favicon Or An Animated GIF File.

The animated favicon is also a 16x16 unit image, as is the typical normal favicon (other sizes like 32x32 and 48x48 exist too for static favicons and .ico files, and larger for iphones and more).  Unlike static image favicons you cannot just use an online favicon maker or static image maker to make it, and would need a software that creates an animated GIF.  An animated favicon is a 16x16 animated GIF file.

I have included here an Oldie, but a Goodie for you to download for FREE (click here to download).  An animated GIF maker, the Microsoft GIF Animator.  No strings attached, and free of viruses and malware free, and pre-scanned.  A super tiny program; less than 1MB!  Does what you need.  You can use more elaborate softwares like Adobe Image Maker, but it will take you a lot longer to figure out it's usage. 

You will need to use a software like Paint or GIMP or any other graphic software or collect online images for this software to combine them into an animated GIF.  You can also have online places make the image slices for you and this software takes care of combining them.  It only works with GIF files, and so you would first have to convert any other graphic formats into a GIF format.  You would have to load (open) a .jpg or .png or other format file with something like Paint (or any other simple graphics software), and do a Save As or Export to a .gif format.  If you do not have Paint (included for free on all Microsoft OS computers) or any graphic softwares, you can download GIMP (click) for free.

The HTML Code - How To Make Favicon Show On Internet Browsers And Bookmarks

Once you have created an animated GIF file to be used as the favicon, and uploaded the image file to your website's file system, you can put this code into any page of your site to cause the animated (dynamic/moving) favicon to be seen on the Internet browsers of visitors to your website.  This works for regular static favicons and animated favicons.

You can change the above "animated-favicon.gif" to the file name you are making use of and it's location within your website's file system. In the above case, the animated favicon file is named animated-favicon.gif and it is located in the images folder directly within your website's main folder.  For those who have sub-folder sites, then it would be within your sub-folder website's main folder, which is just a sub-folder of something like public_html or www folder.

Below are Favicon and/or Thumbnail size examples for reference:

144x144 Example Usage: On 3rd Generation iPad	128x128 Example Usage: NA	114x114 Example Usage: On iPhones
72x72 Example Usage: 1s-2nd Gen iPads	57x57 Example Usage: iPod, Andriod, iPhones, Other Smart Phones	48x48 Example Usage: Within multi-resolution .ico files, & softwares.
32x32 Example Usage: Within multi-resolution .ico files, & softwares.	24x24 Example Usage: Within multi-resolution .ico files, & softwares.	16x16 Example Usage: Within multi-resolution .ico files, & softwares.

TIP

When creating Animated GIF or image slices, start with a much larger size that is a multiple of 16 (such as 128x128), and then after you are done, shrink (scale down) the animated GIF or images slices to a 16x16 size.