How to Create a Favicon

How to Create a Favicon

While browsing the Web, you have probably noticed that many websites display a small graphic in the top of the browser window. This graphic is called a favorite icon or “favicon,” and done properly, it can contribute greatly to the appearance of a website.

To start with, you need a simple image file with roughly square dimensions. I created a screenshot of the front page of The Affluent Blogger, and pasted it into Photoshop Elements. I used the letters of the title to create this simple logo. I’m not sure if this is really the logo that I’d like to use long term, but it will do for now.

Create a Favicon

Create a Favicon: Original GIF

I like to use to create favicons. I’m sure that there are plenty of other tools for the job, but this one just works. Once you have the image file that you would like to use, navigate to the favicon tool, click “Import Image,” click “Choose File” and double-click your logo file. At this point, you can choose whether the tool should keep the original dimensions of the image or force it to be square. Click the “Upload” button. You should now see a close-up of the favicon, along with a simple set of tools to manipulate it. You can click anywhere inside the grid to change the color of that pixel.

Create a Favicon - Editing the Image

Create a Favicon - Editing the Image (Click for larger view)

A favicon is just 16×16 pixels, and that doesn’t give you a lot of room to add detail. However, this can also be a good thing for those of us who are not so graphically inclined. You can make changes to the image by picking up a color from the right side of the screen, or using the dropper tool to clone a color in the image itself. The “Preview” section at the bottom of the window shows what the completed favicon will look like when viewed in a browser tab.

Click the “Download Favicon” link when you are finished. A download window opens for the file “favicon.ico.” Save the file anywhere you like, and upload it to the main directory of your website (usually “public_html”). You may have to clear your browser cache to view the favicon on your own computer, but visitors to your website will begin seeing it immediately.

Comments are closed.