Let's Make a Favicon!

Greetings. Today we are going to use Flash to make an animated favicon. I assume you know what a favicon is or else you probably wouldn't be reading this, but just to be thorough I will explain. A favicon is a tiny image (16x16 pixels) that appears in the address bar to the left of the site address, as well as in the favorites/bookmarks folders in the visitors browser next to the name of the page they bookmarked. On this site the favicon is the little "Two Way Traffic" road sign.

 

Assumptions:

For this tutorial I will make a few assumptions. First I assume you have Flash 8 or higher. While this tutorial will work for most versions of flash and there is very little ActionScript (AS) code that we will be using, the effects we will use instead of ActionScript are not available in older versions. Also note you can do this without using any AS at all, if you need to - like if you are using Flash 5 or something silly like that. Second, I assume you know your way around Flash and what each button we will be using does, or at least where to locate the buttons needed as well as the properties tabs, alignment tabs, actions pane, etc. If you do not, please read the 3 part tutorial entitled "The Flash GUI". I will also assume you have an idea of what you want your favicon to be. It can be as detailed and complex as you want to make it, it can also be as simple as you want to make it.

 

What we will be doing:

We will be making an animated icon similar to this one:

 

Let's Begin!

► First we need to open Flash and create a new document. If you are in the good habit of naming and saving your files as soon as you start, do so now. The name doesn't matter, but for cohesion, let's name it "favicon.fla" and give it a good save.

►Next we need to alter our document so we can begin the work. Set your background color to whatever color you want as the background of your favicon. I am using black (#000000). Note: because we are making an animated file there will need to be a background color because a gif file will not use transparency across frames. If you are using this tutorial and making a static image, you can use the .png file with a transparent background.

► The next alteration is the stage size. Set it something square and divisible by 16. I am using 160px X 160px. This will change again later, so we need to prepare for that now.

► Finally the frame rate is going to be up to you. It will be adjusted during the final publishing, but take a note of what it is if you do not change it. I set mine to 30.

► Here you have a choice to make, import an image to manipulate, or hand draw your own. I suggest to hand draw your image if you can. Drawing will reduce the overall file size as well as ensure the resizing doesn't distort the image. However, the choice is always yours. For this tutorial though we will be drawing the smiley face. If you do import your image, ensure you size it correctly and make the image into a movie clip so we can animate it.

► To draw our smiley face we will be using the Oval tool, a yellow fill with no outline. See the image below to see these options selected in the tool bar.

Hint: To quickly access the Oval tool press "O" on the keyboard. Pressing "R" will choose Rectangle. Pressing either option again will switch between normal (blue) and primitive (red) options.

 

► Now we draw the circle for the head and use the oval tool with a different color for eyes and a mouth. For my mouth I created an ellipse circle and used the black arrow tool to flatten it into a smile shape. Once the face is made we need to turn it into a symbol. Using the F8 key will allow us to do just that.

 

► Now, here is where your frame rate comes into play. Since I chose a FR of 30, I am going to create a new keyframe at frame 30 (equals 1 second, nifty). After you create your second keyframe click anywhere in between the first and last frame. On the Properties panel you will find the Tween drop down menu, and after selecting "Motion Tween" you will have it's options available as well. Ease: if you want your image to slow to its stopping point (the last frame) adjust the Ease up from 0. If you want your image to rotate without a noticeable slow down or stop, leave Ease at 0. Next pick a direction (Clock Wise = CW, Counter Clock Wise = CCW) Auto lets Flash make the choice to path and will most of the time make your image rotate on the wrong axis, making the image distorted or disappear. The "times" input box is how many times to rotate in that 30 frames. I choose one. A one second rotation is good for this small of an image. Any faster and it will be blurry, and depending on your detail, that could be very bad. Snap, Sync and Orient to Path should be left unchecked. The effects could be disastrous to your image when sized down and you would have an unexpected result for a final favicon.

 

► Now that we have the image drawn and rotating in the time line, it is time to make it favicon size. First the stage needs to be resized. 16x16 is the standard pixel size of a favicon (this is why we set our stage size divisible by 16 earlier).

 

► Now you will have a tiny stage and a larger smiley head. So we need to adjust the size of our smiley as well (again, divisible by 16). The circle I drew was 114px X 114px. Since we reduced the stage by 10 (160 / 10 = 16) I did the same to my smiley head (114 / 10 = 14). There are TWO (2) spots you need to resize... frame 1 and the last frame. Be sure to re-align your image (both frames) back onto the stage, which probably moved top left when you resized it in the last step.

 

►Almost done! First test your movie to ensure everything is lined up and rotating. When it is save again and choose "File" then choose "Publish Settings" in the window that appears UN-check Flash (HTML will disappear when you do this) and CHECK "gif". A GIF tab will appear when it is checked. Switch to the gif tab and make your setting match those in the image below.

 

► After that click the publish button and we are done with Flash! Only a few more steps to have an animated favicon for your site!

► Right click on the image that Flash created on your Desktop (or where ever it was saved) and choose rename.

 

► It is highly possible you will get a warning message about renaming a file extension, you can ignore this message. Rename your icon: favicon.ico (remove the .gif so there is nothing there except favicon.ico).

 

► Upload the favicon to the root directory of your server. That is it. If you want the favicon to be found faster by all modern browsers add the following line to the head section of your pages:

<link rel="shortcut icon" href="http://yoursite.com/favicon.ico">

That is all! You are done and you now have an animated favicon for your site made entirely in Flash and all by yourself! Congratulations! Feel free to link your site in the comments section to showcase your Animated Favicon for everyone to see!