the pixel boutique blog web print logo design

You know what a Favicon (short for “favorite icon”) is, right? its that little tiny square thing at the top of the address bar when you visit a web page. It also appears when you save a web page in your bookmarks. It replaces that plain old white piece of paper with a bent corner. You know the one…

So how do you create a custom favicon? Well, I’m so glad you asked! Its really not that hard.

First you need to creat your image. Its simply a very small image, saved in a file format called .ico. There are plenty of favicon generators out there, but I like to do it myself (with PhotoShop’s help).

(Note: If you are on WordPress.com, skip all of this part and scroll down to the WordPress.com section.) In your favorite photo editing application, select a square image you’d like to use and crop it  (To use PhotoBucket, you have to contact them and request an .ico file to be uploaded). Keep in mind that this is a VERY small size, so keep your icon simple. Sometimes one little section or letter or shape will be more effective than a large, detailed logo. Select “Save for web” and save it as a .gif image at a size of 16×16 px.

Next, see if your application has an .ico format when you choose “Save As”. The later versions of PhotoShop do, and I believe PhotoShop Elements requires a plugin. You can also try the Mac or PC file converters, that create an .ico file for you. Make sure your file name is “favicon.ico”. Otherwise, it wont work in the end.

So now that you have your cute little .ico file sitting there, what you do with it next depends on what blogging platform you are on.

Blogger/Blogspot – I just recently learned that you can indeed add favicons to your Blogger blog. Hurray! You’ll need to first upload your .ico image to a photo hosting service, like PhotoBucket. Then copy the URL (or address) of your file. Then go to your Blogger dashboard, Layout > Edit HTML. Up near the very top you will see a <title> tag that looks something like this:

<title><data:blog.pageTitle/></title>

Right under that line, insert this code:

<link href=’your image url‘ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/> (making sure you enter your image’s URL where indicated.)

Worpdress.com – If you are on WordPress.com, life is simple for you, my friend. WordPress has cleverly built in a photo editing and converting application, right in your settings. Simply go to Settings > General from the dashboard. On the top right, you will see a box called “Blog Picture”. Simply browse to the image you want (it must be in .jpg or .png format), click upload and crop as needed. That is it!

TypePad – Simply upload your .ico file in the Home folder by going to the File Manager > Control Panel > Files page. Easy enough. But for more information, see the TypePad documentation.

WordPress (self hosted) – A little more involved but not too bad. Upload your .ico file to your media library, noting the URL address. Go to Appearance > Editor  and select the “header.php” file. Navigate to the line near the top that looks something like this:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Insert this code under it:

<link rel=”shortcut icon” href=”yourimageurl“>

Sometimes it takes a while for the icon to show up. You may need to restart and refresh your browser.

Adding a favicon is a simple way to add an extra little touch to your blog!