How To Create a Favicon using Pages

Although there are many ways to get a favicon (ie, upload an image and have it spit out an .ico file) I have not come across many articles on actually creating a SIMPLE (that being the keyword) favicon. To be honest, anything can be a favicon. If you had a picture of a horse you could use that. However, I’ll stick to something a little more universal as my site does not traditionally dabble in equestrian topics.

First, a little history.

“A favicon (short for “favorites icon”), also known as a page icon, is an icon associated with a particular website or webpage.”
~ Wikipedia

Favicon icons are used for bookmarks, appear in tabs making it easier to pick a site out in a sea of tabs, appear in the address bar, and are often snatched for use on other sites in blogrolls.

Using Pages

Let me start by saying that you can use just about any image editing software to do this- such as iWeb, Photoshop, or event MS Paint (shudder). But, you clicked the link that said “How To Create a Favicon Using Pages” so that is what you are about to witness :-). I like Pages because it’s simple to create and add objects, edit text, and it’s fairly easy for a beginner to just create something without having to think of layers, vectoring, etc.

Without further ado…

Launch a blank page in Pages

Start with a nice sheet of white paper (blank document). This is where you will create your image.

 

Select a shape

As I said earlier- anything can work for a favicon. I want something simple- a circle with my initials “cj” in the center to represent cjupin.com. I could have used a square, rectangle, arrow, or liger but I chose a circle. Get over it.

 

Size up the shape

You will need to make the shape (again, I’m using a circle. Following?) a little larger. Click the circle and drag one of the corners to scale it vertically and horizontally.

 

Change the color

Now, unless you want a pea green favicon you are going to need to change the color. Click the inspector icon and then the pea green color and pick out something more suitable to your taste. Since there’s a decent amount of black on my site I am going to use that as the color of the circle.

 

 

Type something

If it was not added automatically- click the circle and then select “Text Box.” You will probably want to align it to the center. I’ll type “CJ” as promised. I am original.

 

Also, using the inspector you will probably want to change the color of the icon (Inspector->text tab). I thought about typing “colour” to make you think I was European- or just eccentric. However, I did not want to fool you. So, I went with my native “color.” At any rate, select the inspector again and change the color to something pleasing. I am using white for the text since the background is black.

What the font

Yes, I am witty (not). Notice now that your text is too tiny to fill the circle. You will want to resize your text either using the inspector, the text size drop-down presets, or the font panel. 96 is a tad small so I went with 100. Also, I’m a fan of Helvetica so I went with that. To be honest, it’s going to be hard to discern the font when it’s that small in the browser but it’s more of an anal-retentive thing.

Moving on.

I also changed the inset margin to 85 to help bring the text down into the circle.

 

Grab Time

Now, using your favorite (or built-in) screen-capturing tool you will need to make a copy of the image. Now, if you were using photoshop you could export ONLY the image and would be super-perfect. However, you want simple, right? So just copy it! Yes, there will be a little white around the edges of your image. However, this will not really be a problem since your address bar is white- remember? Get over it, really.

Now, you can either use Leopard’s built-in “Grab” functionality (which works great) but I’ll use Skitch (my personal favorite) since that is what I am using to make this tutorial.

Select the image and try to eliminate the white space around it. When you’re done save it to the desktop as a .png, .bmp, or .jpg file. Personally, I have only used .png but I know the other two will work.

 

Convert image to favicon

Almost done! The hard work is over and now it’s time for some automagical processes to kick in. I use a site that can automatically convert the image into an .ico file. Using the site I have listed (or a personal favorite of your own) upload your image and select “generate favicon ico.”

File selected:

After generating- select download. Notice you can preview your favicon now. Also, you can download the animated one if you’re a tool and still using dial-up via AOL. Sorry, that was mean. Maybe you just like stuff that moves and grabs your attention. What, are you creating a community website for your great-aunt’s assisted living home? Think that would get everyone’s attention? Sad. Very sad.

 

The above site downloads your image as a zip file. Uncompress it (using either the built-in tool for Leopard/Windows) or some other application like “stuff it.”

Pull this icon onto your desktop for easy access. Make sure your icon is labled “favicon.ico”

FTP your icon

I really, really, hope you have heard of FTP. I mean, if you are creating a site you should know about FTP. Otherwise, how have you been maintaining it? Well, I guess you could be on a blogger account..oh well. At any rate, I won’t go into the specifics on how to use FTP but some good ones for OSX include Transmit, Fetch, or Cyberduck (the latter being free). As a side note- did you notice how all three of those sites have custom favicons? I bet you didn’t. Back to FTP…I use Transmit, personally.

All you need to do is drop the new icon into your root directory and upload. For me, since my site is cjupin.com- I need to upload to this folder (not any subfolders). Make sense? If you already have a favicon (which makes me wonder why you are reading this tutorial) then you’ll want to replace it with your new one.

The root directory:

 

Replace your favicon.ico file if one exists (don’t be afraid if you see this warning). Again, you will ONLY see this warning if you currently have a favicon set on your site. Otherwise, it should transfer without this.

 

Now, head over to your site (I think I’ll plug cjupin.com one more time here). Your browser may already have the favicon loaded. If not, hit reload a few times (for safari, it’s command + R, for IE it’s ctrl + R).

Voila! Your favicon will now be seen by anyone who visits your site, bookmarks it, or follows you via RSS. Just another way to stand out in the crowd.

Now, go forth and make way better favicons then I did. Leave a comment if you have another tip, have a question, or wish to berate me on my lack of technique and style.

Enjoy!

Update: Josh suggests The Unarchiver for your uncompressing needs over StuffIt. Vodka tonic. Do it. Do it.