What Is a Favicon and How To Add One in WordPress and Gator Website Builder

What is a favicon, you ask? Take a quick look at all the tabs you currently have open on your browser. Do you see the small 16×16 pixel icon on the top left side of each of your tabs, right before the page title? 

That’s a favicon, which is short for “favorite icon.”

In my browser, I currently have the following websites open: Facebook, HostGator, Ashley R. Cummings (my website), Twitter, LinkedIn, and Omnisend. The tabs in my browser look like this.

examples of different website favicons in browser tabs

As you can see, each website has a little logo (favicon) next to the page title in the respective browser tab, so I can quickly identify which tab is which.

Favicons also appear in your bookmarked URLs and in the browsing history section of Google Chrome, making it easier for you to navigate your browser.

examples of favicons in google chrome bookmarks

This post will dive deeper into the wonderful world of favicons. You’ll learn:

  • The reasons why you should add a favicon to your website
  • How to add a favicon in WordPress
  • How to add a favicon using Gator Website Builder

4 smart reasons to add a favicon to your website

Not only is it fun to add a favicon to your website, but it’s an excellent website and marketing strategy. Here are some of the top reasons your website needs a favicon.

1. Branding

Website owners typically use their logo as their website’s favicon. Since the favicon is a small logo that is presented at the top of a browser’s screen, it helps with branding and awareness. 

Additionally, some search engines (e.g. DuckDuckGo) even display a site’s favicon in the search results. Check out the example below.

example of favicons in search results

Whenever someone searches for your website, your favicon will help the user instantly recognize your brand.

2. Speed

Every time I open my husband’s computer, he has at least 30 browser tabs open. If you’re the type of internet browser that likes to leave all of your tabs open, you already know that the more tabs you have open, the smaller they get. 

example of multiple tabs open with only favicons still visible

Once you have a certain amount of tabs open, the page title disappears and the only thing left to see is the favicon. Favicons help internet users recognize which page is which so they can switch between screens without a hitch.

3. Search engine optimization (SEO)

Having a favicon also helps with your site’s search engine rankings. When a browser visits your website, the searcher’s browser requests a favicon from your site. If your site doesn’t have one, your site will return the HTTP 404 response code. And, an abundance of 404 errors may affect search results negatively.

4. Credibility

Adding a favicon to your website is one of the most basic and easiest tasks in WordPress or a website builder. When you skip this step, it could lead users to question how authentic your website is.

Now that you know why you need a favicon on your site, let’s talk about how you can add a favicon to your WordPress site and via the Gator Website Builder.

How to add a favicon in WordPress

The first step in adding a favicon to your WordPress website is to make sure you have the right image size. Favicons will display as 16×16 pixels or sometimes as 32×32 pixels, but to get the right image quality, you’ll need to design a square image that’s bigger.

To get your favicon to display correctly, you should resize your logo so that it’s square and at least 512×512 pixels. Once you’re done resizing your logo image to the appropriate dimensions, and save it to your desktop.

If you aren’t a graphic designer and need a little help, you can use a favicon generator like favicon.cc or favicon-generator.org.

Once you have created your favicon and saved your file to your desktop, you’re ready to upload it into WordPress. 

Here’s how to add your favicon to your WordPress site:

  • Login to your WordPress dashboard using your login credentials.
  • Find “Appearance” on the left navigation bar, and hover your cursor over it.
  • Click on “Customize.”
  • When you click on “Customize,” WordPress will redirect you to the menu where you can make site changes.
  • Find “Site Identity” on the new navigation bar on the left and click on it.
  • From here, you can add a site title, tagline, and your site icon. Your site icon is the same thing as your favicon.
  • Click on “Select File,” and select your favicon image, and press “Save.”
  • Once you’ve selected your file, WordPress will display your favicon in the Customize navigation bar. When you refresh your WordPress site, you’ll see your favicon appear in your browser tab next to your site name.
add favicon to wordpress website in site icon m enu

You can change your favicon any time you want by following the same process.

How to add a favicon using the Gator Website Builder

If you opt to build your website with the Gator Website Builder, the process of adding a favicon to your site is different. 

Here is how you add a site icon in the Gator Website Builder:

  • Log in to the website builder with your username and password.
    • If this is the first time setting up your website, follow the requested steps to set up your website. If you need additional help, here are some helpful HostGator tutorials.
    • If you’ve already completed the basics of creating your website with the Gator Website Builder, find your website on the main dashboard and click “Edit Site.” This will take you to the Gator Website Builder.
  • Find “Settings” on the left navigation bar, and click.
  • Under “Settings,” click on “My Site.”
  • When you click on “My Site,” you’ll see five tabs, including “Name and Domain,” “Logo,” “Favicon,” “SEO,” and “Accessibility.”
  • Click on “Favicon.”
  • Click on “Click to upload favicon” on the next page.
  • Click on “My images,” and select your favicon. If you haven’t added your favicon yet, then click on “+ Add Image,” and add your image, and press “Save.” Then, select your new image.
  • Once you’ve selected your image and pressed “Save,” you’ll see it appear in the favicon box. 
  • When you’re satisfied you have the right image, press “Apply.”
  • This will add a favicon to your website.
add favicon to website in gator website builder

If you want to change your favicon at any time, you follow the same process.

Start your website with HostGator today!

A favicon is a fun website tool that helps with SEO, brand recognition, and browser usability. Not to mention, it’s a fun and creative way to enhance your website.

If you have a new website and haven’t added a favicon yet, stop what you’re doing and go add one. The process only takes a few minutes if you already have a logo and will boost the credibility of your website.

If you haven’t started your website yet and are looking for a reliable hosting company, check out HostGator today. HostGator offers one-click WordPress installation and an intuitive website builder to help you get your site up and running in no time at all.

Ashley R. Cummings is a professional freelance writer specializing in SaaS, tech, and advertising/marketing. In a previous life, she was a Russian teacher at Brigham Young University, a corporate trainer, and a grad student—all at the same time. When she’s not writing, you can find her traveling the world with her 2 kids and husband, reading poetry or taking a deep dive into the fabulous world of comedy. Connect with her on Twitter at @ashleyrcummings.