How To Add That Little Image To Your Browser Tab
WHAT IS A FAVICON?
A favicon is that tiny image (16 x 16 px!) that appears in the top left corner of your browser tab. The word Favicon, comes from “Favorite Icon”. Having a favicon makes it easier for your webpage visitors to identify your site both when moving between open tabs and scrolling through saved bookmarks. A favicon is not required for your site, but it does help you to look more professional! To learn how to create and add a Favicon to your Squarespace website, check out the video and step-by-step guidance below!
FULL VIDEO TUTORIAL
STEP BY STEP :
Part 1 - Creating Your Favicon
Step 1: Choose Your Design Tool
In this tutorial, we used FreeLogoDesign.org to create our favicon because a) its free b) it allows you to export a transparent image c) the free export is the right size at 200 x 200px - more on sizing later. However, you can use any design tool you’d like! I’ve listed some great free options below, but in addition to that, any professional software would work as well. I also like Canva, but didn’t choose to use it for this example because, in the free plan, you are limited to exporting with a white background - which isn’t the end of the world, but limits your design options.
Step 2: Designing Your Favicon
A couple things to keep in mind when you are designing your favicon.
Keep the design ratio 1:1, you don’t want to add something that is super wide or super tall.
It’s best to avoid adding text to your favicon design. If your logo is text based, consider using a single letter or initials from your logo.
If you have a logo already, think about ways that you can condense the design and simplify it to read well in a browser tab.
Avoid using light colors as they will be more difficult to see against the grey background of the browser.
Keep it simple, remember this is going to appear quite small for viewers, so any intricate detail will most likely be illegible.
Step 3: Sizes + Format
In a browser, Favicons will appear at 16x16. However, when you upload to Squarespace, it is recommended that you upload an image sized between 100x100px to 300x300px range. For this tutorial, we use an image that is 200px by 200px. Remember that the ratio should be 1:1 or squared!
Your favicon should be either a .png or .ico file. In this example we export to .png, but it’s important to note that Internet Explorer does not render .png files in this case so be sure to check out which browser your website visitors are using most as it may influence your decision.
Step 4: Exporting Your Design
When you’re ready to export your design, be sure to give a clear filename, something like “Favicon_March2019.png” for example and store it in a folder where you typically keep other design and logo assets.
Once your favicon graphic is all ready to go - you can head on over to Squarespace and upload it!
PART 2 - UPLOADING YOUR FAVICON TO SQUARESPACE
Step 1: Uploading Your Design File
From your Squarespace Homepage, navigate to the Favicon Editor.
Design > Logo & Title > Browser Icon
Step 2: Saving + Viewing
Then either drag and drop, or click to open the file picker and select your Favicon file. Remember it should be either a .ico or .png format and no larger than 300 x 300 px.
Once the file has uploaded, click Save.
Then refresh your page to see your new Favicon!
If your Favicon image doesn’t appear in your browser right away, give it a few minutes.