How to Create a Favicon for Your Website (Sizes and WordPress Steps)

Create a favicon that looks sharp everywhere: the sizes you need, design tips, how to add a Site Icon in WordPress and what Google needs for search results.

How to create a favicon for a website guide cover with a star icon

Table of Contents

To create a favicon, start from a square, simple version of your logo (an icon or initials, not the full logo with text), export it as a 512 x 512 pixel PNG with a transparent or solid background, and upload it as the Site Icon in WordPress (Appearance, Customise, Site Identity, or Settings, General on newer versions), which creates all the smaller sizes for you. For Google Search results, Google asks for a square favicon that is a multiple of 48 pixels, so a 512 PNG (or 48, 96, 144 pixel versions) covers it. Test that it is still recognisable at 16 pixels.

Key takeaways
  • A favicon must work at 16 to 48 pixels. Simplify the logo.
  • Start from a 512 x 512 square PNG.
  • WordPress Site Icon generates browser, Apple and Android sizes automatically.
  • Google Search shows your favicon next to results; keep it square and clear.
  • Crop to a perfect square with the free Image Cropper.

The tiny icon people actually see

Picture someone with twenty browser tabs open, hunting for your website among them. All they can see is a row of tiny icons. Or picture your site in Google’s mobile results, where a small round icon sits next to your name. If your favicon is the default WordPress logo, a blurry squashed version of your full logo, or missing altogether, your site looks unfinished.

It is one of the smallest images on your site, and one of the most seen.

Favicon sizes you need

Where it appearsSizeNotes
Browser tabs and bookmarks16 x 16, 32 x 32Often in a .ico or PNG
Google Search resultsMultiple of 48 (48, 96, 144…)Square, must represent your brand
iPhone home screen180 x 180apple-touch-icon
Android home screen and apps192 x 192 and 512 x 512Listed in a web app manifest
Source file512 x 512 PNGMake every other size from this

Design tips for a good favicon

Use a symbol or initialsA full logo with a tagline becomes an unreadable smudge at 16 pixels.
Strong contrastIt must work on light and dark browser themes.
Fill the squareLeave only a small margin. Tiny shapes in a big empty square are hard to see.
Keep it consistentUse your brand colour so people connect the icon with your site.

How to make and add a favicon in WordPress

  1. Prepare a square imageTake your logo symbol and crop it to a perfect square with the Image Cropper.
  2. Export at 512 x 512Save as PNG. Convert from other formats with the Image Converter if needed.
  3. Upload as Site IconIn WordPress, go to Appearance, Customise, Site Identity (or Settings, General in newer versions) and select Site Icon.
  4. Check itOpen your site in a new tab and look at the tab icon. Check on a phone too.
  5. Wait for GoogleGoogle updates favicons in search results when it recrawls your homepage, which can take days or weeks.
Some themes and page builders add their own favicon settings. Use only one method so you do not end up with conflicting icons in the page code.

Not using WordPress?

Add the icons to your site’s head section with link tags (icon, apple-touch-icon) and a web app manifest for Android. Many free favicon generators produce the full set and the code from one 512 pixel PNG.

Testing checklist

  • Is it recognisable at 16 pixels?
  • Does it look right on dark mode browser tabs?
  • Does it appear when you save the site to an iPhone or Android home screen?
  • Is the file square and a multiple of 48 for Google?

Need your logo in different formats? Read what is an SVG file and PNG to JPG: when to convert.

Sources

Frequently asked questions

What size should a favicon be?

Start with a 512 x 512 PNG. Browsers use 16 and 32 pixel versions, iPhones 180, Android 192 and 512, and Google Search needs a square that is a multiple of 48 pixels.

How do I add a favicon in WordPress?

Go to Appearance, Customise, Site Identity (or Settings, General in newer versions) and upload a Site Icon of at least 512 x 512 pixels.

Why is my favicon not showing in Google?

Google updates favicons when it recrawls your homepage. Make sure it is square, a multiple of 48 pixels and accessible to Googlebot, then wait.

Should my favicon be my full logo?

Usually not. Use a simple symbol or initials, because full logos with text are unreadable at 16 pixels.

Do I need a .ico file?

Not necessarily. Modern browsers support PNG favicons, and WordPress Site Icon handles the sizes for you.

Free toolTry the Free Online Image Converter

Convert any image to JPG, PNG, WebP or BMP in seconds, privately in your browser.

Open the free tool →
Written by Tanvir H

WordPress and Elementor web designer at Tanvir WebXprt, Bangladesh, with 7+ years of experience and 650+ projects. Tanvir builds the free tools on this site and writes practical guides for creators, learners and small businesses.

Learn more

Guides for this tool

Built by Tanvir WebXprt

Want a tool, website or app like this for your business?

Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.

Website developmentWordPress, Elementor & e-commerce sitesfrom $899
Creative designWeb, graphic & brand identityfrom $220
SEO & paid adsRank on Google, run Meta & Google Adsfrom $300
Speed & fixesCore Web Vitals, bugs and upgradesCustom quote
  • 650+ projects
  • 7+ years
  • 4.9★ rating
  • Govt. registered freelancer

Contents

Was this helpful? Spread the word and share with your network!
Facebook
Pinterest
LinkedIn
Reddit
VK
X
Telegram
Threads
Tumblr
Email
WhatsApp
Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Article

How to crop a photo without losing quality guide cover with a zoom icon
How to Crop a Photo Without Losing Quality

Crop photos without losing quality: why cropping reduces resolution, how many pixels you need for each use, a 6-step method and why repeated saving hurts.