Favicon Basics: Why It Matters and How to Create and Install One for Free
Today, we will explore favicons, the icons used for websites. We’ll discuss why special setup is required, how to create them, and how to configure them properly. Let’s get started with creating the perfect favicon!
What is a favicon?
Before we begin, let’s understand what a favicon is. The definition of a favicon is as follows:
Favicon, A favicon (short for “Favorites Icon”) is a small graphic icon used as a visual identifier for a website.short for “Favorites Icon,” is a small graphical icon used as a visual identifier for a website.
Importance of a Homepage Icon (Favicon)ㅍ
Have you ever noticed a small emoji-like icon on the left side of a Chrome tab when visiting a website? That is the favicon, which serves as the homepage icon.
- Favicons appear in the browser’s address bar, bookmark lists, and next to tab titles, helping users easily distinguish between multiple websites.
This small favicon helps users easily find a specific website among many pages on the internet. It’s like recognizing a friend’s bag or hat at school and thinking, “Oh, there’s my friend!”
Similarly, favicons enhance brand recognition and increase a website’s professionalism.
Common Favicon Sizes and ICO Format
Favicons are typically created based on a website’s logo or key graphic elements, with common sizes being 16×16, 32×32, or 48×48 pixels.
The ICO file format is widely recognized for favicons. Many users search for favicon creation sites to convert their existing PNG or JPG images into ICO format for proper setup.
However, does a favicon only refer to a single ICO file? If you thought so, keep reading to ensure you set up your favicon correctly!
Creating the Perfect Favicon
Now, let’s begin making a proper favicon. Follow the steps below, and you’ll never have to worry about favicons again!
Why can’t you create just one favicon?
As mentioned earlier, a favicon serves as a homepage icon. However, a single favicon file is not enough because your blog or website icon is displayed in multiple locations. Here are some examples:
- Scenario 1: When you visit the WPlaybook homepage using Chrome on a PC, the browser retrieves the favicon file and displays it in the tab—this is the most common case.
- Scenario 2: A subscriber loves the WPlaybook homepage and saves it on their phone. In this case, the saved website icon needs to be displayed properly, requiring a favicon.
If you only set one favicon size, higher-resolution displays (like in Scenario 2) may cause the image quality to degrade. Therefore, you need to create multiple favicon files to ensure proper display across different devices.
Favicon check site
There is a favicon check site where you can verify whether your website’s favicon is working properly in various scenarios mentioned earlier. Go to the site and enter your blog or website address as shown in the image below to check.
This is the result page when WPlaybook used only one favicon file. Feedback indicates that the favicon quality is lower on certain devices like iPhones and Android phones. Ideally, all cases should show green status.
Recommended Free Favicon Sites
The Real Favicon Generator site, mentioned earlier, is a free favicon tool that automatically adjusts logo files to fit various favicon requirements. If done manually, this process could take at least an hour, but this tool simplifies it significantly—highly recommended!
To create a favicon, prepare your logo file with a minimum resolution of 260×260 pixels in PNG or JPG format.
Once the file is prepared, click “Select your Favicon image” on the right side of the screen and upload it.
Then, proceed to the next screen, where you will see a preview of how the favicon will appear in different scenarios, along with detailed settings options. You can customize the background color and favicon type as desired.
For the macOS favicon, I chose a monochrome style and changed the background color to match WPlaybook’s theme.
Proper Favicon Installation Method (Application)
After completing the final settings, click the Generate your Favicons and HTML code button at the bottom of the page, and the following result screen will appear.
When you click the Favicon package button, a ZIP file will be downloaded. This ZIP file contains a total of 10 favicon files—quite a lot, right?
- Square PNG files in sizes 16, 32, 150, 192, and 384
- Apple Notebook Touch favicon-specific files
- Many other files
These files need to be installed in the root folder of your website. Since each hosting service has different methods for inserting files into the root folder, I will explain the process based on cPanel.
How to Upload Files to the cPanel Root Folder
Previously, when explaining how to register a blog on Naver Webmaster Tools, we uploaded an HTML file to the root folder. Do you remember? 😊 Follow along step by step!
How to Enter the cPanel File Manager
As shown in the image below, navigate to Tools > Files > File Manager in the left section of cPanel to access the file upload screen.
How to Move the Root Folder in the cPanel File Manager
In the displayed screen, first click Settings in the upper right corner. Then, set the Document Root for section by selecting your website address so that the root folder of your homepage is visible. Finally, click Save.
How to upload files to the cPanel File Manager
Make sure the public_html folder (root folder) is open in the left navigation panel. Then, click the Upload button at the top and upload the previously downloaded file. You can think of it as placing the HTML file inside the designated box area below.
When you drag and drop the 10 favicon files from the downloaded ZIP package into the designated box on the screen, a green progress bar will appear, indicating that the files have been successfully uploaded.
Clicking the blue “Go Back to /home” link will return you to the File Manager screen, where you can find the files you just uploaded in the file list.
- If it says the file can’t be uploaded
Sometimes, hosting settings may restrict uploads of certain file types, such as ZIP files or image files. In this case, you can contact your hosting provider’s customer support and request them to upload the ZIP file to your domain’s root folder and extract it.
Here is an English message you can use—just replace it with your own URL:
“Please upload the following ZIP file to the root folder of my website (insert your blog URL) and then extract it.”
Please upload the following ZIP file to the root folder of my website (insert your blog URL address) and then extract it.
How to add favicon settings code
To complete the setup, insert the generated code from the result page into your blog’s header section. The format typically looks like this:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2e5d4b">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">How to put code like this in your header will vary depending on your situation, but I’ll break it down into the Pro version of the Cadence theme I’m using with WPlaybook and WordPress in general.
WordPress Cadence Theme Pro
The method for inserting the favicon code into the header varies depending on the situation. I will explain it separately for Kadence Theme Pro version and general WordPress sites.
From the Customize menu, tap Custom Scripts at the very bottom.
The custom script feature allows you to insert code into the header, body, and footer of each WordPress page. Copy your favicon code into the header section and click the Publish button at the top to complete the process.
When you’re done, remove the picture file from Site Identity > Site Icon in Customize!
Putting code in a typical WordPress site header
The easiest way to insert code into a general WordPress site is to use a code snippet plugin. Among the various plugins, the most popular ones are as follows.
June 2024 Update: WPlaybook is currently using WPCode. It was chosen because the free version offers significantly more features. 😊
Download any of the plugins mentioned above and insert the copied favicon code into the Header section. Below is the screen where the code is added in WPCode’s header section.
Now that you’ve completed the setup, check your website’s favicon again using a favicon checker! After correctly applying the favicon, the WPlaybook favicon checker results should display a green background in all scenarios.
In conclusion
Today, we explored what a favicon is, why it’s important to configure properly, how to create a well-designed favicon, and how to install it. If you’ve followed along this far, you won’t have to worry about favicons for your website anymore! Thank you for sticking with me until the end.
