Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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.
[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.
Sign up