What you need:
- Weebly Site Builder (available on any Shared or Weebly E-Commerce account)
- A Weebly Starter Hosting plan or higher
- Your brand’s logo
What is a Favicon?
The term “favicon” is short for “favorite icon.” Favicons are small images that help site visitors identify your website in places where more information might not be possible. For example, favicons are used in places like the browser tab, URL bar, and browser bookmarks. All of these places don’t have space for large images, so a favicon is the best option.
As you can see in the example below, Pair Network’s favicon is an infinity symbol displayed in the tab.
Why Change Your Site’s Favicon?
If you don’t set a favicon, then your site will either not have one or it will use the default icon based on the CMS you’ve chosen. For example, a Weebly site without a favicon will display a default globe icon.
WordPress, on the other hand, will display a WordPress favicon if another is not uploaded.
Setting up a brand-appropriate icon as your site’s favicon can help your website in a few ways. For one, it makes the site look more professional. When a default favicon is used, it may look like you didn’t take the time to set up your site properly. While not everyone may notice, you always want to put your best foot forward with your site visitors. So adding a small favicon to your site is a small price to pay for keeping your site looking professional.
Plus, adding your logo – or a portion of your logo – in places like the browser tab or bookmark bar can help users identify your site easily and promote brand cohesion.
How to Create a Favicon
Before we show you how to add a favicon in Weebly, we first need to make sure you know how to create a favicon.
To create a favicon, you’ll need your logo or an appropriate portion of your logo. Take Pair Networks for example. Our Pair logo is too rectangular to be easily translated into a favicon and still remain readable.
So, instead, we used the infinity portion of our logo, as you can see in our example below.
If your whole logo fits, though, don’t feel like you need to change it!
Now, once you have chosen your logo (or logo portion), it’s time to convert it into a favicon. Favicons will need to be in a compatible file type and size. A common favicon file type is .ico and .jpg.
Not sure how to make your logo file into a .ico file? There are lots of free, online generators who will do it for you, like favicon.io. Just visit a generator, upload your image, and then take the converted favicon file.
In addition to the file type, favicons need to be very small so that they can fit in places like the browser tab and bookmark bar. Because of that, the typical favicon file size is 64 px by 64px. Many favicon generators will automatically resize your logo during the conversion process.
How to Add Your Favicon to Weebly
Once you have your favicon image in the correct file type and size, you can start the process of adding the favicon to your Weebly site.
Like with most things in Weebly, the process is designed to be simple. The first step is to enter your Weebly Site Builder interface. You can find instructions on how to enter the interface in this article: How to Access the Weebly Editor.
Note that you need a Weebly Starter Hosting plan or higher to change your favicon on Weebly. A Weebly Demo plan does not have access to the favicon changing feature.
Once in the editor, follow these steps:
- In the top navigation bar, click the Settings tab
- In the left sidebar, make sure the General tab is selected
- Find the Favicon section
- In this section, click the Upload button
- Upload your favicon file
Note: Image must be either .ico, .jpg, or .jpeg. Recommended size is about 64px x 64px - To save your changes, publish your site by clicking the Publish button in the top right corner
Once published, you should see your new favicon appear in the browser tab for the live version of your site.
Keep in mind that this will not change the favicon for the Weebly site editor! You must visit the live version of your site to view your new favicon.
Need More Website Help?
Are you currently building a website? If so, let us help you make the best website possible! We have created a variety of resources you can use, with more in the works. We’re not just a web host; we’re invested in helping you create the best website you can.
Check out our website building resources below:
- What Should I Put on My Welcome Page?
- What Should I Put on My Homepage?
- How to Add an Opt-In Form to Your Weebly
- What Should I Put on My One-Page Podcast Site?
- How do I Add Links to My Podcasts
Stay tuned for more website building content in future weeks!
