How to Randomly Rotate Favicon Images in WordPress

The humble favicon serves an important purpose. It makes your site identifiable in bookmarks or on a favorites list. But what if you want to shake up your site identification and rotate your favicon?

I don’t mean rotate as in spin, but rather rotate as in a number of different favicons that change randomly. Does that sound weird enough to be interesting? Good! I’ve got just the WordPress favicon plugin to do the job. It’s called the Favicon Rotator, and we’ll put it to work in a minute.

But First, a Question

Why do we use favicons anyway? Who’s big idea was it?

It might surprise you to know that the innovative favicon was created by the aggressively non-innovative Microsoft Corporation. Okay, granted, Microsoft may well be innovative in some ways. But when it comes to the internet and the web, they were always better followers than leaders.

But they identified a problem with browser favorite lists and came up with a simple way to fix it. If the list of favorites in your browser was long, it could be difficult to find a particular website. The favicon made favorites lists more useful. And it gave website owners a way to identify or brand themselves in those lists.

After all, people often associate imagery over text when it comes to brand identification. This includes websites.

Soon, Internet Explorer began displaying the favicon next to the address bar in the browser. These days, these graphics appear mainly in the browser tab and in your browser’s bookmarks. We take them for granted, but as a site owner, you still have to give them some thought.

Before You Can Rotate a Favicon You Have to Create the File

That seems like a straightforward task, doesn’t it? A favicon is just a 16 x 16-pixel image after all. But the favicon file format, .ico, is a Windows format. So creating your own favicon image hasn’t always been easy. Most graphics programs required an extension or plugin to save an image in the .ico format.

There are websites that will convert 16 x 16-pixel images to .ico from most other image formats. They’re handy for one-off favicon generation. But the plugin we’re about to cover will not only rotate your favicon but it can create them, too. Just upload an image and let the plugin do the rest.

Enough talk, let’s get down to business.

Installing the Favicon Rotator Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter, “Favicon Rotator.”

search for the WordPress Favicon Rotator plugin

When you find the plugin, click the “Install Now” button.

click to install the WordPress Favicon Rotator plugin

Now the plugin is installed, but it has to be activated before you can use it.

Click the “Activate” button.

click to activate the WordPress Favicon Rotator plugin

That’s all there is to it. Now let’s put the plugin to work.

Using Favicon Rotator

In the left column navigation, mouse over the “Appearance” link and click the “Favicon” link.

click the "Favicon" link

As you can see, there’s nothing to configure. The rotate favicon admin is just a few buttons. Most of what the plugin does happens behind the scenes.

rotate favicon admin, such as it is

You can upload two types of icons, favicons and touch icons. You know about the 16 x 16-pixel favicon. The touch icon is an image larger than a favicon that’s used in certain instances on touch screens. Phones, tablets, some monitors, etc.

Uploading Favicons

The plugin will resize any image you upload to the proper size for a favicon or a touch icon. But even though the plugin will convert large images, you probably don’t want to use them. The larger the image, the less likely it is to be legible as a 16 x 16-pixel favicon.

Bold and simple images make the best icons.

Click the “Add Icon” button.

click the "Add Icon" button

An upload popup will appear. You can choose an image from your computer or your WordPress Media Library.

choose an image from computer or media library

When you choose a file it’s uploaded and displayed.

  • If you need to make changes, click the “Edit Image” button to scale (make it square), crop, or rotate the image.
  • If the image is ready to go, click the “Add Browser Icon” button to create a favicon.

click the "Add Browser Icon" button

Finally, click the “Save Changes” button.

click the "Save Changes" button

Now you can see the image you selected as the favicon.

favicon in browser tab

Why It’s Called the Favicon Rotator

If one favicon is good, two must be better, right? Or three, or 10. The beauty of the Favicon Rotator is its ability to serve up a random favicon from a group of files.

So let’s add some more images. We do that the same way we added the first.

  1. Click the “Add Icon” button.
  2. Choose an image from your computer or WordPress Media Library.
  3. If you need to make changes, click the “Edit Image” button.
  4. If the image is ready to go, click the “Add Browser Icon” button.
  5. Click the “Save Changes” button.

I’ve added three images here as favicons, and whichever pops up in a visitor’s browser will be a random selection.

uploaded favicons

The images are small, but let’s enlarge the page so you can see what I’ve done.

enlarged favicons page

Notice that they’re three different images, but I used the same icon in all three. One is reversed, they use different colors, but they all share the same illustration.

That way, there’s a variety and a random selection, but the branding is recognizable no matter which favicon is shown.

That’s an important thing to keep in mind if you rotate your favicon. You want it to be different but consistently recognizable. That’s the point of a favicon, to identify your website.

When someone gets used to seeing one of your favicons they relate it to your site. If it changes on a return visit, they might not relate the new icon. If you keep the main element recognizable and change the color or rotation, you avoid confusing return visitors.

Browser Cache and Favicons

You may notice that your favicon doesn’t seem to change when you reload your site, even though you’ve uploaded more than one. That’s because every browser stores favicons in a different way, but they all cache them. So to see a new favicon, you may have to clear your browser cache.

Clearing browser cache can be disruptive and time-consuming. So the best way to try to get a different icon is to open a different browser and visit your site.

Uploading Touch Icons

You add a touch icon the same way we added favicons.

  1. Click the “Set Icon” button.
  2. Choose an image from your computer or WordPress Media Library.
  3. If you need to make changes, click the “Edit Image” button.
  4. If the image is ready to go, click the “Set Touch Icon” button.
  5. Click the “Save Changes” button.

Touch icons do not rotate. You can only set a single image as the touch icon. When you upload a touch icon image, it overwrites the one that was there before.

You can use larger images for touch icons, but don’t make it too different from your favicon(s). Try to maintain consistent imagery between the icons.

What Happens if You Uninstall the Favicon Rotator Plugin

If you uninstall the plugin, your favicon will revert to your previous favicon or the default WordPress icon.

The plugin didn’t create a 16 x 16-pixel file and install it in your root directory. It used an alternate favicon method, adding the following line to your site’s

tag:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][/ht_message]

When the plugin is uninstalled, the line is no longer inserted, so your favicon will revert.

Now You Know How to Convert and Rotate Favicon Images in WordPress

But you don’t have to rotate favicons to use it. It’s also useful as a favicon generator if you don’t have a graphics program that can save .ico files.

It might seem like overkill to install a plugin just for favicons. But the plugin doesn’t use any resources unless it’s converting files, so it’s a harmless addition to WordPress.

Have you ever used another method to rotate favicons? If you use multiple favicons do they all have a consistent look? Let me know in the comments.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.