Preview

Start a free Courses trial
to watch this video

How to Make a Favicon

Name: How to Make a Favicon
Uploaded: 2014-02-13T15:10:59Z
Duration: 2124 s
Description: Learn how to design and create favicons with Treehouse web design teacher Nick Pettit. From sizing and best practices to implementation and advanced techniques, this Workshop will make you a favicon expert in no time.

35:24 with Nick Pettit

Learn how to design and create favicons with Treehouse web design teacher Nick Pettit. From sizing and best practices to implementation and advanced techniques, this Workshop will make you a favicon expert in no time.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Read Nick's How to Make a Favicon blog post.

Quickly create a favicon with X-Icon Editor.

Take a look at the Favicon Cheat Sheet on GitHub.

Create a dynamic favicon with favico.js.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Well hey everybody, I'm Nick Pettit, @nickrp on Twitter. 0:04

And today we are going to learn how to make a favicon, so let's get started. 0:08

This is actually something that I blogged about recently in a 0:13

post called How to Make a Favicon on the Treehouse blog. 0:17

We're gonna talk about how to pronounce it. 0:22

Some of the design challenges involved with making a very small 0:25

image, as well as browser compatibility, how to 0:29

deal with high resolution displays versus regular resolution displays, 0:33

as well as how to deal with some of 0:37

the difficulties when trying to refresh a favorite icon. 0:40

So we're gonna get into all that. 0:44

First up though, I wanna talk about design because favicons 0:46

or favorite icons are literally smaller than a postage stamp which 0:50

is usually used as a hyperbole to describe a low resolution image. 0:55

They're even smaller than that. 0:59

If you're not familiar, a favorite icon is the little icon that 1:01

appears in browser tabs or in the address bar of your browser. 1:06

So, in this blog post to have a couple of examples that are bit larger. 1:11

So, you can see them. Here is Instragram, YouTube and Apple. 1:16

So, they have these 1:19

little favicons right here. 1:20

There's also Wikipedia and a couple of 1:22

other brands here that have favicons as well. 1:25

Pretty much any professional website is going to have a favicon. 1:29

Now, I mentioned there's some controversy in how to pronounce it. 1:33

I've heard it said fav-ee-con, I've heard fave-icon, 1:38

and I haven't really heard any kind of consensus. 1:43

The most I've heard is favicons. So, that's what I say. 1:45

I am sure there is many people that will tell me that I'm wrong. 1:49

That's okay. 1:52

But the pronunciation isn't really important. 1:53

It's actually the technical details and design of 1:56

favicons that can be a little bit tricky. 2:00

Now, lets, let me show you why it's 2:02

so difficult to design one of these small images. 2:05

I'm going to go to 2:09

Facebook brand er, let's see is it Facebook branding? 2:10

I'm just gonna type it into Google. Yes, Facebookbrand.com and. 2:15

This is Facebook's official brand resources, so 2:23

you can download their logos, like buttons, 2:26

all sorts of screen shots of their mobile apps and desktop apps, and so on. 2:29

So, I'm gonna download their 2:33

Facebook logo, because if you were making a 2:36

small image like this, you might take your logo. 2:38

And just resize it in PhotoShop. 2:42

Right, so, I've downloaded this as a ZIP. Oops. 2:45

There it is, and there's a couple of different file formats here. 2:50

Here's a bunch of PNGs, so I'm going to take this high resolution one. 2:54

And pop it into Photoshop. 2:59

So there's what it looks like. 3:01

Let's open up Photoshop and bring that in there. 3:04

And, 3:07

lets say that you were designing this logo and if it's time to make a favorite icon. 3:10

Here's actually what it looks like at full resolution there. 3:19

So, it's pretty high res. 3:22

So, we're gonna resize it to a typical favicon size. 3:24

Let's go to about 28, because I believe that's Facebooks favicon size. 3:29

Now, if I zoom in here. You'll see all sorts of junk happening 3:37

around this nice blue background and white F letter. 3:42

You can see all sorts of pic, pixelation occurring that isn't really very good. 3:48

It's, it's basically a situation where some of these pixels are kind 3:53

of falling between two of these larger pixels when it gets resized and 3:57

so it just takes this average and its ends up being a very blurry 4:02

image. Now if we go over to Facebook and 4:06

let's say we go to /favicon.icl and 4:11

that's where a favicon is typically 4:17

stored. So, if you go to /favicon.icl on 4:22

any website. It's sort of a special file name that's 4:27

treated similarly to index.html. It's just a default that, 4:31

most servers will recognize we can grab Facebook's favicon here. 4:37

Although I'm actually just gonna screenshot it, so you can 4:45

see exactly what it looks like in the browser tab. 4:47

I'm gonna take a little screenshot here, now let's go back 4:49

to Photoshop and open that up and see what it looks like. 4:53

So it should be on my desktop. There it is. 5:00

Let's see if we can tear off these windows so we can compare this easily. 5:03

So let me crop this, just so you can see what's going on here, and make a fair 5:12

comparison. Here is the one we, we 5:17

resized and here is what Facebook's actual Favicon looks like. 5:22

So you'll notice that this actually looks very crisp and clean. 5:28

They very intentionally made these white 5:34

pixels here. 5:38

The blue pixels here are very cleanly separated. 5:39

You don't get all this kind of junk 5:42

going on here where this a gradient between different 5:44

colors of blues and whites and then they 5:47

also added a pixel perfect shadow just below that. 5:50

So, one trick when you are designing a favorite icon. 5:55

Is to not actually resize it but instead 6:00

try to draw it, pixel by pixel if you want the best results. 6:04

However, that can be a little bit 6:10

overwhelming if you have never done that before. 6:12

So, one other trick, if you do just wanna resize your 6:15

logo is to change the way that the image is resampled. 6:19

So, in most image editing programs like Photoshop, you can 6:25

adjust the image sampling. So, if I were to resize this, say 32 by 6:29

32, and we resampled using the Nearest Neighbor 6:34

algorithm instead of the Bicubic, we'll get slightly different results. 6:40

So let me zoom in so you can see what this looks like. 6:45

And here, 6:52

we don't get any of that blurry stuff happening, we 6:54

get very crisp and clean separation between the two different colors. 6:57

Now, this won't look perfect as a favorite icon. 7:01

You will still need to do some pixel by pixel editing but it 7:04

will get you much closer to a final result that looks like this. 7:09

So, if you need a really solid starting point, 7:14

that's a great way to do it and then 7:17

you can go ahead and edit using the Pencil 7:19

tool in Photoshop to make pixel by pixel adjustments. 7:22

So let me see if I can do that right now. 7:27

So you can just click with the pencil tool 7:29

just like that to edit one pixel at a time. 7:31

And you'd be surprised it actually doesn't take you as long as you'd think. 7:35

Because the image resolution is so low. 7:40

There's actually not that many pixels 7:43

here for you to even edit. So, you can do it pretty quickly. 7:44

It is still a bit tedious but it's not terrible. 7:48

So, on a larger note, when you're designs favicons, you 7:52

wanna make sure that they are representation of your brand. 7:56

It's not always best to just go with your logo 8:01

because your logo might not look good at small sizes. 8:04

It might not be a square 8:08

enough image to look good as a square favicon. 8:09

And some tricks that different brands use, is to use maybe their logo 8:14

mark or a single letter that strongly represents their brand. 8:20

So if I go back to that blog post and we look at these examples here. 8:25

You can see, Instagram actually just uses the Instagram logo. 8:29

Although there's 8:34

no text with it. 8:35

They don't have that scripty Instagram logo text with it. 8:36

Apple is a really solid example. 8:41

They have the Apple logo which is recognized worldwide. 8:43

It's really meant to be put absolutely everywhere. 8:48

So they've done a really great job of making 8:52

a logo that also works as a favorite icon. 8:54

However, if you look at some other brands here 8:58

YouTube is another example, but also Wikipedia, 9:00

Disney Google, and to some degree, even Facebook, 9:03

they don't really have a logo that necessarily 9:08

worked perfectly as a small square favorite icon. 9:11

So they've done an approximation that is representative of their brand. 9:15

So for example, Disney has their trademark D here, which isn't 9:20

their full logo, but it's recognizable enough 9:26

that the people will know what it is. 9:29

Same with Wikipedia. 9:30

They have this very unique W here as well as Google. 9:31

They have, you know, this g here with the blue Google color. 9:36

So if you can't make your logo work perfectly you can 9:40

use a logo mark which is a close approximation of your logo. 9:45

Another tip is not to use 9:49

any kind of text because at these sizes, although may seem 9:51

obvious, it is worth mentioning, text is not going to look good. 9:54

Now, when you're designing in Photoshop, you wanna start 9:59

with the largest size and work your way down. 10:04

So, it depends what types of platforms you're trying to support, 10:07

but in most cases if you're just trying to make a 10:13

favorite icon you can go with 64 by 64 and 10:16

then work your way down. So once you have a good 64 by 64 version 10:21

of your logo You can then make a 32 by 32, a 16 by 16, and a 10:26

few other square sizes. So, what are those 10:31

square sizes exactly? Well I want to show you something called 10:36

the Favicon-Cheat-Sheet. 10:41

This is a page on GitHub that has all sorts of great information 10:46

about how to design good favorite icons. Now, 10:52

one thing you'll notice right off the bat is that there is an ICO file format. 10:57

We'll get into how to export files using the ICO format 11:03

in just a little bit here but typically you can use 11:07

a .png to create the ICO file. Now, lets get back to image dimensions. 11:11

You'll need 16 by 16 and 32 by 32 at the very least. 11:18

This is the minimum that you can create for a favorite icon and get away with it. 11:24

This is the default required by Internet Explorer. 11:29

And if you use a PNG in addition to ICO, Chrome 11:33

and Safari may pick the ICO over the PNG. 11:37

So it's almost always best to actually just go with an ICO. 11:41

Again, we'll talk about how to export that. 11:46

But if you look at these different sizes 11:48

here, if you're very obsessive you can create all 11:51

sorts of different favorite icon sizes ranging from 32 11:55

by 32 all the way up to 228 square. 11:59

So what are these? 12:03

Well, the first one is just kind of a basic 12:04

size that's gonna work on a lot of different browsers. 12:08

If you want to support iPad and other 12:12

iOS devices such iPod touches, iPhones and so on. 12:15

You, you're gonna wanna create a few additional sizes here. 12:20

Now, if you put these in the favorite icon file. 12:25

They may not necessarily come up. 12:28

You're probably going to need to use additional markup, which you can find here 12:30

where you use the rel attribute in your HTML to say, you know, 12:36

that this is a touch icon and you want that to be on Apple devices. 12:41

We're not gonna get into that, I'm actually going to make the 12:46

distinction between those touch icons and what is typically known as a favicon 12:48

because we're just gonna talk about favicons in the browser. 12:54

However, that's something to keep in mind, if you do want to 12:59

create those touch icons, this is a good opportunity to do that. 13:02

You can make them at those larger sizes if you choose. 13:06

Just be sure to start with the largest size 13:09

that you wanna support and work your way down. 13:11

A couple of these others are for iPhone at retina sizes. 13:14

Of course, there's probably not too many 13:18

iPhones out there that are not retina anymore. 13:20

So, it's best to go with this larger size if you wanna support that. 13:23

There's stuff for the Chrome Web Store, IE10 Metro Tiles Opera and so on. 13:28

So you can get pretty in depth with this. 13:35

However, we're just going to create an ICO File. 13:38

So, there's a few sizes 13:43

that we wanna support. 13:45

Today, we're gonna do a 16 by 16, 32 by 32, and 64 by 64, but there's a 13:47

few other sizes that you may wanna support if 13:53

you wanna do Windows site icons or IE9 pinned sites. 13:56

You can do 48 by 48, and 24 by 24, in addition. 14:00

So this cheat sheet is super handy but basically covers 14:06

cross browser compatibility. 14:11

So, if you're wondering about how to make a favorite icon that's gonna 14:12

work across a lot of browsers, this is a great place to look. 14:16

One other tip is that you actually don't 14:20

want to mention your favorite icon in HTML. 14:23

You'll see this on a lot of websites. 14:26

They'll use a HTML tag, I believe it's link, to reference the favorite icon, 14:28

but it's actually better to just not reference it at all and 14:35

just put it /favicon.ico and that will work all the way back 14:39

to Internet Explorer 6 and I think there is only like, one 14:44

really obscure browser that's really old that that's not gonna work in. 14:48

It's mentioned in the cheat sheet well. 14:52

So, just go with favicon.ico if you want the broadest support and you wanna do 14:54

the simplest thing possible. 15:00

Obviously, you can get more in-depth with that and use ICO and PNG files. 15:02

If you want to, but most of the time it's really not worth it 15:07

unless you have a very specific audience that you know you want to target. 15:12

Whether that's in, you know, older versions Internet Explorer or 15:15

particular mobile devices and so on. So we're just going to make a fit, 15:21

a favicon.ico. So, let's look at some tools that will 15:26

allow us to do that. I'm going to go to xiconeditor.com. 15:31

And here you'll see this wonderful editor that allows you to upload your imagery. 15:41

And then you can place them into these various 15:47

sizes so 64, 32, 24 and 16. 15:51

And then you can export it, so let's see what that looks like. 15:55

Let's grab another file. So let's actually go to 16:00

Treehouse, and see if we can take this Mike the frog image. 16:06

Actually I'm gonna go. I take that back. 16:11

I'm gonna go someplace else. 16:15

Let's go to Facebook and 16:16

let's see if we can grab their favicon. So I'm gonna save this out, to my desktop. 16:21

And there should be multiple sizes in here. 16:32

If there's not, we can try something else. 16:34

Oh, yup. 16:37

It doesn't look like there's multiple sizes. 16:38

So let's try Apple. And let's go to favicon.ico, 16:40

there we go. Let's try that one out. 16:49

[BLANK_AUDIO] 16:53

Hm. 17:00

Doesn't look like they have 64 by 64 supported either. 17:00

well, instead of doing this and importing an ICO. 17:06

Let's do what we would normally do and let's go 17:10

into Photoshop and make our own favicon real quick here. 17:14

So, I'm gonna create a new file and I'll make it at 64 by 64. 17:19

I'm gonna zoom in so I can see the pixels here. 17:26

Can I see them? 17:30

No not quite. That's okay. 17:30

I'm gonna make a few shapes here and 17:35

let's say we wanted to make a favicon that was just a plus button here. 17:40

So, we'll drag this out. This isn't gonna be perfect, I apologize. 17:50

There we go. 17:56

So, duplicate that layer and rotate it here. 17:58

There we go. 18:05

So that's our favicon and obviously it's really simple and we want 18:07

it to be pixel perfect so I went with a very simple shape. 18:11

So, we're gonna use the save for web feature. 18:15

If you go up to File and go to Save for Web. 18:20

It'll bring up this dialog box and you can save it as a PNG 24-bit file. 18:24

So, let's do that and we'll save our 24 version. 18:31

So, I'll this favicon or I'm sorry 18:38

our 64 version. Favicon64. 18:41

Now we need to re-size this and again 18:46

I'm gonna use Nearest Neighbor instead of Bicubic. 18:50

So let's do 32 by 32. 18:54

There we go and you can see how this re-sized. 18:56

It's still pixel perfect. 19:00

I'm actually gonna undo that. 19:02

Just so you can see what it would look 19:05

like if I used a different image sampling algorithm. 19:06

Let's do 32 19:10

by 32. 19:11

Mh, it's a little hard to tell, but even at 19:12

the edges here, you can see that it's not quite pixel-perfect. 19:17

It's, there's already some blending happening. 19:21

If I were to make this even smaller, I 19:23

would imagine that additional blending would happening Would be happening 19:25

along the green and white areas so, let's go ahead 19:29

and do what we were doing before, using Nearest Neighbor. 19:33

Make the 32 size. Save that out. 19:38

By the way, the hotkeys I used to do that are Cmd+option+shift+S on a Mac. 19:41

Don't know what the Windows hotkeys are off the top of my head, but if you just go 19:49

to file, and save for web, you'll be able to see the ho keys right next to it. 19:52

So, let's save that for web. 19:57

Again, it's not perfect, you can actually see that it's slightly off center. 19:59

I'm going to pretend that's 20:02

part of our branding for some reason or another so lets save that out. 20:03

We'll say favicon32, and let's do a 24 20:09

version because I believe, yes, X-Icon Editor supports that. 20:15

Now while I am doing this one other thing I 20:18

want to mention is you don't have to use X-Icon Editor. 20:20

There's a number of those different tools that will help you create those ICO files. 20:24

In fact, I think while back, there used to be a Photoshop plugin that would do it. 20:29

I'm not sure if that's still available or if it's free or what. 20:34

But that might be something to look into. 20:38

There's also realfavicongenerator.net. 20:40

So, that is a good resource as well that can help you generate these. 20:44

So just look around. Use the one that you like. 20:49

You don't have to use the one that I'm using. 20:51

It's perfectly fine. 20:54

So, now I've got all of our various sizes 20:55

here 64, 32, 24, and 16. 21:00

I'm gonna go back to X-Icon Editor and I'm gonna 21:03

import these images. Now, I can import these one at a time. 21:07

So, let's say I wanna do my 64 one first. And, I have this image 21:11

here and I'm gonna say, I just want this to be my 64 version. 21:20

So I'll hit OK, and bam, now, it's 64. 21:26

Now I can do this for the other sizes. So here's 16. 21:30

I probably should go in order here, but that's okay. 21:33

It doesn't matter. 21:36

And let's grab our 24. There 21:39

we go. And then finally, I'll get my 32 size. 21:43

There we go. 21:51

Now, like I said, it is slightly off center. 21:53

Please excuse my rushed icon here. 21:55

You spend a little bit more time designing it than I did. 21:58

Now looking at these different sizes, it looks like, look at that. 22:02

We have a slight problem 22:07

with the 24 version. 22:09

And, my guess would be, I didn't use 22:10

Nearest Neighbor resampling there, I probably used Bicubic. 22:13

So, let's go back, and see if we can undo the damage there. 22:16

So, image size, see, 24, Nearest Neighbor. See if that gives us a 22:21

better result, yes, looks like it does. So favicon 22:28

24, place it. Let's go back, import, 22:34

upload, favicon 24, and check off 24 there. 22:40

See if that fixed it. Yes, it did. 22:46

Okay. So that's probably what happened there. 22:48

So now we have all my different image sizes and as I click around on 22:51

these you can see X-Icon Editor actually gives 22:54

me, you guessed it, a pixel editor here. 22:57

Hence the name X-Icon Editor. 23:00

So there's a couple of tools up here that are similar to Photoshop. 23:03

I can click the pencil icon here, and start editing. 23:06

I'm not gonna do that. 23:10

If you don't have PhotoShop, this could be 23:11

one way that you could actually make a favicon. 23:14

I think that's kind of crazy to try and do. 23:17

So avoid that if you can. It's best to do this in a more robust tool 23:20

like Photoshop. So, now we have all of our image here, 23:25

images here, we can say export, and it says your icon has been created correctly. 23:31

So that's pretty cool. 23:38

And now we can export our icon. 23:39

And now we have this nice little favicon.ico. 23:42

If I can show this in the finder, 23:46

nd you know, I wonder, if I just open this up in the browser. 23:48

I bet it will show up in the upper right. Not quite. 23:56

So, looks like, I am gonna actually have to bring this into a webpage. 24:00

So, I am gonna open up Sublime Text 24:07

here and just gonna take my favicon here. 24:13

Actually, I am just gonna save this actually, real quick. 24:20

So, lets make a new folder, .website. And inside I'm gonna say index.html. 24:25

I'm not actually gonna put any HTML in here. 24:31

At least not yet. And, then we can move our favicon 24:33

over to our website folder. Let me do that real quick. 24:44

It's a website. 24:51

Now let's see if that did it. Hm, not quite 24:54

there's probably something else I need to do there. 25:00

Well, 25:09

one thing I do know is that Treehouse actually does have the favicon referenced 25:12

in their HTML. So, let me grab this here 25:17

and let's see if I put that into index.html if that will bring it up. 25:26

The browser should be fairly forgiving here so I 25:33

actually should be able to see this, just fine. 25:37

A-ha. 25:41

There we go. 25:42

So, you'll notice I didn't actually have to put any other 25:43

markup there, just putting the link to the favicon was enough. 25:46

So now it's displaying. Right here in our browser tab. 25:52

Now something that you might run into when you're creating favicons is 25:57

difficulty in refreshing them, this is a difficult error to reproduce 26:02

if it refreshes just fine, but I'm gonna try to reproduce it here. 26:08

So, I am going to make some, some markings here. 26:12

Just so we can see that this is a 26:17

different favicon. I am just gonna X-Icon 26:22

Editor to mark these up and now, I am going to export this again. 26:27

But now, I have another favicon.ico. 26:32

So if I drop that and 26:38

replace the file, then I go back to 26:43

index.html and try to refresh, oh look at that. 26:46

It actually worked perfectly. 26:49

So, [LAUGH] this is actually a bad example. 26:51

However, a lot of times when you're developing websites 26:54

you'll find that it's very difficult to refresh the favicon. 26:56

It will just stay with whatever your favicon 27:02

was previously and for whatever we, weird reason 27:05

the browser will just hold onto it and it will cache it very, enthusiastically. 27:09

So, a way to break that cycle and make 27:15

the browser think that it's actually a new file. 27:17

Is to add a queried parameter to your favicon. 27:21

So, if we go back to Sublime Text here, 27:25

you'll notice that I actually added this into the HTML. 27:29

Normally, you wouldn't want this there. 27:32

For best compatibility and, you know something that'll work 27:35

on many browsers, you don't wanna have this here. 27:40

You have to have a pretty specific reason to be using a PNG and other various files. 27:44

However, if you're trying to refresh it, you can add this 27:49

line to your HTML and then add a query string just like this. 27:55

And you can put V for version and equal sign and then a number. 28:00

So maybe this is version two. 28:07

Or it's the third time I've tried this and so on. 28:09

Now, this query parameter, by the way, could actually be anything. 28:13

I could put any text there and I could put any number there and the 28:17

browser is gonna think oh, here is a new variable, here is the new value for 28:21

it but just doing this version is an easy 28:26

way to understand in your markup what's going on. 28:29

In case you accidentally leave that in for some reason. 28:32

So, if you need to refresh your favorite icon 28:36

during development, you can say version equals and then a 28:39

number, and when you go back to the browser and 28:43

upload that new HTML file and refresh it, you should 28:46

see your new favorite icon up there. So, 28:51

there's one other thing that I do want to touch on, then go back to 28:57

this favorite icon cheat sheet. You can see down here 29:01

there's a way to do, create hm, 29:08

actually I think that's in my blog post. So there's way to 29:12

make dynamic favicons. And we actually have a good example here. 29:16

With Treehouse, we change the favicon if you have a new notification. 29:23

So I have a notification right here. 29:29

And even without looking at that browser tab, I 29:32

can see, oh, there's a little number one there. 29:35

And that will tell me that I have a notification. 29:38

There's a couple different ways to do this. 29:42

But one way is to use favicon.js. 29:44

So there's a link to this. And it is a GitHub project. 29:48

Hopefully it comes up here. 29:54

And you can see what it looks like and 29:56

I can actually increase or decrease the number here. 29:58

So, if you look up right here at this little tiny area. 30:02

I am not sure 30:06

if that's showing up. 30:07

You can increase it or decrease it and it will change the number right there. 30:08

You can see a much larger version here. 30:14

So, that's basically what showing up there. 30:15

And just look here. 30:17

That's what the favicon looks like. That's a little bit more advanced. 30:19

You don't have to do something like that. 30:24

You should really only do it if your application 30:26

has some kind of notifications or similar construct involved. 30:28

And you should also be aware that it's not perfect yet. 30:33

There's a couple of issues here, particularly, it doesn't work very well in 30:38

Safari or Internet Explorer, so that could be a big holdback for a couple of people. 30:43

So that's pretty much it. 30:51

At this point, I think we're ready to take some 30:53

questions, so hopefully, have some good questions lined up for me. 30:55

I hope you guys learned a lot. 30:59

So, Lee asks, would you ever use Illustrator for 31:01

making favicons so you don't have to worry about pixels? 31:05

Mm, it depends, you have to be pretty 31:10

good at using Illustrator and really understand exactly what 31:11

you're going to be exporting. 31:16

Often times, it really is best to just use Photoshop, so. 31:18

If you're really good with Illustrator and you know exactly you 31:22

know, what's gonna be outputted at different resolutions, you can do that. 31:26

But oftentimes I find that when you're creating those vectors, and you try to 31:29

apply an image to you know, some very small resolution like your favorite icon 31:34

at like 32 by 32 or 16 by 16 it just doesn't produce the best results. 31:41

It doesn't always look good. 31:47

Sometimes it does and you can get away with it but oftentimes, I mean, really 31:49

every time I've made a favorite icon I find myself doing pixel by pixel editing. 31:54

So I do recommend you use Photoshop if you can. 31:59

Next up Travis asks what are the advantages or 32:03

disadvantages of using other formats like PNG over ICO? 32:07

Well ICO's gonna have the broadest browser support and in a lot of cases 32:11

even Chrome and Safari are going to favor an ICO file over a PNG file. 32:17

So if you have both, if you have an ICO file 32:23

and a PNG file, it is going to oftentimes pick the 32:26

ICO file instead which is pretty frustrating if you have a really nice PNG. 32:32

Maybe you have some really detailed alpha transparency on it 32:38

that you wanna produce, that's something we didn't talk about. 32:43

But you can make transparent favicons and they'll pretty much work across almost any 32:45

browser if you do a transparent PNG at, I believe, 8-bit. 32:50

It should work. I don't 32:55

think 24-bit transpar, transparency will, will work perfectly. 32:57

But, when you're exporting your favicons and you're 33:02

using a tool like X-Icon Editor, you wanna 33:07

export them from Photoshop or your image editor 33:09

as PNG files because those will be pixel perfect. 33:13

If you do a JPEG file, it's gonna, it's gonna apply JPEG compression and you 33:16

certainly don't want that, especially at those 33:22

smaller file sizes or smaller image sizes. 33:25

You want something that's gonna be pixel perfect. 33:29

So export them as PNGs, and then you can bring 33:32

them into a tool like X-Icon Editor or Real Favicon 33:35

Generator or whichever one you like, and it will generate a nice ICO file that 33:39

should be pretty, pretty cross-browser compatible. 33:45

So a couple of people, I guess, are asking about animated favicons. 33:51

You can do it. 33:56

Again it's gonna be pretty tricky. 33:57

The thing that is gonna help you do that 33:59

is the tool we looked at just a minute ago. 34:02

Think I had it up. 34:05

Let's see. 34:07

Yeah. Here we go. 34:07

favicon, or favico.js. 34:08

Excuse me. So there's no n there. 34:12

Could help 34:15

you do those types of animations, and if you 34:16

look here, there's actually a number of different animations 34:18

here, so if I plus or minus these, you 34:21

can look at what these different animations look like. 34:24

So, they have a fade or a pop here, a position. 34:26

And you can certainly do that. You could use some of the technologies 34:32

that were used to make favico.js 34:37

here and maybe apply them to a different kind of animation. 34:42

It doesn't necessarily have to be a number here. 34:47

That's a little bit more advanced though. 34:51

So if you do that just keep that in mind. It's gonna be a little bit trickier. 34:53

But it can be done. It's technologically possible. 34:58

So I think that's all we got time for. It doesn't 35:04

look like we have any more questions. 35:07

Be sure to check us out at teamtreehouse.com the best place 35:10

to learn web design, web development, mobile business and so much more. 35:14

I'm Nick Pettit. 35:19

Thank you so much for joining us today, and we will see you next week. 35:19

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace