How to create an animated favicon for your website
We recently didn’t have a favicon for our publications’ website, FHNtoday.com, and had been looking for a way to get all three of our three major icon images into one favicon to display on the top of our website.
We found that there was an article on JEADigitalMedia.org about how to make different favicons for your website and we took a look. We ended up using the HTMLkit.com favicon generator to make our favicon for the new FHNtoday.com with our new logos. On HTMLkit, there was a way to make a static image favicon which just stayed at the top of the website, or an animated one that scrolls through the images you select and makes a nice, simple slideshow type favicon at the top of the website. By just clicking on the “customize” button underneath the ‘Animated Favicon’ window, we were able to simply add all three of our images. It allowed us to have some other customization options as well. Since it was free, all we had to do was download the package, upload the animated GIF via FTP onto our server, and insert the necessary code into the header.php to get it up and running.
We ended up deciding on a seven second animation so that it wouldn’t be too distracting or repetitive when changing pages. Overall, we like it and it’s a fun little addition to the site.
by Dan Spak – Dan is a senior and the Web Editor for FHNtoday.com, the website of the student media at Francis Howell North High School in St. Charles, MO.