Sites that have a default or missing favicon scream amateur. Your site should be using a custom favicon that matches your logo.

“Favicon” is the word for the little image that appears in the browser tab, on bookmark lists, or as an icon on your phone if you save a site as a shortcut.

You have probably seen these a thousand times:

Image of what favicons are.

These are favicons.

And on your phone as well:

Image of how favicons are displayed on an iphone, in safari and chrome browsers.

Safari and chrome browsers, side by side. Each uses favicons differently — but they each show them.

These days, most professional sites use a version of the logo, or a part of it, to create a favicon that reinforces their brand image and provides an immediately recognizable visual cue to users.

For instance, the New York Times Logo is a classic script that looks like this:

Image of the new york times full logo lifted from its website.

All the news that’s fit to print on its website.

All of that, of course, wouldn’t fit in a little favicon, so for its site, nytimes.com, a favicon has been created out of the very first letter of the logo, the gothic “T”:

An image demonstrating the New York Time's favicon.

That gothic “T” quickly brings to mind the New York Times — it’s a nice square version of the newspaper’s full logo.

But so many websites ignore this approach. Many times, you’ll find websites who use no favicon at all:

Pic showing blank favicons.

You’ll find sites with blank (or missing) favicons all over the web. Come on, guys — those little blank document icons don’t give the user any information at all.

Not only is this a missed opportunity to look professional, but when users have a lot of tabs open, the tab with your website in it will, unlike other sites, have no identifying characteristics at all. This can annoy your users when they want to return to your site.

What was that website again?

And then there are those sites that use a default favicon that was placed there by the hosting account, like this one. Nothing against the photography — it’s beautiful — but the site is still using the BlueHost favicon.

Image of site with default bluehost favicon.

This photographer’s website is hosted on BlueHost.

If you start paying attention, you’ll see this little blue square all over the web, because all new BlueHost hosting accounts have it as an (editable) default.

Or this favicon, which informs everyone on the web that this site is running WordPress:

Pic of a site using the WordPress logo as a favicon.

Good choice of CMS, guys, but no need to advertise it.

Of course, we love WordPress — but everyone in the world, especially hackers, don’t need to know you are running it.

So, get yourself a custom favicon — one that’s based on your logo, reinforces your brand, helps your users by marking your browser tab, and replaces whatever default your host has given you (if any).

Part One: Create a Favicon Image

The first step is to create (or find) an image you can use as your favicon.

Because you are using WordPress, the requirements for this image are quite simple — it’s merely has to be a medium-sized square in PNG or JPG format.

But your logo image is probably not a square, so you’ll need to edit the image file to get a square out of it.

Let’s use the New York Times logo as an example.

To create the favicon, we first drag the logo image from the browser and save it on our desktop, like so:

Screencap of dragging logo to desktop.

Then, we open up the image in an image editing program. On my computer, I’m using Preview, which is the program that comes bundled with my Mac. But you can use any image editor — all we need to do is crop, so there’s no need for a high-powered image editing program like Photoshop.

After you have the image open, use the crop tool to take a square portion of the image. Remember — it has to be a precise square. You can, after you get the square, delete any extra stuff you don’t want, using the “erase” tool or deleting it, as we do in this example: r . It doesn’t need to be a perfect square, but the closer the better.

Image showing us taking a square portion out of a rectangular image.

Getting a perfect square is the hardest part of this lesson.

Hit save, and you’re done. Easy, right?

Part Two: Upload the Favicon Image to Wordpress

The procedure here is best laid out in a list:

  1. In your WordPress dashboard, go to Appearance > Customize.
  2. Click on “Site Identity” and look for the “Site Icon” setting.
  3. If there’s an image there, click “Remove Image.”
  4. Click on “Select Image.”
  5. Click on the upload tab.
  6. Upload the image you created above.
  7. Accept the default crop by clicking “Crop Image.”
  8. Important! Click the blue “Save and Publish” button at the top.

Here’s a screencapture:

Screecapture of replacing the default favicon with our new image.

You’ll want to navigate to Appearance > Customize > Site Identity to work your magic.

Keep in mind, your new favicon may not appear immediately. Many browsers cache favicons aggressively, which means you may need to open an incognito window (or wait a few minutes) for it to show up in your browser.

Part Three: Ask for Help If You Have Trouble

We stand ready to give you a hand. Feel free to email us at hello@bfcsupport.com, go over to Facebook and message us at facebook.com/realbfcsupport, or give us a call at 646-389-0563. Or leave a comment below.

Leave a Reply

Your email address will not be published.