How to Make and Install a Favicon

Favicons are the small images representing websites around the web.

how to make a favicon

Many, many sites (very popular ones too!) still do not have customized favicons. It’s a small way to help with your branding and give your site a more professional and cohesive feel.

One of the most common places you see favicons is in your browser tabs. In this image, you’ll see my customized favicon and you’ll also see the default Genesis favicon.

genesis favicons

1. Create your favicon

A favicon is simply an image that’s 16px by 16px. Once you create your image, you’ll need to save it as favicon.ico. If it doesn’t have the .ico extension, it will not work. To change the file name, simply rename your image from, say, favicon.jpg to favicon.ico. You can do this by right-clicking on the image name on your computer. You could also open your favicon.jpg file and then “Save as” favicon.ico.

2. Access your File Manager in Bluehost

Simply login to your cpanel and click on the “File Manager” icon.

bluehost file manager

Navigate to your Genesis child theme

When accessing your File Manager you may see a popup. If so, just choose Web Root.

file manager access

Upload your favicon to your Genesis images folder and your child theme images folder.

After your root directory opens, click on the wp-content  folder–> themes –> genesis –> images. Next, highlight the favicon.ico file by clicking on it once. Then click Upload icon in the top bar. When prompted, replace the file with your new favicon.ico file.

Now do the same for your child theme. You will double click wp-content –> themes –> [child theme] –> images. Repeat the upload process.

Sometimes it takes a few hours for it to show up.

Do you get The Useletter?

It’s a hand-curated roundup of tips I don’t share elsewhere. And peeks behind the scenes. Not sure? Learn more (& see what others think)...