A favicon is your website’s icon that shows up in the browser- it sits to the right of your page title in Chrome, Firefox, etc. Originally a blend of the words favorite and icon, most people commonly refer to it simply as your “site icon” or “browser icon”. If your site doesn’t designate an icon, a default one will display (for instance, in Chrome, its a globe icon).
Why is it a good idea to have one?
Its a fun little extension to your branding, it shows that you go the extra mile, and that you are web-savvy.
What happens if I don't have one?
Your browser will use a default one, or if you're using Squarespace or Shopify, they provide a default one. Pro tip: this instantly signals that the site isn't professionally done, or that someone overlooked that detail. I'm always amazed at how many big brands I see still have the generic "square" that tells the whole world, this is a Squarespace site!
What makes a good favicon?
The favicon is tiny (like 16 pixels high), so don’t just squeeze down your logo, because no one will have any idea what it is. Instead, use part of your logo, your initials, or your logo symbol. I like to make my client’s favicon in a circle, but it can be any shape you want.
How do I add it?
In Wordpress, its super easy to add- go to Appearance >Customize > Site Identity and upload your file (jpeg or png etc) (or your theme may have a specific spot for it).
In Shopify, go to Themes > Customize > Theme Settings > Favicon
In Squarespace, go to the Home menu > Design > Browser Icon (v7.1) or Logo/Title (v7.0)