Favicon is an image file which contains icon (sometimes more than one) associated with a particular website. You can see favicons in browser address bars, browser tabs (before website or page name), in bookmark lists. Favicon is also knows as site icon or website icon.
Most of the time the image contains website logo. That way it helps you notice websites easier, especially in a long list because human eye catches known images much faster compared to plain text.
You don’t need coding skills or additional plugins to set favicon in WordPress website. Here’s how you do it.
What is the right size and file format for favicon
You can use almost any type of image file format for favicons – ICO, JPG, PNG. Most of latest browsers also support SVG icons but not all of them. That’s why I personally use and recommend transparent PNG. They look great both on light and dark backgrounds.
One drawback for using transparent PNG favicons is that they weigh slightly more than JPG files. So it’s sort of compromise – you lose a tiny bit of website speed for a better looking favicon. For highly optimized websites any additional kB may not be right, but since you’re using WordPress, not some kind of static website, another 2-3 kB for better looking favicon won’t hurt too much.
Favicon might look tiny in the browser’s address bar. So you might think that having 32×32 px favicon image should work just fine. But have in mind that favicons also are shown as icons in devices like iPads with Retina displays where icon size is 512×512 px. So don’t make them too small because they’ll look blurry on high resolution devices.
By the way, in most cases the best format for favicons is square – they’re square in browsers and icons are square most of the time.
How to upload and set favicon in WordPress website
Adding favicon to WordPress website is simple and straightforward process. Go to Appearance >> Customize in WordPress admin menu, and open Site Identity tab. Scroll to the bottom of the tab, and you’ll see Site Icon setting.
Click Select site icon button, and upload or select an image you’d like to use as favicon in your website.
After selecting an image WordPress will ask if you want to crop the image. You may crop image, or click Skip cropping depending on the image format.
That’s it – after cropping your WordPress website will have favicon, and you’ll have a preview how it will look like in browsers and apps.
