According to the latest Google’s documentation, it is no longer enough to just upload a favicon to your website’s root directory. Now, you must place an invisible link to your favicon’s .ico file in your home page’s header. How can you add that link to your WordPress website, without using any plugins?
Table Of Contents (T.O.C.):
- What it’s all about?
- Adding the invisible favicon.ico link to WordPress header
- If you like being thorough or run some other tech/CMS
1. What it’s all about?
Here’s an example of what that link looks like for the www.BikeGremlin.com website:
<link rel="icon" href="https://www.bikegremlin.com/favicon.ico">The path to the favicon file can be either absolute or relative. Here’s an example of a relative path, with the favicon file named “favicon.ico” and placed in the website’s root directory:
<link rel="icon" href="/favicon.ico">The general criteria for the favicon file (resolution, format etc.) hasn’t changed.
The relevant link explaining the request order (if you want your siteicon to be shown in the search results) on the Google’s site:
https://developers.google.com/search/docs/appearance/favicon-in-search
2. Adding the invisible favicon.ico link to WordPress header
You can do this without using any plugins. I would recommend you don’t edit any theme files, but create a child theme first.
Then, add this code to your child theme functions.php file
(just replace the “www.bikegremlin.com” part with your website’s domain):
// BEGIN Favicon invisible link
function bikegremlin_favicon() { ?>
<link rel="icon" href="https://www.bikegremlin.com/favicon.ico">
<?php
}
add_action( 'wp_head', 'bikegremlin_favicon' );
// END Favicon invisible link
Alternatively, you could use a relative path to your favicon, in which case a simple copy/paste should work:
// BEGIN Favicon invisible link
function bikegremlin_favicon() { ?>
<link rel="icon" href="/favicon.ico">
<?php
}
add_action( 'wp_head', 'bikegremlin_favicon' );
// END Favicon invisible linkYes, technically this too is an absolute path, but it doesn’t include the protocol (https) and the host domain (like www.bikegremlin.com), so it should work with any domain/website for as long as its “favicon.ico” file is placed in the root directory.
3. If you like being thorough or run some other tech/CMS
To get it all 100% right and by the book, you might like to follow these instructions.
You can create all the needed favicon files and code on this site (it’s free):
https://favicon.io/favicon-converter/
Save all the files to your website’s (domain’s) root, and add this code to your header (we’ll use the same function shown in chapter 2):
// BEGIN Favicon invisible link
function bikegremlin_favicon() { ?>
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<?php
}
add_action( 'wp_head', 'bikegremlin_favicon' );
// END Favicon invisible linkThe needed files:
favicon.ico (48x48 pixels)
android-chrome-192x192.png (192x192 pixels)
android-chrome-512x512.png (512x512 pixels)
apple-touch-icon.png (180x180 pixels)
favicon-16x16.png (16x16 pixels)
favicon-32x32.png (32x32 pixels)
site.webmanifestThe “site.webmanifest” is a text file containing the following:
{
"name": "Your-website-full-name",
"short_name": "Your-website-short-name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Of course, replace teh “Your-website-short/full-name” with your actual website name.
The same principle goes for other CMS and tech. Here is an example of how to add these links to XenForo (forum software).
