A Quick Guide on WordPress Favicon and How to Install It

fav icon

Let’s start out with, “what’s a WordPress favicon?”

WordPress defines a favicon (short for “favorite icon”) as an icon that’s associated with a website or page and is intended to be used when you bookmark that page. In other words, the web browser connects that favicon to the URL in the browser’s bar, on tabs, in bookmark lists and elsewhere to help easily identify that site. It’s also an application icon for mobile devices.

The favicon is typically a 16 x 16-pixel square graphic and is saved in the root directory of the server as favicon.io. A WordPress favicon can be used with any WordPress site on a server that allows access to the site’s root directories.

Creating Your Very Own Favicon

A WordPress favicon can be created with GIMP or any graphics/image editing software that allows files to be saved as .ico – or with an online service that allows you to create a WordPress favicon for free. The image should be a good fit for your site’s content and audience, so bear that in mind when selecting your WordPress favicon.

favicon tech guy

To prepare the image, crop or add space around the image to make it square. Resize it to 16 x 16 pixels, then just save as favicon.ico. It’s even easier using an online service such as Faviconer.com or Dynamic Drive – the site will walk you through the process, so just follow the instructions provided and then save the favicon.ico image to your computer.

To install your WordPress favicon, upload the new favicon.ico file to the main folder of your current theme (with an FTP client). Next, upload another copy of the favicon.ico file to your site’s main directory, which will then make sure the favicon is displayed in your subscribers’ feedreaders. For some older browsers, you might need to edit your page header via a child theme. Remember to keep a copy of the parent theme’s header.php file in the child theme. Go to your WordPress Administration Screen and click on Appearance, then click on Theme Editor. By clicking on the file called Header or header.php, you can then edit the file. Look for the line of code that starts with <link rel="shortcut icon" and ends with /favicon.ico" />. You can either overwrite this, or add this section of code below the <head> HTML tag: <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

A Word About WordPress Favicon Plugins

There are a number of plugins for adding favicons to your WordPress site, so let’s do a quick roundup:

Shockingly Simple Favicon

You can easily change the favicon of your blog with this plugin, without having to touch the theme files. In other words, if you want to change your site’s theme these changes are set so that there’s no tweaks in theme code involved.

icons

EZ Favicon

This simple favicon plugin allows you to upload whatever image you want, any size – the plugin then resizes it, converts it to the proper .ico file format and automatically adds the correct html code to the header.

Heroic Favicon Generator

This is another plugin that can automatically generate the favicon of your choice, either from your own images or from the plugin’s media gallery. It can even generate and support favicons for different kinds of devices.

RealFaviconGenerator

This one’s maybe the simples of all to use. Just install the plugin and go to Appearance>Favicon, select your image from the Media Library and click “Generate Favicon.” You will then be redirected to RealFaviconGenerator to edit the favicon, then back to the WordPress Dashboard. From there, the favicon will be installed automatically.

Why Should You Use Favicons?

If you’re like most web users, chances are you’ll have multiple tabs open on your browser at any given time (c’mon, admit it, you know you do).

Most web users don’t think about the favicon very much, but how else do you make the tab with your page stand out when the user looks across the top of the browser? The favicon has a subtle – but important – job in establishing a brand with your website. After all, it can help tell a user that they’ve come to the right place with your site.

More than that, however, the WordPress favicon serves the purpose of saving a user time on the internet. We’re all geared more toward identifying an icon or image of some sort at a glance, rather than reading text.

With this in mind, the favicon is even handier when it comes to quickly singling a site out in a long column of bookmarks. Just make sure that the favicon you go with is the right fit for your site’s audience and content, and you can go about adding one to your WordPress site.

Leave a Reply