Favicon guides
How favicons work, which sizes you need, and how to add them to your site.
How the image to favicon converter works
What happens to your logo after you drop it in, from resizing to building favicon.ico, and why nothing is uploaded.
What is a favicon? Meaning, uses and examples
A favicon is the small icon for a website shown in browser tabs, bookmarks and search results. Here is what it means and why every site needs one.
How to add a favicon in HTML (code for every browser)
The HTML code to add a favicon to your website, where to put favicon.ico, and how to check it works.
Which favicon sizes do you actually need?
A short list of the favicon files a website needs today, and the HTML to add them.
Favicon file formats: ICO vs PNG vs SVG
Which favicon format to use, what the ICO format is, and why most websites use all three.
How to show your favicon in Google Search results
Google’s favicon rules, why search results show a grey globe instead of your icon, and how to fix it.
Favicon not showing? 8 common causes and fixes
Why your favicon doesn’t appear in Chrome, WordPress or Shopify, and how to fix each cause.
How to add a favicon in Webflow (and the webclip icon)
Step-by-step guide to setting a Webflow favicon and webclip, the right sizes, and what to do if it doesn’t update.
How to add a favicon in WordPress (Site Icon)
Set a favicon in WordPress with the built-in Site Icon setting, the right image size, and fixes if it isn’t showing.
How to add a favicon to your Shopify store
Where to upload a favicon in the Shopify theme editor, the best size, and why it might not show.
How to change the favicon (browser icon) in Squarespace
Squarespace calls the favicon a browser icon. Here is where to change it in Squarespace 7.1 and 7.0, and the right size.
How to add a favicon in Next.js (App Router and Pages Router)
Add favicon.ico, icon.png and apple-icon.png in Next.js using file conventions, or with link tags in the Pages Router.