How to Add a Favicon to Your Website (WordPress, Shopify & HTML)

The favicon is the little icon in browser tabs, bookmarks and phone home screens. Missing one makes a site look unfinished.

⭐Free Favicon Generator
Create favicon.ico and all icon sizes from one image.
Open tool →

Create the files

Start with a square logo, ideally 512 × 512 or larger with a transparent background. Drop it into the Favicon Generator to get favicon.ico plus 16, 32, 48, 180, 192 and 512 px PNGs and the HTML code.

WordPress

Appearance > Customize > Site Identity > Site Icon (or Site Editor > Site Identity in block themes). Upload the 512 px PNG – WordPress creates the other sizes.

Shopify, Wix and Squarespace

Shopify: Online Store > Themes > Customize > Theme settings > Favicon. Wix: Settings > Website settings > Favicon (premium plans). Squarespace: Settings > Browser Icon.

Plain HTML

Upload the files to your site's root and add the link tags from the generator inside <head>.

Not showing up?

Browsers cache favicons heavily – check in a private window, or add ?v=2 to the favicon URL in your HTML.

Frequently asked questions

What size should a favicon be?

Provide 16, 32 and 48 px (in favicon.ico) plus 180 px for Apple and 192/512 px for Android.

Can I use an SVG favicon?

Modern browsers support it, but keep favicon.ico as a fallback.

Does a favicon help SEO?

Google shows it next to mobile search results, which helps clicks.

⭐Free Favicon Generator
Create favicon.ico and all icon sizes from one image.
Open tool →

More guides