How To Create the Perfect Favicon

How To Create the Perfect Favicon 3

To add the favicon’s location to the header, place the following HTML between the <head> and </head> tags. Make sure to update it with your domain name and favicon file name: 

<link rel=”favicon” type=”image/ico” href=”” />

If you want to use all of the files generated by Real Favicon Generator, you can use the pre-written HTML provided by the generator. Here’s an example of what that might look like: 

<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon.png”>

<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>

<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>

<link rel=”manifest” href=”/site.webmanifest”>

<meta name=”msapplication-TileColor” content=”#da532c”>

<meta name=”theme-color” content=”#ffffff”>

Just make sure you save each of these files to the root of your site and use the same names in the HTML if you renamed them. 

A word of caution: Unless you have a child theme where you can safely update your header, you’re better off using a plugin to add the code. That’s because, if you add the favicon HTML to the header.php in your main theme, it will get replaced when you update your theme.

This article was originally published here.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Critical Vulnerability Patched in WooCommerce Upload Files×536.jpg On December 29, 2020, the Wordfence Threat Intelligence team was alerted to a potential 0-day vulnerability in the WooCommerce Upload Files plugin, an add-on

Read More »