Adding favicon WordPress?
Every website should have a favicon or fav-icon. That small icon you see on browser tabs address bars bookmarks and so on in WordPress. Here you will learn How to add favicon WordPress?
before you start how How to add favicon WordPress? first, learn what favicon is?. Favicons are called site icons and these icons can play a small but important role in branding your website and not having one could seem less credible to some users. So let’s read more about its file formats.
The two most popular are ICO and PNG, these formats have the most browser support and support transparent backgrounds for your favicon an ICO file allows you to store multiple images with different sizes in one file. Allowing the browser to choose from the options additionally since html5 PNG is an acceptable format for your favicons and all major browsers are supporting them now. But with the release of WordPress 4.3, we don’t have to worry about any of that since the customizer has a site icon option that accepts more popular formats like gif and JPEG let’s talk about the size your site needs multiple favicon image sizes available in order to display them optimally in all use cases.
The four most common sizes needed are generated automatically whenever you add a site icon from the WordPress customizer so no need to stress.
However, you will need to make sure the image you upload to the customizer is at least 512 by 512 pixels WordPress will create the other sizes from the original file as follows
- 32 by 32 180 by
- 180 192 by 192
- 270 by 270
Now let’s read about naming and placement back in the day your file would need to be favicon dot ICO and you would add it to your root directory.
But now with WordPress, you can name your file. Anything save it in other formats and store it anywhere on your site. So if you want to create it for your site. Follow these steps.
You can create your favicon it’s no different than designing your own logo you can use a photo editor like or Photoshop or other software.
But just remember to design your favicon as a perfect square now go ahead and save it and if you want a transparent background save your file as a PNG or gif.
Now how to add favicon to your WordPress site.
How to add favicon WordPress? Methods
- WordPress Customizer Method: The WordPress customizer for most this is the only method. You need to consider for WordPress all you need is an image and WordPress will do the rest. From the WordPress dashboard go to appearance customize then select site identity. You will find an option to set your site icon then you can select your image from the media library or upload. A new one make sure your file is at least 512 by 512 pixels to ensure the best quality rendering of your image for all use cases. Once you select the image you want you’ll be prompted to crop your image. But it should already be a perfect square so save your changes and that’s it WordPress will do the rest. So now you can refresh your page to see your favicon magically appear in your browser
- Adding a favicon using a plug-in: If you want the help of a plug-in to add a favicon to your website. You’re in luck a simple search of the WordPress repository will give you some great free plug-ins to choose from personally. I would look no further than favicon buy real favicon generator and stole the plug-in and navigate to appearance favicon then upload your image and make sure it is perfectly square. At least 260 by 260 the plug-in will redirect you to the online generator to complete customization of your favicon. When you’re done click the button and since you’re using the plug-in you don’t have to worry about any code. You’ll be redirected to your site and greeted with a nice preview of your icon displays
- Adding a favicon manually: In older versions of WordPress you can add a favicon to your site in two steps first access your site files and upload the favicon dot ICO to your root directory. Now add the following code inside the head tag since you uploaded your favicon to your root directory your link should just be your website slash favicon dot ICO.
There you go it’s not nearly as simple as option one but at the end of the day, it still gets the job done and just like that whether you use option one two or three.
You should now have yourself a favicon if this post helped you in any way then be sure to hit share with your friends and support me by providing your comments.