A Favicon is better known as the little icon that displays your website next to the title of your website. It is easier for visitors to identify your site, for example, if they have multiple tabs open at the same time. In addition, it ensures greater recognition of your website:
nowadays your Favicon is often displayed next to a search result in search engines such as Google. Finally, the Favicon of a website is also used on smartphones, when someone has set your website as a shortcut. Enough reasons to create your own, unique Favicon for your website. You can read here how to do that.

Index

• Create and set up a favicon
• Conditions for the design of favicon
• Setting up favicon via WordPress
• Via WordPress Admin
• Via an FTP Client

Create and set up a favicon

Designing and setting up your Favicon can sometimes take a little time, but it’s not very complicated. In addition, it also has several advantages. Before we explain how to set up a Favicon, it is important to tell you what requirements your Favicon must meet.

Conditions for the design of favicons

Square Up Your Favicon

Although most Favicons are shown as circles, your Favicon must be square originally. So keep this in mind when designing your Favicon, as it may need to be trimmed.

Reduce your Favicon to 512 x 512 pixels

This is the most common size for a Favicon. In the past, these icons were a lot smaller at 16 x 16 or 32 x 32, but nowadays keep 512 x 512 pixels.

Save your Favicon as ‘filename.ico’

By saving your file as ‘filename.ico’ (where you can put a name of your choice at ‘filename’ of course), all browsers can read your logo. You can also choose to use a .png or .gif file as Favicon, although these are not supported by every browser.

Take the size into account

Your Favicon is only 512 x 512 pixels in size. So don’t try to upload your entire logo, name, or anything else big, because that will no longer be readable for anyone. Keep it simple and clear, such as the first letter of your name or the logo in your logo. Get inspiration from other brands and see what they have set up. Also, make sure you have a transparent background.

Setting up favicon via WordPress

Via WordPress Admin

Time required: 2 minutes. In the newer version of WordPress, from version 4.3, it is very easy to add your Favicon to your website. To do this, follow the steps below:

1. Open WordPress Admin
2. Go to Display
3. Choose the WordPress Customizer
4. Search for Site Identity
5. Under the site title and subtitle, you can choose your Favicon
6. Choose ‘select image‘
7. Upload your newly created Favicon
8. View the sample result
9. Save and publish your website

Via an FTP Client

If the above method doesn’t work or the newer version of WordPress still doesn’t work for your site, there is another way to set up your Favicon. This is done via an FTP client. Here you will find, among other things, the code of your website. We need this code to set up your Favicon. First, let’s set up your Favicon in the code itself. To do this, follow the steps below.

1. Log in to your own FTP client
2. Locate the root directory of your WordPress theme. This is often called wp-content/themes.
3. Replace the current Favicon with your own Favicon
4. Also put your Favicon in the root directory / main folder of your website. Adjust the URL for this.
5. Now we are going to make the adjustment so that it becomes visible on the site itself. For this you do the following:
6. Log in to the WordPress dashboard
7. Go to Appearance and then Customizer
8. Look for the next line
9. ‘ Replace this line with the following line /favicon.ico” />
10. Can’t find the line of code? Then put the above code in the tag
11. Save the file
12. Check if your Favicon can be seen. Do this in various common browsers such as Internet Explorer, Edge, Chrome, or Firefox. Can’t see it? Then use a hard refresh, which will clear your cache. Your Favicon should now be visible.

So, now your website also has its own Favicon! Besides that it looks super sleek and professional, it is also easier for your visitors and they remember your website better. A real win-win situation.

for website maintenance service contact us.