How to Add Favicons to Your WordPress Site

In this tutorial we are going to walk through how to generate Favicons for all platforms, starting with just one favicon file, and then add them to a WordPress site.

More specifically, you will be introduced to:

• How to generate Favicons for all platforms from your main icon.
• How to connect to your WordPress file system via FTP, and upload your Favicon files.
• How to add the code that tells the platforms where the icons are, to the header of your web pages, by quickly creating a small custom plugin.

Resources discussed in the video:

• Real Favicon Generator Tool [Free]
• Canva [Free]
• FileZilla FTP Client [Free]

Let’s generate the myriad of Favicons for all the various platforms.

To move along, you must already have your main Favicon available.

It’s best to begin with a large square image that is 260×260.

The format can be any of jpeg, png, or svg.

You can find free icons on Canva if you don’t already have one available.

Now, with your main icon ready, let’s create the rest.

1. First, point your browser to: RealFaviconGenerator.net.
2. Next, click the Select your Favicon Picture button.
3. Locate the file on your computer, and double-click it.
4. Change any of the options that you desire such as: adding a background color for iOS, creating an App Name for Android Chrome, Compression options, and so on.
5. Click the Generate your Favicons and HTML Code button.
6. Click the Favicon Package button to download the files to your computer.
7. Copy the HTML code to a text file for safe keeping for use in our custom plugin later.
8. Locate the downloaded file on your computer and extract it, or unzip it, to expose all the files within it.

Now, let’s upload the files to the root of your web site.

This next step requires logging into the FTP server where your web site is hosted.

At this point I am going to insert a 3 and a half minute video to explain how to connect to your WordPress server using FileZilla.

Please be sure that you have FileZilla installed on your computer before continuing. You can download it from: filezilla-project.org.

Once connected to your FTP server, upload all the extracted files to the root folder of your web site.

Now you will create a quick plugin that will add the necessary code to the head section of your site.

At this point I will insert a 4 minute video that will cover exactly how to get started creating a WordPress plugin.

Now, with Pluginception setup:

1. From the WordPress Dashboard, click Plugins, then Create a New Plugin.
2. Give the plugin a name such as My Favicons Placement Plugin.
3. Click the Create a Blank Plugin button.
4. Now, add the code into your plugin that you see in the video, or below these steps if you are following along within the written tutorial. The use of singular quotes vs. double quotes within the function is important, since the Favicon code contains double quotes.
5. Get the Favicon code that was generated for you in earlier steps.
6. Replace where it says YOUR FAVICON CODE with the code copied in the previous step.
7. Click the Update File button.
8. To test, view the web site, right-click and ‘View Source’ and search for the code to make sure it shows up. Plus, you can look for your Favicon in the open Tab.

Code used within this tutorial:

function my_favicons_placement_function() {
$output='YOUR FAVICON CODE';
echo $output;
}
add_action('wp_head','my_favicons_placement_function');