How to Create a Favicon for Your Website

Creating and Uploading a Favicon or a “Favorite Icon” is very easy to do. Once you create the Favicon, you need to upload it to your website. Let us show you exactly how to start from scratch and finish a website favicon.

Using a Favicon Generator – Very Easy To Do

Our favorite Favicon Generator website would be Favicon.cc which allows you to draw out any image you would like using pixels. All you need to do is pick what color you want, then you fill in the pixels like so:

For this example I made an “H” for the favicon. If you look below you will see how they also give you a web browser example of what your favicon is going to look like:

As soon as you create one that you like, then you can click “Download Favicon” and then save it somewhere you can remember because you need to upload that file to your website. If this is the way your going to create a Favicon then scroll down and skip the next step.

Creating a Favicon with Photoshop – Still Easy To Do, but you need Photoshop

If you happen to have Photoshop then we suggest you do it this way. You can make it look much nicer than a Favicon Generator can do because you don’t have to do it Pixel by Pixel. What you want to do is open Adobe Photoshop and click on “File > New…” or hit Ctrl+N if your using Windows.

A box will then Pop up where you need to fill out the proper dimensions. What your going to want to do is make sure the width and height are at 16 px (Pixels) because that is the size of a Favicon. Please refer to the image below:

Fill out your Photoshop box the exact same as the one above and you should be good to go. Click “Ok” and now you have a very small image to work with. For this example, We are going to create the same exact image we made with the favicon generator. What I need to do is select the “Horizontal Type Tool (T)” which is what the text box is called in our version of Photoshop. It might be slightly different if you have a different version.

We are going to use a font called “Impact” because it stands out and type the letter “H” in the 16 px by 16 px square.

Now that you have you image ready you need to save it. We save it as “favicon.png” for now and we will show you have to change it to the right file type in windows.

Your almost there! Now that you have your file saved you need to open the containing folder that is holding the file. Make sure you have “View File Types” checked in your settings because you will be ranaming it. Change the “.png” to “.ico” and you now have the proper file type to upload to your website.

Uploading Your Favicon To Your Website

Uploading your favicon is the hardest part about this entire process which isn’t that hard at all. We use cPanel when we are uploading so hopefully you have something similar. What you want to do is go to your websites root files. Since we are using cPanel, we would click on “Legacy File Manager” then we would select “How To Create A Website Online .com” like we did below.

After you made it to the main files, all you need to do is upload your “Favicon.ico” file to the main index and you have successfully created and uploaded your favicon. It might take a few hours before you see it on your website, but we promise, it’s there.

Creating and Uploading a Favicon is definitely something we recommend that you do for your website. It shows your uniqueness and when people bookmark your page, they will see that image and think of your business instantly. We also recommend that your favicon is similar to your logo if not the same exact thing. If you look at any popular website online, they all have a nice favicon that you can remember.