How to Make an Animated Favicons

A favicon is the icon which is found in most URL address bars and which may be duplicated in bookmarks, on bookmark tool bars, and tab bars. An animated favicon is a series of single static favicons which are slightly changed, and when run in series are animated, like film, and are put on one's website. Animated favicons are brand new and may only work with the latest Firefox, some Mozilla and Netscape browsers.


  1. Image titled Make an Animated Favicons Step 1
    Create a folder on desktop named 'Animation'. Put in it your favicon maker such as 'Edit32' or 'IconArt'. Make any number of favicons; keep it simple to begin with, such that each accomplishes the change on wishes like 1 2 3 4. In this method, these must be saved as (.gif files) and give each a name in series. If they are in (.ico) one needs an extension converter like IrfanView.
  2. Image titled Make an Animated Favicons Step 2
    Get a gif Animator Compiler, or this case you may want two. The compiler puts each of your single favicon files into a single gif file, which is to be put on the web page server. This is a completely new field so programs and information are scarce. Download the free '11view 3.0a' for viewing and positioning your favicon series. However it does not work well for animated on-line favicons, and does not loop as continuous play. But it is great for viewing and organizing your favicon animations and assigning them times, where 200 is about a second.
  3. Image titled Make an Animated Favicons Step 3
    Download free 'UnFREEze 2.1' as the actual compiler. Slide your favicons in proper order into the window. Highlight each and assign times to each frame, check loop or not, compile and name and save to your folder.
  4. Image titled Make an Animated Favicons Step 4
    Paste this compiled gif file into your html folder in html editor. It can be put in your favicon folder or a new one created for animations. Address each html page in which it is to appear. The static favicon code is left in place since many browsers don't show animations as <link rel="icon" href="Folder/Favicon.ico">. Underneath is placed animation code such as <link rel="icon" href="Folder/Animation.gif"> or <link rel="icon" href="Folder/Animation.gif" type="image/gif">.
  5. Image titled Make an Animated Favicons Step 5
    On FTP transfer protocol, transfer or create Folder for .gif file and transfer it and .gif file to server-side. Transfer html pages containing animation code to server.

Article Info

Categories: File Manipulation