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.

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

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

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

Click the “Activate” button.

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.

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.

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.

An upload popup will appear. You can choose an image from your computer or your WordPress 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.

Finally, click the “Save Changes” button.

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

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.

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

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.

The post How to Randomly Rotate Favicon Images in WordPress appeared first on GreenGeeks.

Way back in the last century, almost every web browser offered a favorites or bookmarks list. As the web grew in size, the favorites list went from being a cool feature to being a necessary addition. But if your list of favorites was long, it was sometimes difficult to find the website you were looking for.

So a savvy developer at Microsoft created the favicon. It is a 16 x 16-pixel image that appeared next to the website title, making a site easier to identify. As long as your site had the image .ico file in its root directory, it was displayed in the favorites list.

Soon, all the other browsers adopted the favicon, and, in Internet Explorer, it started appearing next to the address bar. Now, of course, the graphic appears in the browser tab. And if you think about it, tabs wouldn’t be nearly as convenient without the humble favicon.

Creating a Favicon Image Isn’t Always Easy

The file format .ico is a Windows format, so it hasn’t always been easy to create your own favicon image. Most graphics programs couldn’t create the file. Even Photoshop used to require a plugin to save an .ico file.

Now, of course, there are websites that will convert your 16 x 16-pixel image file to .ico from almost any format.

But why use some random website to create an .ico file if you don’t have to?

I’m going to show you how to create a favicon for your WordPress site using a plugin, All In One Favicon.

All In One Favicon WordPress plugin even lets you add different graphics to your public-facing site and admin pages. You can download a favicon, or upload an image to create one. The plugin will make the image from an .ico, .png, .gif, or Apple Touch Icon file.

This is a simple single-function plugin, but let’s go through the steps to set your favicon.

Installing the All In One Favicon Plugin

Log in to your WordPress admin panel.

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

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

Once you have located the plugin, click the “Install Now” button.

Finally, click the “Activate” button.

Creating a Favicon

By default, WordPress uses a perfectly acceptable favicon.

But the idea here is to get rid of it. Because it doesn’t make it easy to find your site in someone’s favorites list if it has the same graphic as twenty other sites.

So let’s go through the steps to create a new one and distinguish your website from all the others out there.

In the left column navigation, mouse over the “All in one Favicon” link and click the “All in one Favicon” link.

The plugin page has “Frontend Settings” and “Backend Settings” sections. Those are the separate controls for the public-facing favicon (Frontend Settings), and the admin area graphic (Backend Settings).

We’re just going to create a frontend favicon for the public areas of the site. But everything we do here also applies to the backend settings.

It’s worth noting though, that if you don’t specify a favicon for your admin area, none will be displayed. The image you specify for the frontend will not show up on your admin pages.

As you can see, there are four options for your file: .ico, .png, .gif, or Apple Touch Icon.

Since I happen to have a PNG file handy here, I’ll click the “Upload” button in the “PNG Frontend” line. That opens a standard file selection dialog.

After you select the file from your computer, it looks like nothing happened. The plugin doesn’t give you any indication that your file was successfully uploaded.

But if you click the “Save Changes” button:

You’ll see a path to your uploaded file appear in the field:

And believe it or not, that’s all there is to it.

The newly uploaded image will now show up as your favicon.

Favicons and Browser Cache

Unfortunately, we can’t update favicons by refreshing a page—every browser stores favicons in a different way. And clearing your browser cache just to see a new image is usually overkill.

For that reason, I suggest opening up a different browser and visiting your site to see the new favicon. Eventually, it will show up in your main browser. But it may not happen until you close and reopen the software.

Some Strange Interesting Behavior

As you can see from our test site, it’s possible to upload multiple favicon files:

I couldn’t find any information on hierarchy, but I’ll pass along what I found through trial and error.

The format list, as it’s shown, with .ico first, then .gif, .png, and Apple, is the pecking order. So if you upload a .png file, then a .gif, the .gif will be the favicon. If you upload an .ico file, it will take over the primary position. The .gif and .png you uploaded previously are still there; they just aren’t used. The plugin defaults to whichever file is highest in that order.

I’m not sure what advantage there is (if any) in having multiple file types uploaded, but there you go.

What Happens if You Uninstall the All In One Favicon Plugin

If you uninstall the plugin, your favicon will stop working.

That’s because the plugin doesn’t create a 16 x 16-pixel file and put it in your root directory. It uses the alternate method of adding:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]URL to image]” type=”image/[filetype]”/>[/ht_message]

inside your site’s

You could copy the icon link before uninstalling the plugin, then add it to your theme header manually. But of course, if you do that, I’d recommend using a child theme. And that’s an added layer of complexity that you may not want to take on.

It’s Easy to Overlook the Simple Things

When you’re building a new website and shopping for hosting, a favicon is probably the last thing on your mind. If you forgot a favicon and now you need an easy way to create one, here you have it.

Or maybe you’ve been putting off changing or updating your favicon because it’s just too much hassle. Whichever boat you’re in, I hope this WordPress favicon plugin tutorial helps.

It’s not often that an early web technology sticks around for as long as this one has. Remember frames? How about ? Sorry to remind you about . Forgive me. And when’s the last time you heard someone referred to as a “webmaster”? I’m betting it’s been a while.

(And no, your grandmother trying to describe what your job during Thanksgiving dinner doesn’t count. She’s allowed to say “webmaster.”)

The fact that we still use favicon today is a sign of its enduring usefulness. It’s still essential to establish this image so your visitors can find you when they want to come back.

Have you ever implemented a favicon in the old-fashioned way? How long has it been since you updated your favicon? Let me know in the comments.

The post How to Use All in One Favicon to Add More to WordPress appeared first on GreenGeeks.

The favicon is the image that is displayed next to the web address in a browser. It’s also stored when someone chooses to bookmark the website. For many, these icons are used as part of their branding. It’s a miniature logo that can stand out just as pronounced as any advertisement.

It’s not difficult to install a WordPress favicon to give your site that sense of individuality. The hardest part is choosing what kind of a graphic you want the site to be remembered for.

Although these small images may not be as vastly important as other design ideas that can make or break the site, you may be amazed by how often these little icons affect visitor acquisition and retention.

Today, we’re going to show you how to add a WordPress favicon to your website. So, get your creative juices flowing and let’s get started choosing the right image for you.

Why Favicons Are Important

When it comes to branding, the logo of a business plays an important role for recognition. In the digital world, favicons have nearly the exact same function. For those who spend a lot of time at their computers, these tiny graphics are just as recognizable as a billboard for a company.

A favicon can also denote a sense of professionalism. From a visual standpoint, a site without a graphic can be unattractive and may turn visitors away. As silly as it may seem to some, think about how you feel if you visit a website without one of these tiny images.

Creating the Image

There are several ways you can create the perfect image for your icon. Many businesses will actually create smaller versions of their logos for the purpose of creating these tiny graphics. This helps keep consistency in the brand.

A few other ideas could include:

• Initials of names
• Basic representations of logos
• Single letters
• Simple symbols or shapes

One thing you need to keep in mind is that images that are shrunk to 16 pixels wide will not show a high degree of detail. It’s better to try and keep these graphics as simple as possible. Adjustments like drop shadows, embossing and outer glows are extremely difficult to see as a favicon.

Using Pixlr

Pixlr is a free image editor that functions much like Adobe Photoshop. You don’t need an account, and you can get started right away. To do this:

Step 1: Go to the Pixlr editor website.

Step 2: Click to “Create a New Image.”

Step 3: Select the size of graphic you want to use. It’s advisable to create this image 512 pixels high by 512 pixels wide. This creates a perfect square that WordPress can modify easily to shrink. Enter 512 in both the width and height areas and click, “OK.”

Step 4: This will give you a blank canvas to build anything you want as your favicon. For now, let’s just put in “GG” in caps by selecting the type tool.

Step 5: Once you start typing Pixlr will load up the text editor. Change the size of the font to 130. This is the highest the app will go, but we’re just using the text as an example anyway.

Step 6: Move the GG to the center of the canvas and click the “OK” button on the text editor.

Step 7: Go to “File” and click “Save” to store the image.

Step 8: Keep “My Computer” selected and change the name of the file to “favicon.” Click “OK.”

Step 9: This will open a new window to save your image. Put it somewhere that is easy to find.

Step 10: Go to your WordPress admin panel, click “Appearance” and then click “Customize.” This will load your theme’s settings of WordPress.

Step 11: Most themes will have a control built-in for “Site Identity.” It should be the first option in the customizer. Click on it.

Step 12: This will open a window where you can change your site title, tagline and add the favicon image. Click the “Select Image” button under the area for the site icon.

Step 13: This will open the media library of WordPress. You can either choose an image in the library or upload one. We are going to upload the GG graphic we made in Pixlr.

Step 14: Once the image is uploaded, select it to become the website icon.

Step 15: On the top left of the screen, there is a button for “Save & Publish.” No changes you make in the customizer will stay unless you click this button.

Step 16: Once you have saved, click the little “x” to the far left of the button to close customizer and return to WordPress.

In reality, any image can be used as a favicon. Even an image that is larger than 512 pixels. This is because WordPress has a built-in cropping tool.

Using Other Image Editors

You don’t need to use Pixlr if you have other editing software. The thing to keep in mind is the graphic is ideal at 512 pixels square. This helps WordPress adjust the size for various purposes.

Bookmarking a website is only one aspect of the favicon. The graphic needs to be able to scale in the event someone creates a desktop shortcut to the site. This is one of the reasons why you should stick with the 512-pixel shape in WordPress.

Using the larger image will also help it keep greater detail when it’s reduced in size. Of course, you don’t want something that has a lot of small features because they will be lost once the image is shrunk to 16 pixels for the icon.

Plugins of Interest for Making a WordPress Favicon

If your theme does not have a place for the favicon image or you would rather use some of the features of plugins, here are some that may be perfect for you. Some of these come with automatic installation and easy to use graphic editing abilities.

Favicon by RealFaviconGenerator

The Favicon by RealFaviconGenerator plugin is one of the most popular in WordPress. It allows users to create the favicon to be used in a myriad of situations other than the tiny icon in the browser. The plugin supports setting up the image for various operating systems while providing a checking system to make sure it’s set up correctly.

Favicon Rotator

If you want to add a bit of flare to your site, Favicon Rotator may be of some use. This plugin allows you to set more than one graphic as your site’s icon. If you use more than one image, the system will randomly select it every time someone visits the site. You can also set certain favicons to display according to mobile device operating system.

Multicons [ Multiple Favicons ]

Multicons is another plugin that can display certain icons depending on the operating system of the visitor. You can set a default icon for the website and then display a separate image for those using Apple-based devices, for example. If your business has separate services, such as a computer repair shop, this could be a fun addition for your visitors.

It’s often the small things that make the greatest impact when developing a website. Before you think that an icon depicting your business is unnecessary, consider what your company would be without the logo. Your website is an extension of the organization, and it needs to have the same level of professional appeal as any brick-and-mortar location.

What kinds of things do you have installed on your site that make it different from others? How often do you implement features with the sole purpose of engaging visitors?

The post How to Place a Favicon on Your WordPress Website appeared first on GreenGeeks.