Category Archives: Uncategorized

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.

Making a favicon for your site

Those little icon you see in front of the URL in the browser address bar are called “favicons”. On you own website you might want to feature your own. How do you do that?

First you need to make up some artwork. Favicons are square, so your art should be also. Favicons are small, so your art should be simple and made of bold features so it will be recognizable in that tiny image.

cloudladder-logo-HEAVY-SQFor most sites you need an ICO file, a file that has the extension “.ico” and is in that format. Here is a site that will take your art image (usually in a JPG format) and make it into a favicon. You can even do editing of your art on that site: X-Icon Editor Just follow the instruction on that site.

We started with a “heavied” up version of our logo. This way no additional editing was needed.

FAvicon-03

On that site you use “Import” to upload your art and “Export” to download your finished favicon. The normal name for the file is “favicon.ico” and it contains versions in different sizes.

How do you use the favicon and get it to show on your website? That is a topic for another post.

Using Windows Live Writer to manage website

 

Windows Live Writer is part of Windows Essentials and is the best wysiwyg (what-you-see-is-what-you-get) editor for blogging. Many websites use WordPress as the site base. Together these tools make setting up and managing a website fast and easy.

This website, CloudLadder, is bases on an installation of the blogging engine from WordPress.org. It is installed in a sub-folder on a site hosted by 1and1. The domain name is pointed to the sub-folder so to all the world this looks like a normal website.

Live Writer may be downloaded from the Microsoft Windows Essentials site for Writer.