Tutorial #2 - Creating & Uploading a Favicon

For this tutorial, I'll cover creating and uploading your own personalized favicon to your blog.

Creating the Favicon

Uploading a favicon can be a nice addition to your blog, and adds a touch of personalization. With only a few steps, you can replace the boring old Blogger favicon to your own.

Note: If your logo is square in shape, scroll down to the bottom of this post to find an alternate (and easier) option to saving your logo.

1. Saving your logo as a .png.

First, create a new artboard in your Illustrator file that has your logo. 

Select your logo and determine the size. 

If it's decimals or strange numbers, click the Constrain button between the height and width sizes to resize the logo but maintain the dimensions. 

If your logo isn't square, decide what size your artboard will need to be. Think of the edges of the artboard as the outline of the favicon icon on the webpage. Remember that the artboard MUST BE SQUARE in its dimensions, or otherwise you will not be able to upload your favicon. Usually, the more space your logo takes up, the easier it'll be to see. 

Move your logo over to the general area of the artboard and select the artboard in the Artboard panel. Select your logo.

In the top right-hand corner of the Align panel, clock the button and then Show Options to reveal the hidden options in the panel.

In the bottom right-hand corner of the panel, click on the icon, and select Align to Artboard.

This will allow you to center your logo on the artboard.

With your logo and the correct artboard selected, click Horizontal Align Center and Vertical Align Center. If you sized the two to match each other, your logo should be nicely centered within the artboard.

Go to File - Save for Web to pull up the window. Make sure the top bar in the top right corner says PNG-24, and change the size to about 20x20. 

Favicons are usually 16x16, but uploading it in any small size to Blogger will be okay, as Blogger will automatically resize it down to the correct size. 

Click Save at the bottom right corner of the window.

Uploading the Favicon 

Uploading your logo to Blogger is easy once you've saved the actual file.

2. Upload the .png to your blog.

Go to your Blogger, and go to the main page of your blog. Then, click on the Layout tab on the left side of the window.

The favicon gadget should be somewhere in your layout. For me, it's in the top left. 

Click Edit in the bottom right corner of the Favicon gadget. Click Choose File and select your favicon file. It should appear in the window.

Click Save and you're finished! It may take a while for Blogger to update the favicon on your browser window, so be patient if it doesn't immediately pop up. Here's what mine looked like in a Chrome tab. Depending on what browser you use, your favicon may or may not show up at first. I've found that Chrome usually updates the favicon quicker than other browsers. 

Other Option

Instead of resizing your artboard to fit your logo, if your logo is square in shape, you can move your logo into an Illustrator file by itself and use this method instead.

3. Save your logo without the artboard.

First, copy and insert your logo into a new Illustrator file. 

For this method, THE SIZE OF THE ARTBOARD DOES NOT MATTER. We will "delete" the artboard when we save the logo so we don't have to resize the artboard to what we want.

Go to File - Save for Web.

This window will pop up with options for saving the file.

Make sure the top bar in the top right corner says PNG-24, and change the size to about 20x20. Favicons are usually 16x16, but uploading it in any small size to Blogger will be okay, as Blogger will automatically resize it down to the correct size. 

In the Image Size window (where we just changed the size to about 20x20), un-check Clip to Artboard in the bottom right of the panel.

This will remove the artboard behind the logo and only take the object.

Click Save in the bottom right. 

Now, scroll up to find the directions for saving your new file to Blogger as your blog's favicon.