Favicons. After I tell you what they are, I promise you’re going to want your own right away, so keep reading. To see what a favicon is, first open your Internet browser of choice (Firefox, Chrome, etc.) and take a look at the tabs you have open (tabs appear when you have multiple sites open in the same browser window). At the top of each tab, you should see the title of the website you’re viewing, for example: “Google” or “The New York Times.” And just to left of the site title, you should see a very small image. This is the favicon. It’s not terribly difficult to create and implement your own favicon, and I’m going to take you through the process step-by-step.
Step 1: Create Your Favicon Image
You’ll want to create a perfectly square image that is at least 600 pixels in both height and width. Your favicon can be either a PNG or JPG file, but keep in mind that if you want your favicon to have transparent regions (for example so that your logo will appear without any colored background), it’ll need to be PNG. You can use Photoshop if you happen to have it, or Canva will also work great. Keep in mind that favicons, when they appear in your browser bar are extremely small, so keep it simple. There’s not a whole lot of room for details and nuance. Mainly you want to make it easy to see and have it aligned with your business and brand.
Step 2: Install Your Favicon
If you have a WordPress website, then most likely you’ll be able to set your favicon via the Appearance –> Customize tab in your theme settings. However, if you’re not able to find where to set your favicon in your theme, you can always install the Favicon by RealFaviconGenerator Plugin. It’s very easy to use, and directions are on the plugin page.
If you have a Squarespace, Wix, or Weebly site, you’ll be able to set your favicon (it might also be called “site icon”) in your website settings. Here are instructions for Squarespace, Wix, and Weebly. If you have another website builder in place, you can google the name of your website builder and the word “favicon” to find what you’re looking for.
Manual Installation
If you prefer, you can also install a favicon manually at the server level via FTP. I recommend RealFaviconGenerator.net to generate your favicon package.
The process is: 1) Download your favicon package, 2) Upload the favicon package to the ROOT LEVEL of your website on the server, and 3) Add the provided code spinnet to your website header.
From the homepage of the Real Favicon Generator website, click “select your favicon picture” and choose the image on your computer that you’ve created prior. On the next page, you can leave all the settings as is. You’ll notice that it requires you to put something in the text field after “App name.” Enter anything here since you aren’t going to be using this for an app. Scroll to the bottom and click “Generate your favicons and HTML code.” On the next page click the button that says “favicon package” and a ZIP file will download to your computer. When you unzip this file, you’ll find a collection of files that you will upload to your website’s server in order for your favicon to appear next to your site title in a browser window.
You’ll need to either access your website on the server via your file manager in cPanel or by using an FTP client app such as Cyberduck or Filezilla. Once you connect to your website on the server, you want to upload all the files from your favicon package to the ROOT LEVEL website (meaning not inside any sub-folders or directories).
The last step is to paste the code snippet provided by Real Favicon Generator into your site’s header to tell the browser where the favicon files are located. Find your site’s header code (the code at the very top of the webpage), and somewhere between your <head> and </head> tags (and I would suggest directly below your <title> and </title> tags), paste the provided code snippet.
And there you have it! A favicon allows you to look sharp, professional, and most importantly on-brand when visitors visit your website in their browser of choice.
Tired of wondering whether your homepage is doing all “the right” things?
My FREE 5 lesson mini-course will give you clarity and direction. Begin today!
