Contents
What is a Favicon
Creating and setting a website favicon is an often overlooked yet crucial element in building a robust digital presence. A favicon, an abbreviation for ‘favorites icon,’ is a small graphical representation associated with a specific website or webpage. Often found in the address bar or browser tab, a favicon is a distinctive square icon, typically measuring 16×16, 32×32, or 64×64 pixels. Despite its diminutive size, a favicon significantly enhances a site’s user experience by providing a visually identifiable symbol.
The current article is "5.22. Setting Favicon" of our Complete SEO Guide Box.
Previous Article: 5.21. Updating Components. Next Article: 5.23. Block ChatGPT Bot
Discovering the Favicon
Spotting a favicon is straightforward. When navigating a website, the favicon can be found in the address bar or the site’s opened tab. It is a recognizable graphic symbol, simplifying identifying the site amidst a list of bookmarks or multiple open tabs.
Checking the Source for Favicon
If you have difficulty locating the favicon or are curious about its source, delving into its source code may be enlightening. The process, while appearing complicated, is simple once understood. By right-clicking the page, then clicking “Inspect” or “Inspect Element,” you can open the Inspector window. Here, navigate to the HTML code’s “head” section, where you can find a link tag with a “rel” attribute set to “shortcut icon” or “icon.” This tag’s “href” attribute contains the link to the favicon file.
Implementing the Favicon
Creating and setting a website favicon is integral to effective SEO and branding. Not all websites will have a favicon; the browser may display a default icon in these cases. However, for better brand visibility and enhanced user experience, creating and implementing a unique favicon is advisable.
Read More about Creating and Setting a Website Favicon
You can read more about what Favicon is and its history on Wikipedia.
Creating a Favicon Image for a Website
The optimal favicon size for visible image quality and file size is 32×32 pixels. It depends on you; if you think you can lower the quality of your image to 16×16 pixels, the file will load faster but will be stretched by the browser.
We will make a favicon from the logo we created, resize it to 32×32 pixels Using the RIOT Windows program, and compress the quality to appropriate levels.
If your image has no background, make sure it is transparent and save it as a PNG.
Converting the Image to ICO file Option 1
Before setting a website favicon, we will convert our image to the appropriate format after creating it.
Navigate to the FreeConverter website.
Click [Choose Files].
Browse for your image file.
Set Output: [ICO].
Click on the Gear icon Settings button.
In the new window, select “Format and Size”: [32×32].
Click [Apply Settings].
When the window will close, click [Convert].
After the conversion is done, click on [Download].
Place the file in your images logo folder:
D:\Site\yoursite.com\images\Logo\Favicon\favicon.ico
Converting the Image to ICO file Option 2
If you can’t use the first, another “image to ICO conversion” online tool exists. If you successfully operated the first, you can skip this section. Like the first method, it is done after creating and before setting a website favicon.
Navigate to the ICOconvert website.
In the “Step 1. Upload an image” section, click [Choose File] and select the 16×16 pixels image from the previous step.
Then click [Upload].
In “Step 4. Select the icon format” section, select
(*) Favicon for your site
Note: You can also select the “(*) Custom sizes” option with the “[V] 32×32” sub-option.
In the “Step 5. Convert and download” section, click the [Convert ICO] button.
After the conversion process ends, click the “Download your icon(s)” link.
Rename this file to:
favicon.ico
And place it in your images logo folder:
D:\Site\yoursite.com\images\Logo\Favicon\
Placing and Setting Favicon on the WordPress Website
Method 1
This is the old-school method that has been working for generations.
After creating the favicon, we can move to the “setting it on a website” step.
Using File Manager (Like WP File Manager WordPress plugin), upload the “favicon.ico” to your WordPress home directory: /public_html
So, the final path will be:
/public_html/favicon.ico
If you use the WP File Manager plugin, navigate to the “public_html” root folder and drag and drop the “favicon.ico” file.
After you place the file, clear all the WordPress caches and open your site to check that it’s been updated.
Method 2
The second method is using WordPress Theme Customizer. It is less recommended but essential to get familiar with. We’ll discuss WordPress Themes and the Customizer in Section 6 of our Complete SEO Guide Box.
Log into your WordPress dashboard.
Click on [Appearance], then [Customize].
In the Customizer, look for the [Site Identity] section in the left menu bar.
This is where you’ll upload your favicon, a Site Icon.
Click [Select image] to upload your favicon file.
WordPress lets you crop the image if needed, but it’s best to have it the correct size.
Once uploaded, click [Publish] to save the changes.
Your favicon will appear next to your site’s title in browser tabs.
Open your site in a new tab and check out your new favicon.
The current article is "5.22. Setting Favicon" of our Complete SEO Guide Box.
Previous Article: 5.21. Updating Components. Next Article: 5.23. Block ChatGPT Bot
If you find any mistakes or have ideas for improvement, please follow the email on the Contact page.