Properly Add a Favicon to Your MyListing Website

It’s hard to know what to do when there are so many platforms, each with different design requirements regarding favicon dimensions, where touch icons are needed/used, etc.

For this guide, I cover how to use the Favicon Generator (Free) to save time and potential oversight regarding favicons.

What is a Favicon?

Favicon is short for ‘favorite icon’ but is also known as ‘Site Icon. ‘ It is a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, and it is a file containing one or more small icons 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 use it.

Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history) 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. If not, 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 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. Copy all the code generated from the Favicon Generator website to place in your website’s header (< head >).
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.
3. Locate your downloaded zip file and extract all of the contents.
4. Using an FTP application like FileZilla (Free), copy the extracted files to your website’s root folder (/public).
5. Once all the files are in place, click the ‘Check your favicon’ button on the Favion Generator website to verify everything is okay.

At this point, you should see your favicon appear on your website. If not, refresh your browser a couple of times. If you still don’t see it, clear all levels of caching.

Further Optimization

When you run performance tests against your website, you may receive warnings regarding the site.manifest not having an expiration specified. If you do and you are hosting with Kinsta, chat with them and ask them to set a 30-day expiration for you.

If you’re not on Kinsta but running your MyListing website on an Nginx server, you can add the Cache-Control header below to your server’s configuration file. This header 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' '*';
}

Quick and Dirty Favicon

If you feel like the above is overkill and are okay with having a text-based or emoji-based favicon, there is an effortless 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. WordPress Dashboard > Appearance > Customize > Site Identify > Site Icon > Add your favicon.