Having a custom favicon is something every website owner should consider. It’s a small touch of personalization, but it can set your site apart from the competition. Not only does it enhance the visual appeal, but it also signifies your commitment to your website’s professionalism.
What is a Favicon?
If you’re unfamiliar with the term, a favicon is a small icon displayed in browser tabs, favorites, and bookmarks. For instance, the InterServer favicon looks like this:
Favicons are always 16×16 pixels in size, but beyond that, they can be designed in various ways. Most companies use their logo or a part of it to create their favicon. However, due to the limited pixel count, overly complex designs can be challenging. With a bit of trial and error, you can quickly and easily create a beautiful favicon for your site.
Making a Favicon Image
The first step is to create the image you want to use as your favicon. You can start with any image or logo you have and simply resize and format it to meet the required dimensions. There are several free online tools that can automatically resize images to the correct favicon size. We recommend using the Favicon Generator at http://favicongenerator.com. It’s a free and efficient tool. Follow these simple instructions to create your favicon in minutes:
- Select your image: Choose an image you want to use for your favicon. At this stage, it only needs to be perfectly square; the size doesn’t matter.
- Go to FaviconGenerator.com: Visit FaviconGenerator.com and upload your chosen image. Once selected, click “Generate Favicon.”
- Download your favicon: The site will display an ad, but underneath it, you’ll find the “No Thanks, just give me my Favicon” button. Click on it.
- Right-click and save: Right-click the image and select “Save image” to save it as a .ico file.
Now you have your favicon created and saved on your computer, ready to be added to your website.
Adding Your Favicon to Your Website
The process of adding your favicon to your website may vary depending on the type of site you have. Here are the most common options available:
Uploading the File to the Root of Your Page:
The simplest way to update your favicon is to name the file ‘favicon.ico’ and upload it to the root of your website. This can be done using any FTP program, like FileZilla, or through most file management tools on your web server. In most cases, the root of your web server is a folder called “public_html.” If there is an existing Favicon.ico file, you’ll be prompted to overwrite it, so confirm that you do. Once the file is placed there, it becomes available for display. Many website types, including WordPress and other popular content management systems, will automatically display the favicon. However, you may need to clear your cache for the favicon to appear, as browsers typically cache favicons.
If you’re not using a content management system, you may need to add a simple line of code to your website’s HTML or PHP file(s). On the pages where you want the favicon to appear, locate the <head> tags and paste the following line inside them: <link rel="shortcut icon" href="/favicon.ico">. After doing this, clear your cache and check if the favicon is displayed.
In the vast majority of cases, simply uploading the file to your Public_HTML folder will cause the favicon to be displayed. We highly recommend trying this first.
