Favicon, also known as Site Icon, is the tiny image that appears in the browser tab. It helps your visitors to navigate right to your website when several tabs are opened in their browser window. It plays an important role to improve the user experience and increase your brand recognition.
As you set up your website in WordPress, it automatically applies a WordPress favicon to your website and it remains there until you change it. For those who have never changed a favicon in WordPress before, it could be pretty challenging to change a WordPress website favicon. Here we have brought a step-by-step guide to how to change the favicon on a WordPress website. Keep scrolling.
Importance of Favicon in a Your Website
No website puts its name in the title for every single page it has. The full title might not always be visible which make it hard for the users to recognize which websites are loaded in which tabs. Favicons make this task very easy.
A Favicon establishes your website’s identity, improving the usability and user experience of your website. When users open more and more tabs in their browser window, the website title starts shrinking and eventually vanishes; only the favicons are now visible on the tabs. Based on the color and favicon design, users can still identify a website and quickly switch between the tabs.
Despite their minuscule size, favicons are very important to improve the overall performance of your website. Below are listed the top 4 reasons why a WordPress website favicon is important.
User experience
The favicon creates a memorable visual for your website, enhancing a great user experience. Since they help users easily navigate your website’s tab on the browser window. Moreover, favicons are also visible in the bookmark bar so that it becomes easier for users to revisit your website site over and over again. Likewise, Favicons also create a positive impact on the user experience on mobile as web design is considered what grabs people’s attention on mobile.
Branding
If you want your brand to be truly cohesive then even the tiniest of details matter. Despite its minuscule size, a favicon contributes to the branding and increases the visibility of your website. It extends your brand’s language outside of your site and stamps it onto the web browser. Your website is incomplete without a favicon as it adds legitimacy and professionalism to your website.
Return Users
Favicons make it easy for your site to stand out in search result pages and a browser history so that your visitors can revisit your website. It is a powerful brand identifier. Moreover, when a user bookmarks your site, your favicon makes it easy for the user to find yours amongst the bookmarks.
Credibility
Favicons are not directly linked to the security of your website. Not having a favicon doesn’t mean that your website is not secured for users but users seem to trust sites with a favicon. No matter if the visitors clicked on your website through a branded or non-branded search, when it doesn’t have a favicon, they may wonder whether or not your website is safe to visit.
Does a Favicon Impact SEO?
A Favicon doesn’t directly impact the SEO of a SEO but as it makes it easier for users to identify your website and increases the chance of users revisit your website, the quality of a favicon can organically improve your site rank on search engines.
What Size of Favicon to Use?
The optimal size for favicons is 16×16 pixels. At least, that’s how they appear in browser tabs and bookmark lists. Therefore, as you choose an image for your WordPress website favicon, make sure it looks good once it’s shrunk down to those dimensions. Although the favicon is displayed in 16×16 pixels dimension, you have to make its height and width at least 512 px. 512×512 is the optimal favicon size that a WordPress website requires.
How to Create a Favicon?
Now that you know what a favicon is and why it’s important, it’s time to learn how to make one. But before that let’s discuss what you have to consider while choosing a favicon for your WordPress website. Well, your WordPress website favicon should be recognizable and consistent with your brand identity. You don’t have to start from scratch to make a favicon; instead, you should base it on your company logo.
If you still don’t have a logo, you can hire a designer to create one for you. If you have a tight budget and can’t afford a designer then don’t worry as there a a wide range of free logo designing tools available online. Some of them are Themeisle Logo Maker, Canva, Tailor Bands and MarkMaker.
Once you have your logo ready, you can start creating your favicon. Unfortunately, it sometimes becomes impossible to compress a logo into a 16×16 square, especially when a logo has text, as it becomes illegible when shrunken down. You should consider taking the most recognizable part of your logo to make your favicon. Below are the top 5 free tools you can use to make a WordPress website favicon.
Favicon.io
Favicon.io is one of the most popular and widely used free favicon generators, which allows you to build the Favicon with your interest and allow download without any obstacle. You can customize the Favicon as per your taste. It is a user-friendly tool where you can get the Favicon of your image or text in the most up-to-date format.
Real Favicon Generator
Real Favicon Generator is also one of the best and most widely used Favicon generators. It is also used to manually Favicon uploading method. It has a fast and reliable service that you can get the customized Favicon in just a minute. All you need to do is upload the image, and it instantly responds to how your Favicon looks in different operating systems and software. You can make the possible change and download your Favicon, or you can copy the HTML of your Favicon.
Gen Favicon
Like other previous Favicon generators in the list, Gen Favicon also lets you download the ready-to-use favicon icon. You can do the same procedure to generate the new Favicon. Once the Favicon is generated, you are allowed to download it for free without any charge.
Themeside Logo Maker
Unlike others, Themeside is a professional logo maker with zero logo-making technical skills. It makes it easy to make the logo because it already consists of pre-made templates. You can customize the template to make a professional logo. You can freely download the logo you’ve built. But the download can only be done in the .zip extension. After downloading, extract the file, where you can get the transparent Favicon in .png format.
Canva
Canva is one of the most popular multi-purpose graphic designing free tools from where you can make a professional logo and Favicon. You can get lots of free templates to get started, or you can make a favicon from scratch. You can get enough free elements, photos, and many other options in Canva. You can freely download the Favicon in any format.
Things to Consider Before Adding a WordPress Website Favicon
Before jumping to the methods to change Favicon on a WordPress website, let’s take a short glance at what you need to consider before adding a favicon icon to your WordPress website.
Favicon file size
The size is one of the important aspects that need to be concerned about before uploading the favicon because it determines the perfection of looks. The ultimate 16 x 16-pixel favicon icon is the actual size for the WordPress website, but not universal. While uploading the favicon make sure its size is 512 x 512-pixels as it is the optimal favicon size in the WordPress website.
Favicon File Type
When saving the Favicon, ensure that the file expansion must be in the format of PNG because it helps not to decrease the quality of the Favicon. The main reason to save the file in PNG format is that it allows users to save images with transparent backgrounds.
Favicon File Background
After saving the Favicon from the logo editing program, ensure that the extension must be in the PNG format. The transparent background removes the unnecessary white spaces of the Favicon. If the background of the Favicon contains white background, the psychology will deliver other meanings about your brand to the market.
How to Change WordPress Website Favicon?
There are three options to change a WordPress website favicon: one is using the WordPress Customizer, another using a plug-in, and the last one is by adding a favicon manually. Below are the steps to change a website favicon in WordPress, using each method.
Method 1: WordPress Customizer
Uploading Favicon from WordPress Customizer is considered one of the popular, convenient and easy methods since WordPress version 4.3. You can crop (if necessary) the favicon size while uploading it to WordPress and finalize it in a few clicks.
If you decide to upload the favicon icon from this method, you should be sure about the scale of the image, which must be 512 x 512 pixels.
As you upload the square Favicon with the size 512 x 512 pixels, the Favicon will be displayed at 16 x 16 pixels in the browser tab. Along with scale, the extension of the favicon icon also needs to be in the WordPress recognizable format. The extensions that WordPress supports as the favicon icon are Jpg, Jpeg, Png, Ico, and SVG.
Now it’s time to upload the Favicon icon; we will explore the WordPress Customizer method from scratch to finish. Let’s get started.
Step 1: Go to WordPress Dashboard
First, log into the WordPress Login panel and go to the dashboard.
Step 2: Go to Appearance
Below the “Dashboard”, you’ll see various options. Slowly hover your mouse to the bottom of the screen you’ll find the option named “Appearances”. Hovering on the Appearances options responds to a popup on its right side.
Step 3: Select Customize
The Popup from Appearances shows you sub-menus; click on the “Customize” below the Themes options. This drives you to arrange and customize website properties.
Step 4: Click on Site Identity
Just after clicking the Customize option, the new window will open. Click on the “Site Identity” option below the Active Theme options.
Step 5: Select Site Icon
After clicking the Site Identity Options, the next section will appear on your screen with the name “Customizing Site Identity”. In this area, you can find two text options i.e. Site Title, Tagline, and “Select Site Icon button”.
Step 6: Select Favicon
After clicking on the “Select Site Icon”, you’ll be redirected to the “Media Library” window from where you can select the favicon icon (if you’ve already used the image designed for the Favicon), or you can upload a new Favicon icon by clicking “Select File” at the center of the screen.
Step 7: Crop and Finalize
After uploading the photo, you can crop the photo (if necessary), then input the following details to improve the image SEO (optional):
- Alt Text
- Image Name
- Image Description
After making changes in those sections, finalize your favicon icon by clicking on the “Publish” button.
Method 2: From Favicon Plug-in
You can upload the WordPress website Favicon through the third-party plugin. Before getting started, let’s understand what a plugin means. Well, plugins are small software or tools which can be integrated into WordPress to add additional functions and properties. In this demonstration, we prefer “Favicon by RealFaviconGenerator”, one of WordPress’s most popular and widely used plugins.
Step 1: Install the Plugin
The first step to getting started is Installing the “Favicon by RealFaviconGenerator”. Whether you can install by downloading the zip file and uploading it, or you can directly install from WordPress Plugin Directory. Go to google and search for “Favicon by RealFaviconGenerator” and download the plugin and download. Or you can directly search “Favicon by RealFaviconGenerator” in the WordPress plugin directory and hit the Install button.
Step 2: Open Settings for the Plugin
After installing the plugin, click on the “Appearance”, then click on the “Favicon” option.
Note: You can adjust the settings related to Favicon in this section.
Step 3: Selecting Your Favicon
Click on “Select Media Library”. The recommended size for Favicon in this plugin is 70 x 70 pixels and 260 x 260 pixels. After selecting a favicon from the media library, click “Generate Favicon” to confirm the selection.
Step 4: Set Your Favicon
After Clicking on “Generate Favicon”, the next tab of the apps will appear, which offers you to make some changes; you can customize the responsiveness of your Favicon to different devices. If you are done, you can finalize the favicon upload by simply scrolling and at the bottom of the page, you’ll get the button “Generate your Favicons and HTML Code”. Click on the button to complete the upload.
You’ll automatically be redirected to the WordPress backend and get the message of successful upload message.
Method 3: Add Favicon Manually Using C-panel
WordPress allows you to make manual changes in various fields, and you can add the Favicon with the help of “File Transfer Protocol (FTP)”. You’ll need a favicon package by which you can implement the HTML code. There are various free online tools from which you can generate the manual Favicon, which we will discuss later.
Step 1: Create a Favicon File
In this demonstration, we will use the “Real Favicon Generator”. Go to google and search for the keyword “Real Favicon Generator,” and hit the first result. You’ll redirect to the Website. Click “Select Your Favicon Image” To upload the relevant image.
After uploading the image, you’ll get the customization section where you can edit the background and color of the Favicon. Now click on the “Generate your Favicons and HTML Code” at the bottom of the page.
After generating the Favicon HTML codes, Click on “Favicon package”, then copy the HTML codes.
Step 2: Upload the Favicon package using FTP
Now open the main directory and upload the earlier downloaded Favicon package.
Note: Ensure that you stay in the same folder as the WP content folder or Admin.
Step 3: Insert the HTML code
To Be concise, open the header.php folder, paste the HTML code in the header area, and check twice to ensure that you’ve entered the domain and favicon path correctly.
Remind: Paste the code you’ve copied from method 03, step 01.
That was easy, right?