Hello, YouTube! And welcome to another exciting tutorial brought t you by TechSupportGoneBad.com. Okay, so today, we’re going to be looking at Favicon, and if you guys don’t know what a Favicon is, well, let me show you actually.
So right here, I have the TechSupportGoneBad web site opened up and if you see this little image in the corner of my web site, there is a Favicon right there. And that’s what a Favicon is, it shows basically that little image in the corner when open the tab, there is going to be a little image in the corner of this little header.
Okay, so now that you guys know what a Favicon is, let’s get started on actually making one. You’re going to want to open up a new Photoshop document. So go to fie new, and Favicons, their width and the height are 16 by 16 pixels. But since that’s a little hard t work with, we’re going to make it something that’s divisible by 16 and that’s easy to work with. So we’re going to make it 256 by 256 pixel, so that way, we could do whatever we want and it will be easy to work with, and then in the end, we could just actually size it down.
Okay, so I'm going to just name this Favicon one. Okay, as you see here, nice pretty good size, it’s descent. So let’s go started into making you. I'm just going to first of all, I'm going to choose the gradient tool. Now, you guys can make it however you want, but I'm just going to use the gradient tool. And let’s see. Black and green, obviously green, and that’s looking good. Let’s grab the text tool. And how about we type in TechSupportGoneBadRocks, because you know, I rock, yeah.
All right, so I'm just going to like to shorten it by saying TSGBRox. How about TSGBRoxmySocks. That’s awesome. Okay, so make this a little bigger. All right, so once you got your Favicon made, like however you want to edit. I didn’t really edited that good just because like I want to make it short, you know. So yeah, once you have your Favicon made, what you want to do is go to image, we have to like resize it back to 16 by 16 now. So go to image, image size and then for the width, 16 by 16, then press okay and it will resize this up and it will look supper small. So yeah, don’t worry about that because this is suppose to be supper small.
Okay, then click on file, save as. Now, this part is really important. I'm going to save it to my desktop and you don’t need to, that’s not the important. you could save it where you want. But the important part is the format you save it as. The file name and where you saved it could be whatever you want. So I'm just going to save it to my desktop and save it as file name Favicon one and the format. Remember the format can’t be anything, can’t be just anything, it has to be a .PNG file. So once you got it saved as a .PNG file, you want to go to—yeah, so once you got to save it as PNG file, you want to go to this web site because Favicons can’t just be any type of thing. They have to be a special file type.
So you have to go to ConvertICO.com and you have to convert the PNG file to an ICO file. So click on browse, find the icon that you just made right here, Favicon one, double click on it and press convert. It will convert fairly fast because obviously it’s a small file size. And then it will say, click here to download, obviously, to download, just right click, save in as and save it to your—this time, you have to save it to your web site folder, make sure, this is very important, save it to your web site folder then press save. You need to—obviously, you need to save it to your web site folder because you need to use this for your web site.
Okay, so once you have that save up, you want to open Dreamweaver. Now, we have to do some HTML. So we have to write some HTML today. don’t worry, it’s only a line of HTML. So, I just got the TechSupportGoneBad home page web site of the home page, open it up and design view. So if you are in design view, then you want to switch to code view. If you’re in code view, then you’re good. So code views up here, right here. So just press code view and you’ll see a bunch of coding.
Okay, so now is where you type the HTML. Okay, so I already had it typed for you guys, but I'm going to basically copy and paste this, this little HTML code into the video description. But the opening and closing tabs which in math, you referred to them as less than signs and greater than signs. Those, YouTube wont let me type. So guys are going to have to put those on your own. Remember, less than sign before everything and then greater than sign after everything went in.
Okay, so right here, so what you basically what want—well actually, this part, you guys have to put on your own. For example, if you saved it in your web site folder, if you saved it in the images folder and inside of your web site folder, then you want to type images/ (whatever the name is that you name). For example , right now, Favicon one. So let me type that real quick. Faviconone and remember .ICO, you have to remember that part .ICO. And then—and then space, forward slash—or not forward slash—slash and then greater than sign. Remember, I'm going to copy and paste that into the video description so you guys could just copy and paste it into After Effects. Another important thing, make sure you put it after the title.
So for example right here in the design view, you see the title as TechSupportGoneBad. So in the code view, you’re going to see it’s going to say open and close tabs, title, TechSupportGoneBad, close tabs/—r open tab/title close tab. So you wanted to put it right after the title part of your web site. So it’s going to say that little quote for the title then you want to press enter t make it on new line and then put that little code in there. And as I said, if you put it in your images folder, you have to type in images/whatever.ICO, but if it is just like there, you don’t have to put images. And if you put it in another folder, for example, you put pictures as images, make sure to type pictures/whatever.ICO
And that’s basically, so I'm just going to go ahead and hold control S to save it and you want to preview it by clicking on this little globe and previewing it in your default browser. Mine is Firefox, so I'm just going to go click it on preview on Firefox. So, Firefox will open u and you will see the little Favicon right there and your thing.
Right now, hold up a second. Right, the reason you don’t see my Favicon right here, it’s blank, because obviously I haven’t bothered to save it in my web site folder. But if you do it right, you should see, it should be—you should see the little Favicon right there. And well yea, and make sure to do it for each and every page of your web site, because for example, if I'm not home and I click on tutorials, the Favicon will disappear. So make sure to do it on every single page of your web site. And yeah, after you’re done, make sure to upload your Favicon file, the Favicon or whatever .ICO to your web site in your web hosting place. For example, if you’re using free webs. If you’re using free webs, we’re going to want to also upload the Favicon file. And well obviously, we’re going to want to upload everything because you just changed everything, but you’re going to want to also upload the Favicon file or else it won’t work because obviously your web hosting provider won’t know what to put. And if you saved it in the images folder, make sure to also upload your Favicon file and your images folder.
And so, basically that’s it, if you do it right, you should get a pretty cool Favicon right in the corner of the painting when you open a new tab. And so yeah, I hope you guys learned something today. Until next time, TechSupportGoneBad here and see you guys later.
Transcription by:
Scribe4you Transcription Services