How to Properly Add a Favicon to Your MyListing Website

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, where touch icons are needed/used, etc.

For this guide, I 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 are 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.

Also, 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, let’s 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: I had a .svg version of my 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: I 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, to easily add the code to the header area of all your posts/pages in one shot. (Note: I 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 or a plugin like File Manager, 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' '*';

Video Tutorial

Quick and Dirty Favicon

If you feel like the above is a bit overkill, and you’re okay with having a text-based or emoji-based favicon, there is a really simple way to generate and add a favicon to your website. For this, I recommend Formito’s Free Favicon Maker.

  1. Visit the Favicon Maker site.
  2. Choose the ‘Letter’ or ‘Emoji’ option.
  3. Design your favicon as desired.
  4. Download your favicon file. (Note: I recommend .svg format due to its lightweight and scalable nature.).
  5. Upload the file to your WordPress Media Library.
  6. Use the Code Snippet below, which will guide you the rest of the way.
					//// INSTRUCTIONS: 
//// 1. Copy and paste the code snippet below into WordPress Dashboard > Settings > Perfmatters > Options > Assets > Code > Add Header Code.
//// 2. From your Media Library, copy the URL of the uploaded .SVG file.
//// 3. Replace 'favicon.svg' with the URL you copied in the previous step.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

<link rel="icon" type="image/svg+xml" href="favicon.svg" />


The favicon below was generated for the Club’s Vow Starter Site.

NEW: MyListing Club Community

Get a true community experience that Facebook just can't offer.

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.

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

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.

  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • UiPress ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)