Hi, in this video I’m gonna show you how you can add a favicon, fav-icon, favorite icon, favicon… I mean just a simple icon in the top of your browser whenvisiting a website. Also this icon is used when someone uses your website as a favorite save it for later, and also they will see it when you add a website to your iOS, and also you will see this icon when someone is searching in Google. Because they’re adding it to hide their advertisements.
So there are three ways to implement those favicon icons to your website, it’s very easy. The first one is to use the WordPress theme customizer. The second way is to install a plug-in which will do the work for you, and the third way is of course how to do it manually by using a child-theme. I will show you all three ways so let’s get started with number one.
So when you visit my dummy website at wpressdoc.com you will see that there is no favicon installed on this WordPress installation. I will show you how to do that. Just log in to your WordPress dashboard. From here you go to appearance and customize. Welcome to the WordPress customizer. Here you can change a lot of things side wide. So let’s go to general settings, site identity, and here is our site icon! Yes! We press ‘select the site icon’ you can use any image you want but just make it square. We press ‘crop image’, and here we go. WordPress added our image to the websites favicon. Now let’s check on the front-end if it’s really there. And upon loading our website you will notice that our little favicon has been installed correctly. Well done!
So let’s dive into method number two, because some themes have just hidden their site icon or favicon option inside your theme. That’s no problem you can just simple use a plug-in to do the work for us. Let’s go to the WordPress dashboard. We go to ‘plugins’, ‘add new’ and we type in ‘favicon’. And we go choose the WPfavicon. We press the button ‘activate’ then we go to ‘settings’ and we press ‘favicons’ and here we place our URL. Well where do we get a URL? We get it from the media library. We go to our library, we press the image we want to use as a favicon. We press the copy link we go back to this place and we paste here the link to the image. We press ‘save options’. And our settings are safed. We go to the front-end of the website and here you see that our favicon has been added on the left side corner. Well done!
So if you find yourself in dark ages of your WordPress website and you can’t install any plugins or you can’t use the WordPress customizer then there is only one other way and that is to code it in manually in your child theme. So what should we do to do that? First of all we need to generate a favicon. So you can generate a favicon icon on the website www.favicon-generator.org. Here we press ‘browse’ and we enter the file we would like to use for our Favicon. Remember it should be a square file. And press the button ‘create favicon’. They will generate an entire set of favicons. So we press ‘download the generated favicon’ and then we get a zip file containing all the files we need. We press ‘save this file’ and when you look inside this folder they have created all kind of icons and favicons just for us to use. It is very handy. So we’re gonna use all these files.
So the next thing we should do after downloading it we should select this entire section and we press copy because we’re gonna need it. So save it in a file or just let this tab open. We’re gonna use this information later on. So what to do next, we open our FTP client and we connect to our website. So the first thing you need to do when you have connected to your website, with FTP you have to upload all the files that we have gotten from the website. So we just drag them place them inside of the root folder that is public HTML and there we go we upload all the files. So to wp-content go to your themes and here we go to your main theme. Well