Before showing you how to add Favicon to WordPress, let me ask you:
Do you want your website to stand out from the crowd and root stronger into your customers minds?
There is a simple trick that helps you achieve it. The secret lies in this small icon on a tab of your browser. It is called Favicon, from the words “Favourites Icon.”
See! It’s here:
This small design element has a significant role in your online campaign. You may wonder, though, how this tiny piece of graphics could be beneficial. And then, how to add it to your website?
Let’s dig into the details.
1. How is Favicon Useful?
1.1. Stand out from the crowd
If you have not added your Favicon yet, a default image looks like a little blank page. Not really impressive, is it?
In fact, tons of small businesses and blogs don’t have Favicons installed. Therefore, it’s your chance to stand out by adding your personal Favicon to your website. This way your site looks more polished and has more credibility too in the eyes of your customers.
1.2. Your Site is More Easily Recognized
By adding your Favicon you save your clients time. How?
People are visual by nature, and this is why we recognize images and colors much faster than information that is hidden in the text. Look at the picture below. That is part of Google Chrome bookmark menu.
Can you recognize some of the Favicons?
1.3. Sign of Trust and Professionalism
Building trust with your customers is one of the primary functions of your visual branding. Without Favicon added you send your customers a message that you are not quite professional. You tell them that you are still a newbie. This small design element with only 16×16 pixels in size helps you to look professional, even if you just started. It will also confirm your returning customers that they returned to the right place.
2. How Big Brands Design Their Favicons?
Common practice is to use a logo as a Favicon. However, there are two main problems:
- A Favicon is tiny – only 16×16 pixels in size.
- A shape of a Favicon is square.
These might be problems because many logos are too complex to display at such small sizes, and many of them fit rather into rectangles than squares. So how do companies solve these problems?
1. Facebook uses its logo:
2. Paypal uses its logo too:
4. Twitter is using its logo:
You got the point, right?
3. Make Your Own Favicon
1. Choose a canvas with 500×500 pixels.
2. Design the Favicon. Please notice that the Favicon will be tiny, only 16×16 pixels, so
3.1 Give Your Favicon a Transparent Background
If you want to give your Favicon a transparent background, use your image editing software to make the background transparent first. Chessboard-like grey-white background means it is transparent:
1. Create a new file, say 500 x 500 pixels. This new image file has only one layer – the background. And the background is white.
2. The easiest way to make the background transparent is this. You add another layer and then delete the original background layer. So from the main menu choose Layers → Add New Layer. Now you have two layers. Do you see, the second layer is transparent? It’s like a transparent film.
3. Now delete the original background layer. For this select the Background layer, then click Layers → Delete Layer.
4. After that, you have only one layer, and this is transparent. Now design your favicon.
5. If you are happy with it, then save the file as .gif!
DO NOT save it as a .jpg file!
Note! If you save it as .jpg file, the result will still be a white background.
3.2. Turn Your Image File Into a Favicon
After you are finished with your Favicon design, go to http://www.favicon.co.uk/. Here you generate a Favicon.Ico file from your image. At their homepage, you should see something like this:
Click “Choose File” button and choose your image. At Favicon Size, it is up to you decide how big you want it. You can leave it 32×32 pixels. Hit “Generate Favicon”. Your Favicon is generated, and you are asked to download a Favicon.ico file to your computer. Click “Download Your Favicon Here”.
Note! You may also want to try this Online Favicon Maker to create your Favicon.
If you don’t have a WordPress site, then skip the section #4 and jump right to the section #5.
4. How to Add Favicon to WordPress
Login to your WordPress website and go to “Plugins” → “Add New“. Type in “Favicon” and click “Search Plugins”.
A list of available plugins is provided. I prefer “All in One Favicon“. It supports .ico file formats but also .gif and .png. I recommend using the favicon.ico file. Some applications may not read favicon png and gif versions. So .ico is the safest way to go.
Click “Install Now” and after installation click “Activate Plugin“. That will take you to the Plugins page. Find your newly installed Favicon plugin and click “Settings“. You see two sections here: “Frontend Settings” and “Backend Settings” which both allow .ico, .gif and .png file formats. If you followed the instructions here, you have the favicon.ico file. Upload your newly created favicon.ico file into respective places of “Frontend Settings”:
and “Backend Settings”:
After that hit “Save Changes” button.
Congratulation! Your Favicon is created and uploaded. You can go to your website and check it out.
5. Add the Favicon to Your Website
If you don’t have a WordPress website, do the following:
1. Use your favorite FTP program to log into your site.
2. Go to /httpdocs/ and find the file named favicon.ico. Delete it.
3. Upload your newly created favicon.ico file in that folder.
4. Go to your website and refresh it in the browser window. The Favicon shows up now.
Before You Go:
If you have any questions or comments about the topic that you want to share, please leave them in the comment form below.