Display Your Logo in Browser Tabs with Favicons

Display Your Logo in Browser Tabs with Favicons

When you launch your website, it’s really easy to miss a lot of little details, including a favicon.  Does your website display your logo in browser tabs or shortcuts on mobile phones?  Let’s get that fixed now.

What is a Favicon?

faviconexampleWhen you are browsing websites, have you noticed a small logo appearing in the browser tab? This little image is known as a favicon, and is very helpful when the visitor has 20 different tabs open and needs to find which one is your site.

The term favicon is short for “favorites icon”. Favicons started just for tabs on websites, but now also include:

  • Shortcuts saved to iOS dashboards
  • Windows 8 (phone and computer) tiles
  • Android
  • Retina display computers

With so many places now using a tiny image to set your website apart, it’s important that you make a favicon.

How to Make a Favicon

You will need a square representation of your logo at least 270 pixels wide and tall saved as a .png or .gif file format.

Manually Creating a Favicon

Follow the steps from WordPress.org to create a .ico file and upload it to your website.

Some themes include a favicon location to upload as well and allow you to upload it to the theme settings.

Using a Plugin to Configure Your Favicon

To create a favicon and configure your WordPress website to use it, I recommend the plugin Favicon by RealFaviconGenerator. This is the only plugin that I found that covers so many different favicon formats.

Once installed, a Favicon menu option appears under Appearance.  Upload your image, and generate.

wordpress plugin favicon settings

You will be redirected to configure settings for your favicon on their website:

realfavicongenerator

Configure the background colors that you would prefer for iOS and Windows tiles.  I also select the high resolution favicon option not pictured to prepare for retina devices.

Congrats! Your favicon is now created and implemented. Double-check how it will display on many devices and sizes at Favicon Checker.

P.S. – if you host with HostMonster or use a Genesis theme, please go fix this now.  I’d rather see a blank icon placeholder than more websites with these favicons.

Summary
Article Name
Display Your Logo in Browser Tabs with Favicons
Description
When you launch your website, it's really easy to miss a lot of little details, including a favicon. Does your website display your logo in browser tabs or shortcuts on mobile phones?
Courtney Engle Robertson

The requested block type of 'author' does not exist. Please re-activate the block plugin or child theme if you wish to use this block again.

4 Responses to Display Your Logo in Browser Tabs with Favicons

Leave a reply

 

Get Your FREE WordPress Website Checklist, Social Media Audit, & Exclusive Training