How to Properly Implement a Favicon on Your MyListing Website

Get the knowledge your online business needs to succeed.

Overview

Our How to Properly Implement a Favicon on Your MyListing Website guide will show you how to do just that, easily, and according to best practice.

It’s hard to know exactly what to do when there are so many platforms, each with their own design requirements in terms of favicon dimensions, wheres touch icons are needed/used, etc.

For this guide, we cover how to use the FREE, Favicon Generator tool, in order to save a lot of time and potential oversight when it comes to favicons.

What is a Favicon?
Generate Your Favicon
Add Your Favicon to Your Website
Video Tutorial

What is a Favicon?

Favicon is short for favorite icon, but also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, and is a file containing one or more small icons that is associated with a particular website or web page.

Web designers can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.

Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks.

Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.

Generate Your Favicon

For these instructions, we will assume you already have your favicon image created, but if you haven’t, you’ll want to create a favicon with dimensions of 512 x 512 px to get the best results.

  1. Visit the Favicon Generator website.
  2. Click on the ‘Select your Favicon image’ button.
  3. Select your favicon image. (Note: We had a .svg version of our favicon with dimensions of 512 x 512 px.).
  4. Take a quick peek at what was generated for you, across all of the platforms, and adjust if needed. (Note: We show how to make adjustments, within the video tutorial included in this guide.)
  5. When/if all platforms look good, click the ‘Generate your Favicons and HTML code’ button.
  6. Download your favicon package by clicking on the ‘Favicon package’ button.
  7. Leave the ‘Install your favicon’ screen open on the Favicon Generator website.

At this point, you should have a zip file downloaded to your workstation, containing your packaged favicon.

Add Your Favicon to Your Website

  1. From the Favicon Generator website, copy all of the code that was generated for you to place in the header (< head >) of your website.
  2. Paste the code from the previous step into a plugin like Perfmatters (Premium), Insert Headers and Footers (FREE), etc., to easily add the code to the header area of all your posts/pages in one shot. (Note: We use and recommend Perfmatters, because it offers a ton of other features to optimize MyListing websites.).

Perfmatters

Members get 30% OFF any purchase of this all-in-one, lightweight WordPress Optimization plugin.

  1. Locate your downloaded zip file and extract all of the contents.
  2. Using an FTP application like FileZilla (FREE)  or a plugin like File Manager (FREE), copy all of the extracted files to the root folder (/public) of your website.
  3. Once all of the files are in place, click the ‘Check your favicon’ button on the Favion Generator website, to verify everything is checking out okay.

MyListing Theme Video Tutorial

Play Video

Let's empower others. Share the knowledge.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Scroll to Top

Find a bug or typo? Please let us know.