How and Why to Install a Favicon
A favicon (pronounced like your “favorite icon”) is the small, square image that appears on the left side of your website’s tab and on the bookmark bar.
We’ve all seen them, but are they really that important? Well, I would (and will) argue yes.
In this article we’ll be discussing the roles of favicons and how to get one showing on your site, no graphic design required.
The Benefits of Installing a Favicon
Even though it may look like they’re just for show, favicons play some important roles.
Professionalism & Branding
Showing users that you have your shi-… stuff… together is the combined effort of a lot of small details. This may not be the case for everyone, but I know that I notice almost every detail that has been overlooked on a website. It’s just human nature to focus on what’s missing or incorrect.
Your website is an extension of your company, so you want everything looking perfect. Having the small “I didn’t add a favicon” icon in your tab bar isn’t doing you any favors.
Also, you probably spent a lot of time and/or money on your logo. Make the most of that. You might as well throw that beautiful image everywhere that you can. (But probably don’t get a tattoo of it.)
Differentiation
Do me a favor and look up at your tabs right now. If you’re anything like me, you have at least five open. Whether or not you need all of them open is beside the point (I’m looking at you, Facebook).
The point is that favicons are the easiest way for users to tell their tabs apart.
Having a nice looking, noticeable favicon can cause your user to tab back to your site, giving you one extra chance to convert them. And when it comes to conversions, we should take every chance that we get.
How to Create a .ico Image File
Unfortunately, favicons have to be a .ico file type to be uploaded to your root directory. Also, unfortunately, you can’t export photoshop files as .ico files.
We recommend using one of two ways to create your very own .ico file.
Option 1: Use a Favicon Generator
Once you have your logo or image ready to go, you can use https://realfavicongenerator.net/ to create your favicon file.
Just make sure that your image is perfectly square and preferably larger than 260×260. Then, simply follow the prompts on the site and move on with this tutorial.
Option 2: Change the File Type in the FTP Client
FileZilla, which you’ll be using in the next section, allows for you to simply retype the file type of an image and use it as your favicon. So, use a photo editing software to make sure that your image is perfectly square, upload it to your root directory, delete the extension (.png, .jpg), and type in .ico in its place. Easy enough.
How to Install a Favicon using FTP
Installing a favicon is as easy as adding the favicon.ico image file to your root directory. In other words, you would upload the file so that it is located at http://example.com/favicon.ico.
To do this, I recommend using an FTP client, like FileZilla. An FTP client will allow you to drag and drop files from your computer to your website’s server simply and quickly.
How to Install a Favicon on Your WordPress Site
Creating and installing a favicon on your WordPress site is rather simple and doesn’t require a .ico filetype.
Step 1: Create Your Favicon
Favicons typically require a special .ico filetype, but, in the WordPress option that we’re going to use, a .png type will work just fine. Favicons typically look better with transparent backgrounds, so I would recommend doing that unless you want to ensure that the background stays consistent.
So, use Photoshop or any other image editor to create your favicon in a 512×512 size. It’s important that the image is exactly square for this process.
Step 2: Install the Favicon
Using the left sidebar in WordPress, navigate to Appearance > Customize > General Settings
For most themes, the option you’re looking for is called Site Identity.
Under Site Icon, upload the .png file that you just created and click Save & Publish.
That’s it. You’re officially a favicon owner. Go bask in the glory of your new browser icon.