How to Add Favicon in Free Weebly Site?

Favicon (short form of favorites icon) is a small icon shown in the browser that helps visitors to remember your brand. Some browsers show the favicon in the address bar nearer to URL and some shows on the tab nearer to the title of your page. This is a pro feature in Weebly and follow the below steps to easily add favicon to free Weebly site without upgrading to Pro account.

How to Add Favicon in Weebly?

We will discus the following topics in this article:

• Using .ico file for favicon without creating additional page.
• Using PNG or JPEG or any image file with an additional page.
• Favicon for Weebly pro users.

Offer: Host your Weebly and WordPress sites on Bluehost for $2.95 per month.

1. Using ICO File

Step1: Get Your Favicon Ready

You need to have a logo image before adding favicon to your site. Your logo can be in any standard image format like JPEG and PNG. Once your logo is ready then you can use any of the free favicon generators available in the web to convert it into a .ico file.

One such a favicon generator is “freefavicon.com“. Go to the site and select your image to convert it into a .ico file. You can also create an animated version by adding a scrolling text to the favicon. Once you are satisfied with your favicon preview, download the “favicon.ico” file to your local computer.

Step2: Upload Favicon to Your Weebly Site

After you have your .ico file, go to your Weebly account and edit the site you want to add a favicon. Select “Edit HTML/CSS” under “Theme” tab in Weebly editor.

Click on the “+” icon next to “Assets”, select “Upload File(s)” option from the dropdown and upload your favicon.ico file.

You can see your file name is listed under “Assets” after you uploaded it.

Note that the image of favicon file may not be visible like other images which should not be an issue. You can view it when viewing the published site on the browser. Save your changes and you need to provide a theme name for saving, if this is the first time you edit the theme. The default link of an image file in Weebly is as below:

http://<Your Site Name>.weebly.com/files/theme/<Image Name>.ico

Replace “Your Site Name” and “Image Name” with the URL of your site and your favicon file name. Ensure that you can open this favicon URL in a browser. If this URL is not working, right click on the image and copy the URL. It should look like below:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/xxxxx/files/favicon.ico

Step3: Linking Your Favicon

Go to “Settings > SEO > Header code” section and paste the following code:

<link rel=”shortcut icon” href=”Your Favicon Link”/>

Replace “Your Favicon Link” with the URL of your favicon.

Save your settings and publish your site.

Note: Instead of adding the code at site level, you can also paste the code in the “Header Code” section of each page under “Pages > Select Page > SEO Settings > Header Code”. In this way you can upload multiple favicons and link different icons to different pages of your Weebly site.

Step4: Test it on Various Browsers

The final step is to test your favicon by opening your site in various web browsers like Firefox, Chrome and Edge. Check the clarity and look in various browsers and adjust your favicon size if required.

Sometimes it may take longer time for the favicon to reflect in the browser, you may try refreshing, clearing the cache or close and open the browser.

2. Using PNG or JPEG Image File

Nowadays Weebly overwrites the .ico file with their favicon image. So the above method may not work in all cases. In such case, try this method. Also, if you are not able to create .ico file or not interested in modifying theme then this method will be useful.

Follow the below instructions:

• Create a new page under “Pages” tab and name it anything you want, for example, name it as “favicon”.
• Drag and drop and “Image” element in that page and upload your favicon image. The image should be .png or .jpg or any other standard image format.
• Remember, you can’t upload .ICO file using image element. You will see an error message showing invalid file type and the file must be a JPEG, GIF, or PNG.
• Publish your site and copy the image link it should be something like below:

http://<Your Site Name>.weebly.com/uploads/1/3/4/0/13404245/541135_orig.png

• Go to “Setting > SEO > Header Code” and paste the below code:

<link rel=”shortcut icon” href=”Your Image Link”/>

• Publish your site and the favicon will be seen in the browser now!!!

2.1. Hiding Favicon Page

Anyone can see your favicon page which will have one tiny image. So, it is necessary to hide this page from users and search engines.

• Go to “Pages” tab and check “Hide in navigation” to remove the favicon page from menu.
• Go to “SEO Settings” of the page and select “Hide this page from search engines” to hide the page from search engine crawlers.
• Set the “Visibility” of the page with site password so that even users know the URL, they will not be able to access.

3. Weebly Favicon Option for Premium Users

Premium plan users can upload the favicon to make their site looking professional. Weebly does not provide you any tool to create your favicon nor suggest the images for your favicon. You need to prepare your own .ico favicon image file with the appropriate size.

3.1. How to Upload?

• Login to your Weebly Pro account and edit the site you want to upload favicon.
• Go to “General” section available under site “Settings” tab.
• Upload your favicon as shown in the below picture.
• Publish your site and check in the browser (It may take sometime for the favicon to reflect in the browser)

Offer: Host your Weebly sites on SiteGround with 60% discount.

3.2. Features of Weebly Favicon Option

• Just upload your favicon image file.
• Weebly will auto enable the favicon for your site in short time.
• Supported in all browsers like Chrome, Firefox, Edge and Safari.

Important: When you copy the code, the quotes may be in curly format. Ensure to use straight quotes when pasting the codes on Weebly code editor.