Tek Eye Logo

Tek Eye

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.

Example of a Favicon

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.

Welcome to WordPress

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

Under Site Identity click Select Image.

Site Icon - 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).

Select Image for Favicon

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

Select Uploaded Image

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.

Editing in Inkscape

Finally Save and Publish the image.

Save and Publish Uploaded Image

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

WordPress Favicon Set

Author:  Published:  

ShareSubmit to TwitterSubmit to FacebookSubmit to LinkedInSubmit to redditPrint Page

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

 This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Articles on:

Android Programming and Android Practice Projects, HTML, VPS, Computing, IT, Computer History, ↓markdown↓ CMS, C# Programming, Using Windows for Programming

Free Android Projects and Samples:

Android Examples, Android List Examples, Android UI Examples

Tek Eye Published Projects