Adding a standard favicon to a blog is a good way to make it instantly recognisable, but this can be taken further by adding an animated favicon. Unfortunately not all browsers will show the animated favicon but for those that do such as Firefox its worth making the effort to add an extra touch of style to your blog.
Creating The Favicon
The first thing you'll need is a small animated gif to use as the animated favicon, and this can be created in a number of ways. If you'd like to create a rotating logo style gif for your favicon then as a SL resident why not make use of the tools within Second Life.
As an example, the image above shows a cube created in Second Life with a texture of the SL-Inspiration logo added to all the sides. If a rotation script is added to the cube, then this can be used as the basis for an animated favicon. Your own animation doesn't need to be a cube, in fact it can be anything you want to create, although it pays to remember the animation will eventually have to be no bigger than 32 X 32px.
If you don't have a rotation script to add to a prim then copy and paste the script below and add it to the object's contents.
defaultChanging the value of the '1' will change how quickly the object will rotate.
{
state_entry()
{
llTargetOmega(<0,0,1>,0.6,PI);
}
}
Recording The Animation
If you are creating the animated gif within Second Life then possibly the most effective way to record it is with gif creation software rather than using something like Fraps. It will just save a lot of time and effort.There are a number of gif creation tools available, some are free and some cost. My personal choices are firstly GifCam which is free, and Giffing Tool, which is also free if you don't mind small credit text at the bottom of the gif, otherwise pay what you want for it to remove that text. Of these two Giffing Tool is much more convenient to use and worth paying a small price for to remove the credits, and it is the software used in this tutorial.
Before starting up the gif recording software it can be helpful to rez a prim in front of your rotating cube and focus the camera on it, then before recording make the prim transparent. If you need to refocus on the prim you can use the viewer's hide/show transparencies feature [Ctrl+Alt+T]. I find using the prim is an easier way of centering the camera on the cube, which can be tricky when its rotating. (The image above doesn't show the camera focused correctly, the angle has been changed to show the arrangement of the cube and the prim).
When you are ready, start up (in this instance) Giffing Tool and a window as above will appear. Click on New and a rectangle will appear which can be sized to the area of the screen you want to record. Hold down the left mouse button and drag to create the area to be captured. Once the left mouse button is released Giffing Tool will start recording. To stop recording hit the Esc key on the keyboard.
It may take a little while for Giffing Tool to load the recorded gif, but it will eventually look something like the image above. The important areas have been highlighted in different colours.
The yellow area shows the play/stop/rewind controls.
After recording your SL cube the resulting gif will probably contain far too many frames to make it practical to use as a favicon. The area highlighted in red shows the tool for removing frames. A typical use would be to remove every other frame from the entire gif. Ideally the maximum number of frames should not exeed 60. Also, the animated gif should not exceed 100kb if its to be used as an animated favicon.
Once frames have been removed from the gif you can test how it looks by using the playback tools. The chances are it will look wrong, but this can be adjusted by changing the frame rate, highlighted in dark blue. Removing frames and adjusting the frame rate can be something of a balancing act.
The next step will be to crop the animated gif to remove any unwanted background space. The more of the gif the logo takes up rather than the background the clearer it will be as a favicon. To remove some of the background, use the crop tool, highlighted in pale blue. Click it and drag it around the area you want to keep. It can be adjusted after you release the mouse button.
The last step is to resize the animation to use as a favicon. The prefered sizes are either 32X32px or 16X16px. Use the area highlighted in purple to resize the animated gif. Before you do so however save a copy of the gif full size in case you want to make other changes later. It is also worth mentioning there is no undo button in Giffing Tool, so saving a number of gifs (with different names so they don't overwrite each other) maybe a good idea.
Finally save the animated gif by clicking on the icon highlighted in green, then name the gif and click OK.
The appearance of the animated gif can be tested by right clicking on the saved gif, selecting Open With and then choosing your preferred browser from the drop down list.
Adding The Animated Gif To Blogger
Once you are happy with the animated gif you've created its time to add it to blogger as an animated favicon.1/ Firstly, upload the animated gif to your favourite image hosting website such as Photobucket, then copy the code for direct layouts. Now paste it into Notepad (or similar).
2/ Now paste this code also to Notepad:
<link href='YOUR FAVICON URL HERE' rel='icon' type='image/gif'/>3/ replace 'YOUR FAVICON URL HERE' with the direct layout code, keeping the quotation marks, then copy the entire line of code you just edited.
4/ Go to the Blogger Dashboard and select the template option. Make a backup of your template just to be safe.Then click on the Edit HTML button.
5/ Just below the Meta content tags towards the top of the template paste the favicon code, then click the Save Template button. Your animated favicon should now be visible in your browser when you next view your blog. Thats all there is to creating an animated favicon for your blog!
Extra Information
A rotating cube is not the only possibility for an animated favicon as the above gif demonstrates. If this is something you would like to explore, then you'd need to look at other software options.
One reasonably priced option is Xara 3D Maker which after a cursory look seems good value. However, if all you want to create is one animated gif, it might not be too economical.
A very good website that allows you to create animated favicons online is conveniently called Animatedfavicon.com. It won't create an animation as stylish as the one above but it will allow users to upload a logo that will be transformed into a favicon with scrolling text. Follow the onscreen instructions to create the favicon then scroll down to the 'Get it now' button to download.
The animated gif will be downloaded as a zip file. Once its been uncompressed look for the gif file in the folder, then add it to your favourite image hosting site. Then use the direct layout code as described above.
If you would like a personalised animated favicon created especially for you and your blog then feel free to contact me and I will be happy to discuss what you would like. But for those who would prefer to get creative, enjoy adding your own favicon inspirations to your blogs.
