Fortunately, making a favicon is easy, fun and can be done without any paid tools!
Sure, you can create your favicon graphic with a paid piece of Software like Adobe's Photoshop (and
admittedly, I do) but it's not a requirement. In fact, if you've already seen my Favicon How To Video you've seen me create a favicon image using
the free online photo editor found at Pixlr.com and it only took me
about a minute to do.
Basically, there are four steps to making a favicon (and getting it to appear on your website). They are...
Create the image you intend you use for your favicon. Just remember to create the favicon image in a
"square" format or it will get distorted when it renders. By square, I mean that the canvas should be as wide
as it is tall. 64 pixels by 64 pixels is a good place to start if you are uncertain.
Now, just because I said, "square," don't think that means the image has to be square in shape. It can
be circular, elliptical or any other shape you can come up with. The important thing is that the "canvas"
you create is the same in width and height.
If this is confusing, watch my Favicon How To Video as I think it will clear things up.
Remember: The final favicon image will be rendered at a size of only 16 pixels by 16 pixels so you
MUST take that into consideration when designing the image. Think simple and don't use any fine lines or type as they
will likely look horrible when displayed.
Once you've created your image you need to convert it into the .ico ("icon") file type. This is easily done
with my Free Favicon Generator and it only takes a few seconds to complete.
In order for the favicon to appear on your website, you need to place a small bit of code (only one line)
on each page of your website. The code is standardized and isn't really specific to any one website or page.
The Favicon Icon Code can be found at the bottom of my "Favicon
How To" page. You simply copy the code and paste it into the "head" area of your website's html code (on each page) so the browser will know where to look for your "favicon.ico" file.
It's very important that the path to the file be correct! It's best to name your file, "favicon.ico" and upload
it to the "root directory" on your server. (btw, your "root directory" is the same place where your "index"file will
be on your server)
The last part of the equation is to simply upload the "favicon.ico" file AND your web pages (with your updated
code) to your server.
Again, just ensure that you have named your favicon, "favicon.ico" and that you have uploaded it to your
Note: If some of your web pages are inside of a "subdirectory" then you will need to update
the path to the favicon.ico file for those pages. Just like any image on your website, the browser needs to know
specifically where each image is located on your server in order to properly serve them up.
If you have any questions about all of this, watch my Favicon How To Video.