WordPress Favicon for a Website

What is a favicon? A favicon is a small graphical image that is displayed next to a web page title in a web browsers tab. It will also appear next to the web page address in the web browsers address bar and in a browser's favorites list for the user. A favicon helps the branding and identity of a website. Therefore it is a good idea to set up a favicon. It is common for the favicon to use a company logo, a symbol or an interesting graphic. The favicon is very small so a simple design with little detail works best.

The favicon was introduced by Microsoft with Internet Explorer (IE) in 1999 and other browsers soon followed. Originally an icon file (.ICO) had to be used for IE and different formats for other browsers. Now common graphic formats are supported in most browsers.

In early versions of WordPress a favicon needed to be set by modifying the files of the chosen theme. Recent versions of WordPress allow a graphic to be uploaded directly for use as the favicon. Here is a quick run down on setting the favicon for a WordPress based website.

The first time WordPress is accessed after a new install a Welcome to WordPress message is displayed. This provides a Customize Your Site button.

If this message has been closed the Customize option can be accessed via the Appearance menu.

Under Site Identity click Select Image.

Select the image file to use as the basis of the favicon (or drag and drop it). The favicon is generated from a 512 by 512 pixel image (smaller images can be used but using the recommended size provides the best quality).

Once the image is loaded press the Select button. Here a simple picture of a cartoon monkey is used.

The image was selected from openclipart.org. If you need a simple picture or symbol openclipart.org is a good source because all images are in the Public Domain. The free graphics programs Inkscape, GIMP and paint.net are useful for manipulating image files. The image was exported from Scalar Vector Graphics (SVG) format to a 512 by 512 pixel image using Inkscape's Export PNG Image option.

Finally Save and Publish the image.

Load the web site in a browser to see the new favicon in action.