How to add a favicon to your website/theme

Lesson Details:

Video Transcription : in this video I'm gonna show you how to install a favicon or favicon depending how you want to pronounce it, it is a small but actually very important part of your WordPress website any website so take a look if you don't know what that we can I'll show you you see how all these browsers here they did from different websites but they all have a logo that you recognize you know that this is YouTube you know that this is the outlook this is Gmail and this is something that I just made to show you this is WordPress so you kind of get to realize this right and the ones that don't have it the ones that have a kind of blink they don't stand out at all and when people have like a lot of browsers open when they're working they're easily reminded what they were working on when they were when they see a favicon there and they're able to get back to their work whereas if there was blank they kind of don't know what it was anymore and they don't see the title anymore so it's actually gonna increase engagement with your site a lot if you actually have a favicon and I'm gonna show you how to make one so what you need is I just made a dummy image you see it's a happy face you know this is our kind of default blog we're working from and you see I just made a happy face image you need a 16 pixel by 16 pixel sometimes 32 pixel by 2 little pixel file in image and if you don't have that just scale the image that you have scale that down to 16 by 16 or 32 by 32 and then you use an FTP file for me I use cyberduck in in the Mac system if you have you know any any FTP client will work and if you use cyberduck you see that I I mean a file called I'll show you I made a file called favicon that I see oh it's right here and you can just rename your any dot JPEG or a PNG file and rename is favicon.ico and uploaded here right to the root of your website right to wherever your website is you see how I'm showing you completely break out calm right to the root of that upload that favicon.ico file through FTP and then what you need to do there's one more step you need to do and it's a little bit of a complicated steps all what you through it um you need to go to your dashboard right this is your WordPress and you need to add go to appearance and you go to editor okay see appearance and then editor once you're there you want to see Natick navigate here and find your header that PHP file click it and then you will have a kind of thing like this show up and what we need to do is we need to add these two lines to your file and then click Save or in this case the button is called update file but essentially it will save for you and what I'm gonna do right now is actually I'm gonna provide these lines for you right and it's gonna be inside your header file right this is inside your header meta tag of the head of the header that PHP file okay and I just put it as the last lines before the closing time and what I'm gonna do now is actually I'm gonna make a lecture in this course that you were taking and I'm going to add that text so that you can just easily go and grab it okay okay so that's gonna be the name of the lecture so that you know what to look for and it's been a little bit slow so just bear with it then I'm gonna add you add content it's going to be text and I'm just gonna paste the stuff in there and the only thing I'm gonna change is I'm gonna say you are website okay you're gumming and the same here your domain so for you whatever your domain is put your domain in there okay I'm gonna publish this lecture and then I'm going to drag it to the to the appearance area where is it plugins themes and appearance and it's gonna be so look for it in the themes and appearance section of this course okay probably the lecture you're watching is gonna be right before that telling you that the next lecture will be this lecture anyway that probably was a little confusing but that's how you do it okay so now you have the text to add you know what to add lastly the only thing that might stop you here is if you don't have permissions if you don't have permissions to change files okay here is how you change the permissions and you go to the you know if you're the man can go to your terminal and you you have to SSH to your server and you have to enter these commands so you see where I am this is the the URL this is the directory where you need to go to it's basically whatever your server structure is and then your website and then WordPress can't themes and then a theme name so you do this forever for your team and then you have to answer this you have to enter this CH mo d 777 which is giving you all the permissions better that PHP which will enable you to make changes this will give you the permissions to make changes to that header file and when you are done you want to do a command 644 or whatever your server was originally set to which will limit the permissions so that it's more secure um and if you can't do this have your system administrator do this for you but you want to get you know you the purpose of this is that first you want to change the permissions so that you're made able to make changes to the header file and then you just want to make changes to the permissions so that nobody else can make header file so that it's more secure and it's not in the permissions are more restrictive so that some spammers or hackers can get into it okay and that's pretty much it that's kind of and then and then this will render as opposed to you know having something like nothing appearing at all or something like this appearing and just to make sure that you understand you gotta do this for your theme so this is inside your theme so if you install a new theme you've got to do this all over for that new theme okay so this is a something you do per theme so once you decide on a theme then you customize that theme this way so that's how you set the favicon you know hopefully yours is prettier than this although this is actually better than something in the blink so you know hopefully it represents your logo if you want to make a logo you can put your logo as your favicon because that that's the best case scenario and after you've set the favicon text by the way after you've said this after you've said this you don't have to set this anymore for your theme all you have to do is just if you have a new better favicon all you have to do is just re upload and overwrite the favicon here and it will there so that's pretty much how you do it and I'll leave you guys with that.