Oh hi folks, Olly Connelly here at guvnr.com only at guvnr.com and welcome to this garb tutorial. Just a quick chat really, I’m just going to explain a bit about favicons; how to produce them in using Photoshop and how to implement them into your website.
So, well first of all, what is a favicon? It’s this thing here, here, here, here. Now that is quite a well named one. And not here, which is why I need to choose one. And why do you have them? Well, to differentiate very easily for the user between different tabs. I suppose a little bit of how do you show that you know how to produce them. But mainly, it’s usability. It’s so the people can see which site is which because here you can’t differentiate so well between these two tabs can't you?
So, we’re going to Photoshop and we’re going to make something very, very simple because I’m in the best of the icons tend to be pretty simply. And so I am just going to take a little slice out of my logo and create a new little file and paste that in there. And we won’t worry about that background yet being a bit too dark. But the main program we have with this is a site that has a rectangle and I am going to be having to resize this because if you look at the way favicons are; they’re square. They’re actually 16 pixels x 16 pixels. And so you need to allow for your initial image having a constrained proportion, so that your logo isn’t being ruined basically.
So, what I am going to do is this is a lot bigger than 16x16 clearly. It’s more like a 160; 160 pixels or so by something similar. I am going to change the canvass size to a figure which is the visible by 16 so that my routine as much graphical integrity as possible.
And so I am going to make it 192 pixels x 192 in this case, which gives me a nice square to work with. And then I am going to change my background color. In this case, I am going to choose that color there which is just a very soft blue. And I will fill that. And there we have it basically. It’s as simple as that. I just need to change the size which is 16x16 and there is my favicon; a very simple favicon. I’ll just need to save it.
Now, in Photoshop; Photoshop isn’t bundled with the appropriate Plugin to allow you to save as an icon file; this thing here. What you have to do is download a Plugin which is free and I will show you where you get that.
You need to get that from this place here; telegraphics.com.au/sw. And that you will find posted out at address on the accompanying post—blog post on my website guvnr.com if you haven’t written that down in case you know in time. But you will find it there on download to the Mac for Windows and that is the file you need. It will come with documentation. I know because I’ve done it. It will come with a documentation you need to explain how to implement it, so that you can save files as an ico file.
And I am going to save that in that folder. In my images folder for my local host website and I am going to call it favicon. And then I am going to go to my explorer and refresh that page. And there is it. That is my favicon which I need to upload it to my FTP site. So there’s actually—it’s on the server which is hosting the live website.
And that’s there now. All I need to do is to link it. And so, if I open up my index.html, in this case, it’s called header.php but to all intent and purposes, this is the same thing. I basically need to go into the head section of this document. And I need to type in.
Now, this is where you need to type in. You need to type in
Okay, so we’re just going to save that and we’re going to pop it up onto our sites like and so quite a lot of files to wait through here but basically, that’s it. I am not going up. And now, it will be live. So it’s not the law because this is Firefox. For some reason, Firefox takes a long time to cache a new favicon file. It probably takes a couple of hours or so before the thing cache. But hey and it’s not bad but if we go to Chrome which is another browser and type in—it should be here. It’s a little bit quicker. There you go. There’s the favicon there. It’s a bit quicker caching in Chrome.
Just one last point, if you don’t want to produce your own favicon using Photoshop or your graphics editor, there’s another you can do. You can type in favicon generator into Google and you can see there’s a whole bunch of them; a whole bunch them.
So we’ll go and check out one of those and it’s pretty simple. You—in here, you go for example just import an image. And you just choose a file which will be a basic graphics file or maybe an existing logo or something like that. And then just—it will generate your favicon for you at the dimensional 16x16 pixels. And then link it into your site and look already cool like—actually I don’t in Firefox but at least I do in Google Chrome.
The proof of the gait if you’re probably on my site at the moment unless you’re watching this on YouTube or something and you’ll be able to see that I’ve got a favicon there. And so I hope that’s been useful. Go and favicon away. And come back some time and check out some more tutorials. Come to guvnr.com and get my feed and then you will see the review of the garb tutorials as in when that I videoed them. Thanks for listening. Ciao.
Transcription by:
Scribe4you Transcription Services