When you are browsing the web, have you ever noticed a small icon beside the website title on the web browser tab? The icon is called a favicon and adds a nice flair to complement your website’s overall look and feel. A favicon also signals that your website is serious, and could help you with search engine optimization.
A good favicon is not too large, has distinctive colors that won’t blend with the browser’s tab colors, and ideally is a part of your website’s logo. Designing a favicon is also easy – you can start by opening Adobe Photoshop or other image manipulation programs of your choice and start making one. The resulting file is saved in the ICO format.
To add a favicon to your website, there are a lot of methods depending on the type of website you own.
The old-fashioned way is to upload a “favicon.ico” file to the same folder as your index.html, but this method is quickly deprecated as more and more sites on the web shifts from hand-coded HTML pages to pages generated automatically by content management systems.
If you are using WordPress, one of the most popular content management systems, to power your website, adding a favicon is as simple as a trip to your WordPress admin panel. Most modern themes support uploading a custom favicon, so chances are you can upload a new favicon straight away.
Curious about how to start? Read on to find out how.
Upload Favicon File Through WordPress Customizer
The first step to upload a favicon in WordPress is by visiting the admin panel. Usually, the admin panel is located at http://yoursite.com/wp-admin. Once the login prompt is visible, log in with your username and password to get into the admin interface.
However, it might be possible that your user account is an author/contributor user, which means you will not have access to the part which allows you to upload the favicon. If your account is configured as author/contributor, contact the website administrator to elevate your privilege or change the favicon themselves. Once changed, the favicon will be visible to all visitors to your site, regardless of user type.
Once in the admin interface, click the “Appearance” menu. This menu is located on the left side of your screen, typically below “Comments”. There are several functions housed in this menu, including theme chooser, theme editor, and site customization tool.
After clicking “Appearance”, a list of submenus should appear. Choose “Customize” to start uploading your favicon. As mentioned before, the “Customize” menu is a site customization tool that allows you to change various parts of appearance, from banner to site title. It also allows you to upload your desired favicon.
In the “Customize” menu, you will find a lot of customization options. Click “Site Identity”. Depending on the theme you used, the Site Identity menu allows you to change your site name, banner, and title, and even toggle the display of them.
However, now we are focusing on how to change a favicon, so scroll down the page a bit. You should find an option to upload “Site Icon”. “Site Icon” is the WordPress jargon of favicon.
After finding the favicon options, it is a simple matter to upload your desired favicon. WordPress supports square favicon with a maximum size of 512 x 512 pixels.
Larger favicon resolution will look better on high-resolution displays, such as MacBook’s retina display.
Once you finish uploading your favicon, you can safely click “Save” and leave the admin panel.
WordPress will apply your changes and display your new favicon to new visitors. If you want to see the changes, you might need to clear your browser’s cache and refresh the page.