Web Design · Northeast Florida

How to Add a Favicon in WordPress: A Simple Guide

It's a small detail, but a missing favicon is one of the fastest ways to make a site look unfinished. Here's how to add one through WordPress's built-in tools.

How to add a favicon in WordPress

What a favicon is

A favicon, short for "favorite icon," is the small image in a browser tab. It also shows up in bookmarks, and on a phone's home screen when someone saves your site.

Small detail. But a missing one is one of the fastest ways to make a site look unfinished. WordPress's default gray "W" sitting where your icon should be tells every visitor that nobody finished setting things up.

Microsoft introduced the favicon in Internet Explorer 5 in March 1999. The original version was blunt: drop a file named favicon.ico in your site's root directory and the browser would find it. Standards caught up later with the <link rel="icon"> tag, which let you use other formats and put the file anywhere, according to The History of the Web's account of the favicon's origin. It has been standard practice ever since.

Creating your favicon

Use an existing logo mark, or make something new at 512×512 pixels. WordPress scales it down for you, and starting large keeps it from going blurry. Any basic design tool handles this, including free ones like Canva.

Does it have to be a .ico file? No. WordPress's built-in Site Icon tool takes .png and .jpg directly, so there is nothing to convert.

The .ico format is a holdover from the early days of browser support. You only need it if you are hand-coding a favicon outside of WordPress.

Adding it in WordPress

1. Go to Appearance > Customize > Site Identity in your WordPress dashboard.

2. Click "Select Image" under the Site Icon section and upload your file. WordPress shows a crop tool if it is not already square.

3. Click Publish to save it.

4. Clear your browser cache if it does not show up. Favicons cache hard. A hard refresh, or a quick look in a private window, is sometimes the only way to confirm it actually changed.

Common questions

Does my favicon have to be a .ico file?

No. WordPress's built-in Site Icon tool takes .png and .jpg directly, so there's nothing to convert. The .ico format is a holdover from the early days of browser support, and you only need it if you're hand-coding a favicon outside of WordPress.

What size should I make my favicon?

Start at 512×512 pixels. WordPress scales it down for you, and starting large keeps it from going blurry. Use an existing logo mark or make something new, and any basic design tool handles it, including free ones like Canva. WordPress shows a crop tool if it isn't already square.

Why isn't my new favicon showing up?

Favicons cache hard. Clear your browser cache, do a hard refresh, or check in a private window, which is sometimes the only way to confirm it actually changed. If you clicked Publish under Appearance > Customize > Site Identity, it's saved. Your browser is just showing you the old one.

Does a favicon really matter?

It's a small detail, but a missing one is one of the fastest ways to make a site look unfinished. WordPress's default gray "W" sitting where your icon should be tells every visitor nobody finished setting things up. It also shows in bookmarks and on a phone's home screen.

Does your homepage pass the three second test?

A visitor decides in about three seconds whether your site is for them. Put your address in and I will send you what a stranger actually takes from it, and the specific things to fix.

Scan my site free →

Where to start

Need more than a favicon fixed? gravityGone handles WordPress setup and maintenance for small businesses across Jacksonville and Northeast Florida.

Mike Finocchiaro

Mike Finocchiaro

Mike is the founder of gravityGone, where he helps small businesses in Northeast Florida grow through Web Development, SEO, and Marketing Automation.

Learn more about Mike →

Go to Top