A favicon, better known as the small icon that displays your website next to the title of your website. Your visitors can easily identify your website, for example if they have multiple tabs open at the same time. In addition, it ensures greater recognition of your website: your favicon is nowadays often displayed next to a search result in search engines such as Google. Smartphones also use the favicon of a website when someone has set your website as a hotkey. Enough reasons to create your own, unique favicon for your website. You can read how to do that here.
Create and set up Favicon
Designing and setting up your Favicon can sometimes take some 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 first important to tell you what your Favicon must comply with.
Conditions for the design of favicons
Square your Favicon
Although most Favicons appear as circles, your Favicon must originally be square. So keep this in mind when designing your Favicon, because 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 with 16 x 16 or 32 x 32, but nowadays keep 512 x 512 pixels.
Save your Favicon as a ‘filename.ico’
By saving your file as a ‘file name.ico’ (where you can of course put a self-chosen name under ‘file name’), all browsers can read your logo. You can also choose to use a .png or a .gif file like Favicon, although these are not supported by every browser. Websites like www.favicorner.com help you convert your image into a .ico file.
Take the size
into account Your Favicon is only 512 x 512 pixels in size. So do not try to upload your entire logo, name or something else large, because that is no longer readable for anyone. Keep it simple and clear, such as the first letter of your name or the logo in your logo. Get inspired by other brands and see what they have set up. In addition, make sure you have a transparent background.
Set 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:
- Open WordPress Admin
- Go to View
- Choose the WordPress Customizer
- Search for Site Identity
- Under the site title and subtitle you can choose your Favicon
- Choose ‘select image’
- Upload your newly created Favicon
- View the preview result
- Save and publish your website
Via an FTP Client
If it doesn’t work out the way above or the newer version of WordPress doesn’t work for your site yet, there’s 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, we’re going to set up your Favicon in the code itself. To do this, follow the steps below.
- Log in to your own FTP client
- Search for the root folder of your WordPress theme. This is often called wp-content/themes.
- Replace the current Favicon with your own Favicon
- Also put your Favicon in the root directory / root directory of your website. To do this, adjust the URL. This takes the following form: ‘naamvanwebsite.nl/naamfavicon.ico’
- Now we are going to make the adjustment so that it becomes visible on the site itself. To do this, do the following:
- Log in to the WordPress dashboard
- Go to View and then Customizer
- Look for the next line
- Replace this line with the following line /favicon.ico” />
- Can’t find the line of code? Place the above code in the tag
- Save the file
- Check if your Favicon is visible. Do this in various common browsers such as Internet Explorer, Edge, Chrome or Firefox. Can’t you see it? Then use a hard refresh, which will empty your cache. Your Favicon should now be visible.
So, now your website also has its own Favicon! In addition to looking super sleek and professional, it is also easier for your visitors and they remember your website better. A real win-win situation. Do you still need help generating a Favicon? Then use this favicon generator!