This is the perfect one-stop guide if you are looking for answers to where is favicon in WordPress and along with how to change favicon on WordPress. The detailed and comprehensive guide will help you in every aspect, so make sure to read the full article.
Brief Overview – Favicon In WordPress
In this detailed guide, you will be able to learn different aspects of favicon or Site icon, as you may call it. It begins with a brief introduction and gives you key points to take into consideration while preparing a favicon image. In the next section, you will come to know where the favicons or Site icons can be used and are present on the WordPress website. Later, you will read about the different methods which play a role in deciding the location of the favicons or Site icons and how can you change, edit or delete and install several Favicons according to your theme. There are few limitations as well, which is covered in the last segment and concluding with final thoughts.
So, without any further ado, let us begin with the guide.
What Is Favicon in WordPress?
Favicon is the abbreviated form of a favourite icon in WordPress. These are the most commonly used tool which is displayed next to the name of your website in a browser tab. This is the origin of favicons and the answer to where is favicon in WordPress, however, it can be used as browser bookmarks, home screen button for iOS and many more. It is generally used when you bookmark a webpage, or in the browsing where it appears on the URL bar, tabs or anywhere else to make it clearly visible and identifiable. These can also be used as application icons to be used on mobile devices. It is usually a 16 x 16-pixel graphic icon which gets saved as favicon.ico extension. And where is favicon in WordPress stored? It is located in the root directory of your server.
You can also call it by the name of Site icon. It is used to make your website identifiable by the users and for instant recognition when there are frequent visitors to your website. This also helps to increase the overall brand recognition which further builds trust and faith amongst the users and your targeted audience.
When you use a favourable favicon or Site icon, you increase the SEO (search engine optimization) process indirectly, if not directly. This act as an indirect tool to higher your rank in the search engines and thus widen the audience base. Building user-friendly websites not only leads to increased use of the website and the business but also helps in improving the time spent in interacting with the website. The use of bookmarks makes your website visually stand out which results in higher website traffic and SEO outcome. As Site icon or favicon are the visual representation of your business, it is the small yet significant part of the branding and creating visibility strategies and policies. After all, SEO is all about visibility and branding to increase the clicks.
Why Should One Consider To Add A Favicon To WordPress Website?
Using a favicon helps you to establish the identity of the website created on WordPress. Moreover, it helps in improving the usability and the user experience of the website.
Many of the visitors who tend to use multiple websites need to open multiple website tabs which can hide the title of the website. Here is where favicon or Site icon plays an important role which helps the users to identify your website and switch between the tabs which they wish to view in a fast and quick manner.
You can see favicons in the following forms –
- Bookmarks drop-down menu list
- Toolbar apps
- Browser tabs
- Browser history
- History drop-down menu list
- Search bar recommendations
- Search bar, etc.
You can even request the visitors to set your website as their home screen on their mobile devices. If any user does add your website to their home screen, then the icon which appears os the favicon which you have created or have to change favicon in WordPress.
So this gives a rough image as to why we should consider favicon or Site icon to be creative, unique and identifiable to make our websites reach more audience base and thus increase the overall performance.
How Can You Create A Good Favicon?
You can consider these aspects when you opt to create a good favicon or Site icon –
1. The wise use of space
You must consider the size of the favicon and utilize the maximum space you can for creating a visible and clear image. It is not always necessary to have a small-sized Site icon. You can prefer 16 pixels as it is widely accepted and supported by many browsers.
2. Keeping it simple
Even though you wish your website icon to be as creative and unique as possible, but you must also keep it as simple and clear as you can. The most popular and favourite icons are the ones which are simple yet unique. You can use catchy colours as these icons are quite small in size and the right choice of colours can play a significant role to catch more eyes. Avoid adding too many details and cluttered stuff if you want to stand out and capture the potential customers.
3. Identity of your brand
The favicons are meant to be the face of your website and brand, so it must be such that it depicts what your business is all about. This will help the users to understand the basic idea of your business in an instant way. Use the power of small and creative favicons to instantly gather thoughts about your business website.
4. Use of abbreviations
You can use the abbreviated version of the website title as your favicon. Many of the big and popular website and businesses have done so which makes their Site icon stand out. You can use different font and colour combinations to create a simple solution to the favicon designing matter.
5. Proper coordination of colours
The proper use of colour coordination can be the major factor for the pass or fail of your favicon or Site icon. As the size of a favicon is small, you can only experiment with colours and their appropriate use to clearly represent the website.
Where Is Favicon In WordPress?
There are a lot of methods to add or change favicon on WordPress. The answer to the question – where is favicon in WordPress, depends upon which method you use to add the Site icons to your WordPress website.
So, let us see these methods to add the favicon to your website created by WordPress.
How Can You Add Favicons Via WordPress Customizer
The 4.3 version of WordPress and the next update, have the feature of favicon which can be directly used to upload crop the particular image which you wish to add a favicon. Adding a favicon to your WordPress website with the help of a WordPress customizer is the simplest and easiest method as experienced by the users. All you are required to do is select an image of size at least 512 x 512 pixels and leave the rest of the process on WordPress.
- To begin with, you need to click on Customizer under Appearance option from the dashboard when you log in to your WordPress account.
- Then navigate to Site Identity tab and go to the Site icon section where you will find Select image button. Choose the image you want to add a favicon from the WordPress media library interface. You can select an existing one or can even upload a new image. Remember to keep this in mind that WordPress permits an image of size at least 512 x 512 pixels and not below than that.
- Once you are done selecting the required image, you can proceed by clicking on the Select button appearing in the bottom right corner.
- However, if your image is not the size of a perfect square, WordPress allows you to crop the image on the next screen before finalising the required one. You can drag and crop by using the box to highlight the portion which you want to keep as favicon.
- Ensure to check the preview of the cropped image on the right side of your interface.
- After you are done previewing and are fully satisfied with how the image will look like, click on the Crop image button to complete the process.
- That is all! But do not forget to click on Save and Publish to make the favicon active.
- In the future, if you wish to change favicon on WordPress, you can open this interface and choose the Change image option to do the same.
This was the first and simple method to answer – where is favicon in WordPress. Let us proceed to the next one.
How Can One Add Favicon Via Plugin
There are a diverse variety of plugins for all kinds of purposes. You can install a plugin for adding a favicon to the WordPress website as well. The most recommended and highly preferred by the users is Favicon y RealFavicon Generator plugin. The use of the plugin is as simple and easy as the use of WordPress customizer, but with more added features and compatible options which are supported in multiple app icon and devices.
- To start using it, you will need to install and then activate any of the free plugins from your WordPress dashboard. Make sure it is reliable and genuine without any chances of fraud.
- After the activation of the plugin, click on the Favicon button under Appearance to create a set of favicon. You will need an image which you upload or use an existing one, which is at least of size 70 x 70 pixels, or it will be better if the size is 260 x 260 pixels.
- After selecting the image, click on Generate Favicon which will take you outside of your WordPress website to Real Favicon Generator website. Once you reach this website, scroll to the bottom of the site and click on Generate your favicons and HTML codes. Wait for a few moments while your request is being processed. When the website sends you back to your WordPress website, you are ready to use the favicon, preview it and see the appearance on various devices or app icons.
You can use this method to know the answer – where is favicon in WordPress located and you can use it via plugins. Let us see yet another method in the next segment.
How Can I Add Favicon Manually
You can also add the favicon to the WordPress website by following some manual instructions. It is possible to include site icons to your website with the help of FTP and other minor code snippets. However, you will need to create your own image in case you wish to use this method as WordPress will no longer lend you a helping hand.
How can you create a Site icon picture?
In the earlier methods, you were able to use ICO file for your favicons images. Now, you can use the support from modern browsers which uses ICO, GIF, PNG, JPEG etc. files to create your site icons. However, JPEG files are not recommended as many versions of Internet Explorer does not support this type of file.
If you are good at using Photoshop, then you can use your skills to design an image for your site icon manually. Or, the simpler way to create a favicon is to use the cloud-based technology or tool which lets you create a Site icon from an existing image.
Real Favicon Generator fits here as well, as it is a cloud-based tool and acts as a plugin (as seen in the previous method). You can use this tool because –
- It lets you create favicons as well as app icons
- It creates the site icons in the PNG and ICO format
- It lets you customize the image of favicon even after uploading it
- All it asks is to paste the code which is supported by the plugin.
The other alternative for using a plugin to manually create and add a favicon is –
- Favicon Generator – it has similar functional procedure as the Real Favicon Generator.
- Favicon.cc – it has both the options to permit you to design a favicon from the beginning as well as use an existing image.
When you are using Real Favicon Generator, you will need to upload an image which you want to be taken as Site icon.
The next screen will give you the option to specify the details about the favicon you are using. This is an optional step.
When you are done with the formalities or do not want to change favicon in WordPress, scroll down to click on Generate your favicons and HTML code appearing on the bottom of the screen.
This was the third method which answers – where is favicon in WordPress. Although there are several methods to add a favicon, the location is mostly seen as the bookmark of the webpage.
So, with this segment, the picture is more clear as to understand where is favicon in WordPress and how can you use it to make your website identifiable.
Let us learn more about it.
How Can One Install WordPress Favicon?
When you have clicked on the Generate your Favicon and HTML code, you need to click on Favicon package button on the next screen, so that you can download your image for Site icon. Ensure that you leave this page open as you will require the code to be pasted to add your favicon.
Next, you will need to connect to the WordPress website via FTP and upload all the contents of the package of a favicon to the WordPress website’s root folder.
Make sure that the file is located in the same folder as the wp-admin and wp-content folders. Then copy the code provided by the Real Favicon Generator and use it with –
- Either a plugin such as Insert Headers and footers to add to the theme’s header
- or paste the code directly to the head section of the theme while editing the theme’s header.php file.
It is suggested that you use Insert headers and footers plugin so as to retain the theme settings even if you lose out any of the WordPress themes down the road.
For this, you need to install and activate Insert Headers and Footers and paste the code to Scripts in the header section. This can be located under the insert headers and footers in the settings menu. In the end, ensure that you save the settings and change favicon on WordPress. And that is it, you are all done.
Here are a few tips to use the favicon feature in a more effective manner-
Tip No.1 – Unique favicons for WordPress multisite
If you are using a multi-site network and want to include a unique favicon to each website, the easiest and simplest way is to make use of a plugin which lets you create a favicon, like the ones mentioned above. If you wish to try any other alternatives, you can go for Heroic Favicon Generator plugin where you have to make a little tweak manually in the codes.
Although it is possible to change the favicon in WordPress or edit the same in the theme files which allows unique Site icons for every website, it is slightly more complicated than using a plugin.
Tip No.2 – Use a CDN (Content delivery network) for Favicon images
Along with using the above-mentioned steps and methods, you can serve your websites with a better appearance by using a Content Delivery Network – CDN to enhance your image and content of the website.
If you opt to install a KeyCDN or CloudFlare service, then you can have the visitors to load the Site icon from your CDN rather than from your server. If you opt for a plugin like CDN Enabler, then it will allow you automatic rewrite to the WordPress favicon URL, thus to change favicon on WordPress so as to support and function along with the above-mentioned methods.
Criticism Or Limitations
When there is a high need to regularly check-in for a fixed location, the use of favicon can result in slower loading time of the website. It can also give 404 entries errors in the server log when it is non-existent.
There are other abbreviations like Shortcut icons as well, which are accepted by the users as keywords.
Favicons are quite often blamed for phishing and eavesdropping attacks as against the HTTPS webpages. Many of the web browsers display the favicons near UI area of web browser like the address bar which is generally used to convey a secure protocol connection. Therefore, an attacker can trick the users to make them think that they are using a safe and secure website when in reality they are not. Attackers such as man in the middle attack tools like SSLStrip use this kind of trick.
To eliminate this kind of attack, some of the web browsers have begun to display the favicons within the tab itself and display the security protocol in the website link beside the URL.
Some Final Words
After having an insight into the guide on the favicon and how can you change favicon on WordPress, you are prepared to go ahead and use it on your own websites created on WordPress. Give a unique identity and symbol of representation to your website via favicon or Site icon so as to foster the process of publicizing and branding. Make sure to include creative yet simple design to capture the attention and recognition without the need to read the full title of the website.
So go ahead without wasting any more time on searching, because it is time now to implement the readings into your websites.