Sunday, November 2, 2008

Tools: Make and Install a Favicon the Easy Way

To me, a blog doesn't look finished without a favicon (the little icon you see before the url below).
Creating and installing one is easy (I promise!). Here's how:


First, you'll need a teeny, tiny image that's 16x16 pixels. It needs to be in .ico format. You'll may also want one in .png format to be sure that your favicon will show up in all browsers. Don't have one or both? No problem.

First: Create a Favicon
Favicon.cc lets you draw a favicon online and download it in .ico format to your computer. Think simple when you're designing your favicon. There's not room for much in a square image this tiny.

You can also upload the 16x16 image you already have and convert it to .ico. If you're not feeling artistic and want to create a favicon with text, it's easy to do at antifavicon.com. Whatever you do, just name your file "favicon.ico".

I like to be sure all browsers are going to recognize my favicon, so I also have it as a .png. You can convert your new .ico file to a .png file and save it to your desktop in a couple of seconds at converticon.com. Name it favicon.png.

Second: Host your Favicon Online
Now that you have a favicon named favicon.ico and one named favicon.png, you're ready to put them online. You'll need the direct links to your images for the code you'll be placing in your template in the next step, so keep them handy.

Third: Paste this Code into your Template
1. Blogger users: From your Blogger.com Dashboard go to Edit Layout --> Edit HTML.
2. Find </head> in your template and make some space right above it (and beneath ]]></b:skin>). I like to use my browser's "find" feature (command F on Mac) when I'm searching for a specific tag or line of code.
3. Copy and paste this the stuff in red:
<link href='http://yourimageURL.png' rel='shortcut icon' type='image/png'/>
<link href='http://yourimageURL.ico' rel='shortcut icon'/>
4. Change "yourimageURL" in each line to, well, your images' URLs.
5. Preview, and you should see your favicon in your browser.

If somebody could help me out by providing Wordpress instructions, that would be great!

Feel free to ask questions in the comments if you have them.

RSS