How to Properly Implement a Favicon on Your MyListing Website

Building better MyListing websites. One guide at a time.

Table of Contents

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 its 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?

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.).
  3. Locate your downloaded zip file and extract all of the contents.
  4. 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.
  5. 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.

Further Optimization

When you run performance tests with a tool like GTMetrix, you may notice an entry under PageSpeed > Leverage Browser Caching, for site.manifest not having an expiration specified.

If you do and you are on Kinsta, simply jump on a chat with them and ask them to set an expiration of 30 days for you.

If you’re not on Kinsta, but you are running your MyListing website on an Nginx server, you can add the below Cache-Control header to your server’s configuration file, which specifies a cache period of 30 Days.

				
					location ~* \.webmanifest$ {
 gzip_types application/manifest+json;
 expires 30d;
 log_not_found off;
 add_header 'Access-Control-Allow-Origin' '*';
}
				
			

MyListing Theme Video Tutorial

Play Video

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)