Favicons are easy on WordPress

Favicon: Your ID Badge on the Web

Favicon-AThe little icon in front of the URL in your browser address bar is not only a little ID badge, trademark or logo identifying your site, it also indicates a degree of professionalism on your part. If your site does not have a favicon it gives the impression that the site is just an amateurish job.

Favicon-V

The illustration shows how the favicon appears in different browser. The website is one of the CloudLadder demonstration sites.

Every one of your sites should have a favicon. If you are using WordPress, either a WordPress.com blog site or a hosted site using the WordPress.org “engine”, getting that favicon up is a very easy task. There is a good deal of care required in creating the artwork, but that is for another discussion. Here we are just concerned with the mechanics of installing the icon.

You need to have your favicon or logo artwork ready. It should be a square image at least 512 pixels on a side and in PNG format. It needs to be recognizable when reduced to the tiny speck of an image that we call favicon. As I said, details on the artwork creation I will cover in another article.

The process is different for the two versions of WordPress, so I will discuss the method in two sections.

Favicons on a WordPress.com site

On your WordPress administration site go to SettingsGeneral. Over on the right top you will see the option area for installing your Blog Picture / Icon.

Favicon-W-1

Click Browse to go to your computer to select the image. Then click Upload Image.

Favicon-W-2

The image will be displayed and the cropping tool will be shown. If your image is square, as illustrated here, it will all be selected so just click Crop Image. If your image is not square, select a square area to use, the click Crop Image.

Next you will see a page showing the “blavatar” in several sizes.

Favicon-W-3

That’s all there is to it. Easy, isn’t it?

It tells you “All done” and “Your blavatar image has been uploaded and you should seeing it appear around WordPress.com soon”. Actually other people will probably see it before you will, most browser store those little images so they don’t have to be downloaded each time you come to the site. A couple of refresh operations will get it showing.

Favicons on a hosted website using WordPress.org

If your site is a hosted site and you are using the “engine” from WordPress.org to create and manage your site, installing a favicon is a bit different, but no more complicated.

First you need to install the Jetpack plug-in. The favicon support resides in that package. Once installed and activated there is an additional small step.

Favicon-O-0

Go to the Jetpack Settings, scroll down and find Site Icon. Click Activate over toward the right.Favicon-O-1b

Then go to SettingsGeneral. Scroll all the way down and find Add Site Icon.

Click Browse and select your favicon image from your computer. Then click Upload Image.

Favicon-O-2

The uploaded image will be displayed with crop marks to let you select the image area to be used. If your image is square, all of it will be already selected, click Crop Image.

Favicon-O-3You will be shown the results momentarily. Your favicon is installed.

That’s it.

You now have a professional looking site.