HTML Favicons

Hello, and welcome to Educator.com.0000

This lesson is going to be about favicons (or "fayv" icons, depending on how you want to pronounce it).0002

Favicons are favorite icons; and they started back in the day when Internet Explorer 40009

decided that they wanted to have little images available by their bookmarks, when you bookmarked a website.0017

This is an example of Internet Explorer 6, because the functionality stayed the same way up through Internet Explorer 6,0024

where you have the little icon here for Internet Explorer in the URL bar;0031

and when you went up to Favorites and bookmarked a website, it would save it in your Bookmarks0037

and put a little icon next to it; and that is the favicon, or the Favorite icon.0045

And after that, it became something that Web developers like paying attention to, because it gives your website a more professional look.0050

And other browsers started implementing the same functionality.0060

So, this is going to be how to make sure that your website gets a good favicon.0063

There is basically universal support in browsers for this.0073

They are supported in all major browsers; older browsers might require you to bookmark the website before it actually shows up.0080

For example, this is Internet Explorer 6 again, and this is actually the same thing;0087

you can see, that little e icon has been replaced with the Educator favicon.0091

And that is only because you clicked on Favorites and saved it as a bookmark.0096

Most of the other browsers nowadays will find it automatically.0102

And they can appear in a lot of different places.0106

This is Chrome: it shows up only in the tab, as opposed to Safari here--it shows up only in the address bar, and not in the tab.0108

And then, in Opera and Firefox, it shows up in both, as well as in Internet Explorer.0117

The simplest way to implement the favicon is to create a 16x16 or 32x32 pixel icon named favIcon.ico.0126

It obviously has to be icon format; and you put it in the root directory of your website.0138

So, that is just...if your website is Educator.com, the URL to this will be educator.com/favicon.ico.0143

And this is the way that Internet Explorer 4 implemented the functionality, back in the day.0152

When you favorited a website, Internet Explorer would automatically check this location and see if there was a file named this.0159

And if there was, it would download it and use it as the favicon.0170

That puts some limitations, because that means that you can only have one favicon per website.0174

And you can't really control whether or not the browser is going to use it or not.0181

It just does, without really giving you a chance.0185

The W3C expanded this specification a little bit, and now you can put the icon of any name in any location; and you use the link element to do that.0189

You give it a rel of shortcut icon; and this is actually an illegal syntax here, because a space here should mean that it is a list of items.0203

But this is just one item; but you need to have it like this for Internet Explorer.0217

Other browsers will ignore the word 'shortcut' and just go directly to this word 'icon'; and they want just the word 'icon' syntax.0221

So, this will cover all your bases.0229

You need to specify the type as image/x-icon, which is the MIME type for icons, if you are using an icon image.0232

You can use other ones; I will talk about that in a minute.0241

And then, the URL to the location can be a relative URL or an absolute URL--any URL you want.0245

This would be how, if you have different sections of your website, you want different favicons on them.0252

You can use a link in each page to specify which favicon that page will use.0257

So, you could have a different one for every page.0265

And probably, if you have a favicon in the root directory named favicon.ico (although you could name it anything), it is going to default to that.0267

What I usually do is: I usually just want one favicon per website, so I will just do this and this, both together,0279

and make them the same file, and make sure that everything is covered that way.0286

Another cool thing you can do with Apple mobile devices is: they have a special icon that they use to click on their little screen touchpads.0292

And it is a little bit bigger; it is 57x57--and even, in some of the newer ones, it is as big as 129.0304

And they automatically apply some styling to it, so it gets rounded corners, and it gets a little bit of a shadow and some shiny, glisten-y effects.0310

And all that gets applied automatically, if you create just a regular-looking icon and link to it this way (apple-touch-icon instead of the shortcut icon).0322

And you can use the icon format again, or a PNG, or a GIF; and alpha transparency is supported.0333

So, you can see through it a little bit if you want to use that.0340

This is kind of a fancy thing to deliver just to users of Apple mobile devices.0344

And there is a chance that other devices may end up grabbing this, as well, because they might want it.0349

That is kind of how the Internet works: even though it says Apple here,0356

I can imagine in the future another web phone that has similar functionality taking this,0358

and not waiting for web developers to change this to specifically the value that would work for that phone.0363

To create the icon, probably the easier way to do it, if you already have some programs installed that can create PNG's or GIF's,0375

would be to just make a PNG or GIF icon, because a lot of newer browsers do support PNG's and GIF's as the favicon icon.0385

Obviously, it needs to be the right size; so it is 16x16 or 32x32.0394

And there are actually other sizes that it can be used as, as well, depending on the context.0399

For example, if you are saving a website as a shortcut on your desktop, it might be using a bigger size than 32x32.0404

But you definitely want to make sure that it works in 16x16 and 32x32,0412

because there are a lot of browsers that only support that; and if you have anything bigger, it just won't work.0417

If you do create your icon as something other than the icon format, like the Windows icon format,0422

you need to make sure that you give the right MIME type.0428

Your server will probably send it with the right MIME type automatically.0432

But you will also need to specify, in the link that we talked about a second ago, the MIME type with the type attribute.0435

Just a note here: I am recommending you use the image/x-icon MIME type, which is actually the older MIME type for this.0442

I think, in 2003, Microsoft...well, no, it was actually the W3C that came up with a new standard for how to do this.0452

Because it is a Microsoft functionality (this is vendor--that is what vnd stands for), this points out that this is specific to Microsoft's format.0463

But this is the one that you should be using for all favicons--this MIME type--after 2003.0472

But I like to use the old one, because it still works, because browsers are backwards compatible,0478

and because I am not completely sure that this new one won't cause problems in older browsers.0484

So maybe, in a couple years, I will start using this one; but for now,0489

I am just going to stick with this MIME type for the icon, although you will see this, as well.0492

Another thing to point out is that, if you are creating PNG's or GIF's instead of the icon file type,0501

you may be missing out on some functionality, because a lot of icon creation programs0507

will actually make one file that has multiple sizes.0512

So, if you have a 16x16, 32x32, 64x64...all these different sizes bundled into one,0516

then the browser that can only handle 16x16 will just get that and load that correctly.0525

But if your browser can handle higher resolutions, then it actually will use the higher resolutions in that single image file, or icon file, according to the context.0531

And you won't get these little 16x16 icons that get blown up into much-bigger-than-they-were-ever-meant-to-be and look very pixelated.0541

Here are some resources for you to create icons that have this multiple-sizing functionality.0552

If you don't want to spend some time to download an icon program, you can just use one of these three websites.0562

And there are many, many more; these are just three examples that I came across.0570

For example, iconverticons (or i-con-ver-tik-ons...a confusing website name)--let's pull it up here.0574

This is a very snazzy little thing, where you just upload a pre-existing image that you have.0583

So, I think if you upload one that is bigger than the size that you need (like if you upload a 500x500 picture), it will just size it down to the appropriate size.0591

Or you can (and I recommend, actually) create something ahead of time that is 32x32, so that you don't get pixelation or resizing, and you have more control.0601

But it will take JPEG and GIF and PNG formats.0610

So, you click here, and then you can go into Options here.0614

And the only one you want for this (because this is if you are creating a favicon, not just a regular icon) is this one right here, Convert to favicon icons.0618

And then, it will make 32-bit here; and then, when you click Convert, it will process it;0630

and it will give you a little image that you can download, and it will be automatically one file in both 32x32 and 16x16.0635

This is favicon.cc; this is a website that allows you to directly create your icon.0644

This is 16x16 pixels here, and I can draw on it with my cursor or mouse.0651

And you can select colors, and there are a couple of other tools like this.0659

And then, at the end, you can see a preview down here of what it looks like.0665

So, you can look at what you are drawing as you go; and at the end, you will be able to download it.0670

And then, when you put it up in your server, it will work.0675

A note here: you are probably not going to be able to get this to work locally on your home computer.0678

It is going to work best if you are trying it online, at an actual server,0685

because then you don't have to worry about some of the complicated things that make favicons work or not work.0689

And this one, favicon.co.uk, is also very snazzy.0696

It lets you pick your sizes here--16, 32, 48, 64--and then you upload an existing image, and it will convert it for you automatically.0701

There are also programs that you can use that are a little bit more advanced.0713

I am on a Mac right now, so I will give you a little quick peek at this one, Iconographer.0717

This is Iconographer, and what is very cool is that I can select multiple sizes here, and I can pick which ones I want to save at.0728

Let's say I am going to draw this one right here.0738

You can see: I am drawing it, and then, when I let go, it gives me a little preview.0742

And then, I can click a smaller size and continue making my icon.0747

And I can make specific edits to the specific sizes, instead of just creating one size and then it sizes down (you might get some pixelation).0754

When you are only working at 16x16, one pixel really makes a difference.0764

So, it is nice that you can edit them one at a time.0769

And then, you can save, and it will put it all together.0773

And then, here are some resources for you if you are using a Windows computer.0775

Just copy these URL's down; and they are free, as well.0780

And then, Linux users, I think you should be able to find icon creators, as well; but I will leave that up to you.0783

That is it for favicons; thanks for watching Educator.com.0790