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.

Notice how the Wikipedia logo has a white background. If you don’t want to see a white background on your Favicon, make sure you can export it as a  transparent  .png file. In this example the red logo on the left is a transparent png file, for reference.

Notice how the Wikipedia logo has a white background. If you don’t want to see a white background on your Favicon, make sure you can export it as a transparent .png file. In this example the red logo on the left is a transparent png file, for reference.

Step 2: Designing Your Favicon

A couple things to keep in mind when you are designing your favicon.

  1. Keep the design ratio 1:1, you don’t want to add something that is super wide or super tall.

  2. 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.

  3. 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.

  4. Avoid using light colors as they will be more difficult to see against the grey background of the browser.

  5. 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

 
Navigating To Favicon.gif

From your Squarespace Homepage, navigate to the Favicon Editor.
Design > Logo & Title > Browser Icon

 

Step 2: Saving + Viewing

 
UploadingYourFavicon.gif

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.

FaviconInBrowserTab.png

Nice work my friend! 🎉

 

PS. If you are looking for more guidance like this, plus an inspiring community of Wellness Leaders to learn from, grow with and celebrate success, I’m inviting you to join me at SPACE CAMP! It’s time to flip the script on what it actually takes to grow a creative business with love, ease and success.