0:00
hi in this video I'm going to show you
0:02
on how you can create a fabicon in Cana
0:05
so fabicon is really just a logo that
0:07
you have seen on a website the logo is
0:09
usually going to be displayed on the
0:11
browser top for example this is the
0:13
fabicon of canva and as you can see uh
0:16
this is the fabicon this is also a
0:17
fabicon and pretty much every website
0:19
will have that icon next to it so uh the
0:22
first thing that you need to do to
0:23
create a fabicon in conf that you have
0:26
to open a template that is square it
0:29
could be an Instagram post template
0:32
which in this case has 10 HP by 10 HP
0:34
resolution but in my opinion that is a
0:36
bit too big so I'm going to be using
0:38
something that's smaller because for a
0:40
website we want to use asset that is
0:42
optimized and also not unnecessarily too
0:45
big so I'm going to resize this design
0:48
to the size of logo logo in Cana is 500
0:51
by 500 pixels click on it and I'm going
0:54
to resar this design now Kaa will
0:57
provide a preview for me which is pretty
0:59
much unnecessary because this is empty
1:01
but I'm going to click resize the design
1:03
and just wait until it created a new
1:06
template document for me so here you can
1:08
start building your own logo you could
1:11
use uh every features in Cana like there
1:13
is an element there is also pictures uh
1:16
there are also some icons that could you
1:18
could uh insert into the document to
1:20
create your logo or to create your
1:22
favicon but in this case just to save
1:24
time I'm going to be using logo from the
1:28
templates I have in Cana let's use this
1:30
logo I think it looks really good and
1:33
after that you can resize the logo if
1:35
you want you can make it bigger or
1:36
smaller it's totally up to you and after
1:40
that you can click share click download
1:43
and make sure to select the file type as
1:44
PNG this is actually not the most common
1:48
format for favicon favicon is usually I
1:52
but PNG should do and after that if you
1:55
are really really into optimizing the
1:58
speed of your website then you might
2:00
want to reduce the quality of the uh
2:02
fabicon to 250 pixel which I think is
2:05
good enough even for a patina display
2:08
like an iPad or iPhone and after that I
2:11
do recommend enabling compressive file
2:13
size to uh to make it more smaller and
2:17
after that uh since the logo look like
2:19
this I don't want to have this empty
2:21
line uh sorry empty white background I
2:25
don't want that to to be visible so I'm
2:27
going to be enabling the option
2:28
transparent background this is optional
2:30
it really depends on what you are trying
2:32
to build for example if you're using
2:34
this logo uh the one that is actually
2:37
just inverted from this one I'm not
2:39
going to enable transparent background
2:40
for that because uh I think that that
2:43
background is very important to make the
2:45
logo visible so anyway when you're are
2:48
done you can click download and it will
2:50
be downloaded to your computer and after
2:52
that you can upload the file to your
2:54
website as a favicon so this is the one
2:57
that we just created of course it looks
2:59
blurry Because the actual resolution was
3:01
only 100 sorry 250 pixel and I think
3:05
this is good enough because at the end
3:07
of the day we want to make something
3:09
like this into this size so there is no
3:12
problem actually using lower quality or
3:15
lower resolution ficon anyway I hope you
3:19
find this video to be helpful and I'll
3:20
see you on the next video
