How To Add a Favicon to WordPress

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

you could be using any theme at all just, go through your main theme. I use Divi so we go to Divi. You will look for the file ‘header.php’. There it is. You just download this file. You go to your child theme and here you upload your file again. Here we go. Then you edit this file by view/edit and we will see the file.  Here we can place the code that we got from this website. We copy this code. We go to our header.php we look for the closing tag of the head section and here we just past in our favicon icons. Here we go. Press the ‘Save’ button and FileZilla will prompt us ‘the file had changed do you want to upload it again? Yes please, do that. so the file has been uploaded to header. Now to check if everything works.We go to our website on the front end, we reload our page and we’ll see; Yes our icon has been added to the website. if you go to ‘view page source’ then you will see where we have added all the code, it’s right here. So well done! You have just added your favicon to your website the manual, hard way. Congratulations.

Yes you did it! Congratulations! You have just placed a favicon in your WordPress website and it looks way better don’t you agree? Congratulations well done, I am proud of you. So I’m really curious what you made of your favicon and where it is at. So please leave in the comments your website and I will check it out ASAP. If you have a question, also you can place them in the comments and I will respond. I will read all comments and respond to your questions immediately. So thank you for watching this video, if you have liked it and if I helped you out please don’t forget to hit the like button, and if you want to know more about WordPress what we can do with it how to optimize it, make it faster, work on your SEO, just press that subscribe button and you will get notified when I upload a new video. Have

a awesome day.

Because life is more than just adding a favicon to websites, here is the quote for today. “We all want the rainbow but we don’t want the rain”. And I really want you to think about that. We all want to do things in life we, want the good stuff, but we don’t want to grind for it we don’t want to work for it. Well I got news for you, without the rain, there is no rainbow. Have a awesome day, good luck!