How to Create a FaviconFavicon 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
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:
And here’s how it looks on a tab:
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 thetag, 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?
Latest posts by Jim (see all)
- Should I Open Links In New Window? - December 4, 2013
- How to Force Facebook to Show Image Previews - December 2, 2013
- Thank you for reading — what do you want to see me cover next? - November 27, 2013