How to Add a Favicon to Your WordPress Website?

You’ve probably noticed that most websites have a small icon (usually the site’s logo) in the upper left corner of their browser tab. This is called a favicon. In addition to helping users recognize your website in their browser, thereby improving the user experience, favicon is also an important form of branding. By adding a favicon to your site, you allow users to distinguish your site from other sites they may navigate to, and you establish a link between the favicon image and your brand.

If you ask us, one of the first things you should do after installing your WordPress theme is to set your WordPress favicon. Today we will show you how to add a favicon to your WordPress website.

How to Create a Favicon

First of all, we have to address how you can create your favicon. If you are looking for a quick solution, you can create a site icon using an online site icon generator. platforms like Favicon and App Icon Maker allow select an image from your computer in .jpg, .png or .gif formats and then convert it to .ico format. If you don’t have a pre-existing image, you can also browse the icon gallery by keywords, letters or colors and then download or edit an image you like.

Another great website for creating favorite icons favicon.cc. This platform not only lets you import your own image or choose one of your own, but also create a new favicon from scratch.

If you don’t want to use an online favorite icon generator, you can always use Photoshop or Gimp to create a favorite icon or resize an existing image. Note that WordPress requires The dimensions of your favicon image must be at least 512×512 pixels.

When it comes to formats, we should not forget that the .ico format is generally used to create favorites. However Since the release of WordPress version 4.3, WordPress has implemented a Site Icon feature that does it all for you.. This means that if you’re using WordPress version 4.3 (or higher), you don’t need to make an .ico file on your own, and you can upload a .gif, .jpeg, or .png image instead. WordPress will then convert it to .ico format and generate all required dimensions (make sure the original image you upload is 512×512 pixels).

However, if you are still using a WordPress version older than 4.3, you will need to manually add your site icon to WordPress (more on this later).

How to Add Favicon to WordPress?

Once you’ve finished creating your favicon, it’s time to add it to your WordPress site. The first thing you need to do is go to your admin panel and Click Appearance > Customize.

From here, Select the Site ID.

Here you can select the image you want to use as your site icon.

If your image is over the recommended size limit, WordPress will allow you to crop it. By doing so, click To organise picture.

After you have finished cropping (you can click the image and drag it with your mouse cursor), choose Crop button and then Save.

On the right side of the screen you also have the option to scale your image and Image Cropping section, you can even enter the desired image sizes and manually specify the aspect ratio.

Finally, don’t forget to click update Press the button.

That’s it – you have successfully uploaded your favicon to WordPress.

Adding Favicon to Old Version of WordPress (4.3 or less)

While we recommend that you always keep your website up to date with the latest version of WordPress, luckily you will need to add your site icon to your WordPress site manually if you are using a version older than 4.3.

First, you need to create an .ico file using one of the online generators we mentioned above. Next Upload your favicon.ico file to your website root directory via FTP. If you’re not sure how to do this, be sure to check out our FTP beginners guide.

It should be noted that there is some debate over whether the favicon should be added to the root directory or the theme folder (or both). In any case, we recommend that you at least upload it to the root directory as this will show your site icon in feedreaders.

Finally, don’t forget to link to the file location of the favicon in your header, as this is a guarantee that all browsers can find it. What you need to do to do this use an HTML anchor tag in your theme’s header.php file to add the code. You can find your header.php file by going to: Appearance > Theme Editor and then placing it Theme Files section on the right.

should be added to the codes. <head> and </head> labels:

<link rel="icon" type="image/x-icon" href="http://www.yourdomain.com/favicon.ico">

<link rel="icon" type="image/x-icon" href="https://qodeinteractive.com/magazine/add-favicon-wordpress/<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Adding a Favicon to WordPress with the Help of a Plugin

If you want to add your WordPress favicon with a plugin, you can do so by installing it. Favicon by RealFaviconGenerator. This plugin is easy to use and helps you create and set a favicon for different devices like desktop, Android, iPhone and iPad.

After installing and activating the plugin, navigate to: View > Favicon and then “Choose from Media Library” button.

When adding a favicon on the site, you must upload an image of at least 512×512 pixels. Customize screen, the Favicon by RealFaviconGenerator plugin requires you to upload an image at least 70×70 pixels and preferably 260×260 pixels.

After selecting your image, click on it. Create Favicon.

From then on you will be redirected to the RealFaviconGenerator website. Once there, you have to scroll all the way down and select. Generate your Favorite Icons and HTML code:

After a short while, you will be sent back to your WordPress site and you will see a message on your dashboard informing you that your favicon is ready.

You’ll also be able to get a preview of how your favicon looks on different devices here:

Solution

And that sums up the process of adding a favicon to your WordPress website. As you can see from the steps we’ve presented above, once you find the design that best represents you or your brand, the rest of the process is really child’s play.