Build a small business empire you can be proud of

Welcome to Microblogger! First time here?
I know there's a lot going on, click here to Get Started.

4 Comments

How to Create a Favicon

Credit: lwordish2010

Credit: lwordish2010

Favicon is a portmanteau that combines the words favorites and icon. It’s the little icon that appears in your tabs when you browse, it’s what is saved when you add a site to your favorites, and it’s a very simple, yet useful, way for you to identify your site at a glance.

Our current favicon is a very simple Greek letter μ – which is the Metric prefix for micro. I’m a bit of a nerd and until I can think of a more clever icon, μ will do!

How do you create a favicon? It’s a 16×16 or 32×32 image file with an .ico extension. You need to upload it to your site and then reference it in the section of your pages.

Making a Favicon

You have two options for making a favicon – draw it yourself or shrink an existing image to the 16×16 constraints. 16×16 is not much room to work with and most favicons are very simple images. A picture of your face, for example, will probably not be a great brandable favicon.

Here’s how my profile picture would look if shrunk down to 16×16:
jim-wang-shrunk

And here’s how it looks on a tab:
myfaceasfavicon

You can see the color and that it’s a face, but it’s difficult to recognize me. You could replace someone with short dark hair and no one would notice. That’s not a good favicon.

Instead of a photo, consider looking for an icon or drawing one yourself. My graphic design expertise is limited to MS Paint (Ian is my graphics design guy and he made the badge for our Lifetime Income Blog) and that’s what I used to create the favicon for Microblogger. It’s just text on a white background.

Installing your Favicon

When you save your icon, you can save it as any type of image (JPG, PNG, GIF, etc) though I think PNG will most likely be the smallest filesize. Then rename the extension of that image to .ICO (you don’t have to rename it to .ICO – browsers can use any filename, we rename it so you know it’s meant to be the favicon).

Now you can upload the file to your site. If you have FTP access, upload it to the root public directory of the site (usually an /html/ directory). If you are doing it through WordPress, log into your admin dashboard, hover over Media in the sidebar and click Add New. Drag your favicon into the “Drop files here” box.

After it uploads, click Edit. To the right, you’ll see a gray box named file URL, copy that URL.

Next, hover over the Appearance tab and click Editor. Load up the Header (header.php) file and look inside the code for the tag, it should be near the top. Right underneath it, paste the following:

<link rel="shortcut icon" href="[FAVICON LOCATION]" type="image/x-icon" />

Replace [FAVICON LOCATION] with your favicon’s location and update the Header file.

The next time you load up your site, look in the corner for your favicon. If you like how it looks, you’re done. If you don’t like it you can always edit it until you do. 🙂

What did you use as your favicon?

Sharing is caring! Tweet about this on TwitterShare on Facebook0Share on Google+0Buffer this pageShare on LinkedIn0Share on StumbleUpon0Email this to someone
The following two tabs change content below.

Jim

In 2005, I founded a personal finance blog (Bargaineering.com) that became successful enough that I quit my career as a software developer in the defense industry. It is my goal to share everything I learned so that you can do the same - build an online business that let's you pursue your passion.

4 responses to “How to Create a Favicon”

  1. Martin says:

    This the most productive way you can spend 15 seconds aside from losing your virginity!

    The best part is that there are many sites online that shrink the image for you. Most themes allow you to easily upload a favicon. And you’re set.

    Funny note: one of my readers complained that they couldn’t differentiate my site, so they sent me the favicon!

  2. John says:

    Perhaps this isn’t the most appropriate place to point this out, but I’m currently using an up to date version of Google Chrome on Mac OS 10.9. I’ve got seven different sites open in seven different tabs and Microblogger is the only site that doesn’t have a visible favicon displayed. This is the first I’ve ever heard of someone using a PNG for a favicon, so maybe that’s something that’s an anomaly for Mac users (I’ve loaded Microblogger.com in Safari and Opera for Mac as well and still no favicon) or maybe it’s another issue all together.

Leave a Reply

Your email address will not be published. Required fields are marked *