Hi, this is Anne with Graphic Design How To,
and today I'm going to tell you how to create
a favicon for your website with Adobe Photoshop.
A favicon are these little icons right up
here on the internet.
And so if you have one, it helps with your
branding on your webpage.
And we'll be doing this in Photoshop.
So let's open Photoshop.
And the size for a favicon is 16 pixels by
16 pixels.
So I'm going to go to File>New.
Even though this will end up as 16 by 16,
I find it a little easier to work with 64
by 64 and then squeeze it down.
So we'll have it at 72 pixels per inch.
And we'll just say 'Create.'
Okay, so that is very small.
I'm going to hit CMD 0 to get it full size.
And now I'm going to go grab my logo.
I'm going to show you two different ways.
First, we'll do one without a white background.
So I'll just pull this onto Photoshop.
'Select All' with CMD A, 'Copy' and then 'Paste'
in here.
And it's so big that it's filling up the whole
screen.
So I'm going to hit CMD T to resize that,
and then CMD 0.
And that shows us the entire logo.
And I'll resize, zoom in a little bit.
I'm going to make it exactly the size.
It's already a perfect square.
And this looks good.
So now I'm going to do a 'Save for Web'.
Now we'll go to File>Export>Save for Web.
And here, we can change this to 16.
So we'll do that.
'Save'.
And I'm going to save this as Favicon 3.
I already have one in there.
So I'm going to replace that.
And now we can actually go out to the Internet
and find an icon maker.
So the one that I like, is this one.
It's icoconverter.com.
This is just one that I happened to find.
I don't know the people who own this or anything,
but it's worked pretty well for me.
So now I'll choose the 'Image File', and there
it is.
And then we can just go to 'Convert'.
And now the favicon is ready to go.
It'll look really blurry and ugly.
But when you actually put it on your site,
it'll look good.
Here's that exact favicon on my own site.
So it looks pretty good up there.
Now I'm going to show you how to make a favicon
if you have a white background on your logo.
First I'll open up a different version of
the favicon, which is this circle.
So to give the result that you probably want,
you don't want this white out here.
There are a lot of different ways to get rid
of that white background, but the easiest
way is to use your Wand tool, and that's right
over here.
So I'm going to click once, and then I'm going
to create a new layer.
I'm going to invert the selection.
So we'll go to Select>Inverse.
And now I'm going to make sure I'm on the
background, 'Copy' and then go to Layer 1
and 'Paste'.
And now I'll throw away this background and
make a new one.
Now there are parts in here that I actually
want to be white.
So on Layer 2, I'll get a white swatch, and
I'll brush the area back here.
I'm showing you this way...normally, I would
just draw a circle around this entire thing,
but yours probably isn't a circle.
OK, so we're ready.
We've got our orange layer, we've got our
white layer back there.
So we'll go to File>Export>Save for Web.
Make sure 'Transparency' is checked here.
And you'll want PNG 24.
Change your 'Image Size' to 16 by 16, and
then 'Save'.
Now we'll overwrite this Favicon 2, Replace
that.
And now you can just go out here and do the
same thing.
We'll grab Favicon 2
and 'Convert'.
So this one is now ready to be put on the
web.
And it'll look something like this only it'll
be a circle.
So that's the easy way to make a favicon with
Photoshop.
If you liked this video, please click on the
'Like' button, and I'll see you next week
for another graphic design tutorial.
Thank you!!!
