If you have a website, you need a favicon. It's basically the "cherry on top" and really helps complete the overall web experience. What is a favicon, you may ask? A favicon is a small square graphic that displays next to the page title in a browser tab. Adding this graphic to your site makes your website immediately recognizable in a browser full of tabs – so your site stands out! You know, when you have 50 tabs open in your browser?! The visual recognition that happens with a small graphic in the browser makes it so easy to find your site amidst the sea of tabs! Keep in mind, if you don't add a custom favicon, a (boring) default one will be connected with your site.
Wondering what to use as your image? It's a great idea to use your logo or a small portion of your logo. The image is displayed very very VERY small, so using a portion like a "+" sign, heart, one letter or the initials will translate better at this small size. Less is more to have an impact! We would also recommend using the accent color from your color palette. Check out our favicon above in your browser, we've used only the "G" from our logo and made it stand out by placing it in a colored circle.
Depending on the platform your are using, favicons are usually in the .png or .ico format. If you need to create a favicon in the .ico format, just take your .png and upload it to the favicon converter (http://www.favicon-generator.org/). Favicon images work best across all browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px. These are the standard favicon dimensions, and while some browsers support larger favicon files, all will support that size.
If you are using Squarespace, here is a tutorial on how to connect your favicon image to your site.
