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.
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.
- First, point your browser to: RealFaviconGenerator.net.
- Next, click the Select your Favicon Picture button.
- Locate the file on your computer, and double-click it.
- 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.
- Click the Generate your Favicons and HTML Code button.
- Click the Favicon Package button to download the files to your computer.
- Copy the HTML code to a text file for safe keeping for use in our custom plugin later.
- Locate the downloaded file on your computer and extract it, or unzip it, to expose all the files within it.
Now, with Pluginception setup:
- From the WordPress Dashboard, click Plugins, and then Create a New Plugin.
- Give the plugin a name such as My Favicons Placement Plugin.
- Click the Create a Blank Plugin button.
- 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.
- Get the Favicon code that was generated for you in earlier steps.
- Replace where it says YOUR FAVICON CODE with the code copied in the previous step.
- Click the Update File button.
- 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.