Home » WordPress » How to add favicon to WordPress website

How to add favicon to WordPress website

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.

add favicon to wordpress website

Best WordPress hosting 2024

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.

crop favicon in wordpress

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.

wordpress set favicon

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK