A favicon (also called site icon) is a tiny image which is shown next to your site title in the browser. A favicon contributes a great deal to your website identity. Moreover, when website visitors want to add your site to their homescreen on mobile devices, the site icon will be used to acces your site.
Since WordPress 4.3 it is easier than ever to upload a personal favicon to your website. In this quick WordPress tutorial we are going to point out a few of the file requirements for the favicon and how to upload it to your WordPress website with only a few clicks in the WordPress dashboard.
Creating a favicon for your WordPress website
WordPress requires a squared site icon of at least 512 x 512px. You may display whatever you like – logo, image, symbol or else and you can have a transparent or colored background as you prefer. To create a favicon it is best to use an image editing software just like the free open source Gimp software, Photoshop or else. Regarding file size, pixel resolution and other related technical aspects, we are not going too much into detail here, just a few recommendations: Keep the file size as small as possible, make sure your favicon is fairly visible / sharp and save your file as .jpg, .png or .gif.
Uploading your favicon to WordPress
If you have created your favicon with the correct size and shape (512 x 512px, square) or in case you already had one ready that meets the requirements, you can now upload your site icon to WordPress. To do so, please follow these few and simple steps:
Step One: Login to your WordPress admin area and open the WordPress Customizer by navigating to Appearance => Customize => Site Identity in your WordPress dashboard.
Step Two: You are now inside the Customizer where you can also edit your site title and the tagline. To select the site icon, please click the Select Image button and you’ll be referred to the WordPress Media Library where you can either upload your favicon which you have just created or you can simply select your favicon if it has previously been uploaded to the library.
Note: If your selected favicon extends the size of 512 x 512px, WordPress will ask you to crop your image respectively ask you to choose a suitable cutting of your favicon. WordPress will show you a preview of how that would appear on your site. To prevent this, simply upload your site icon with the correct size.
Change or remove your site icon
Once you have uploaded / selected your favicon, it will appear next to your site title in the browser and also can be used by visitors to save your site to their homescreen on mobile devices. You may change or remove the site icon whenever you like if the current version doesn’t appeal to you or needs to be updated. And that’s basically all you need to know about displaying a site icon for your WordPress website.
In case you are running an older version of WordPress (4.2 or below), you’ll have to follow another tutorial from the WordPress Codex: Creating a Favicon or update WordPress to the latest version (highly recommended).