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.

Related:  Facebook Social Plugins

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.

Edit HTML CSS in Weebly
Edit HTML CSS in Weebly

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

Uploading Favicon in Free Weebly Site
Uploading Favicon in Free Weebly Site

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

View Uploaded Favicon File in Weebly Theme Editor
View Uploaded Favicon File in Weebly Theme Editor

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.

Add Favicon Link in Weebly Header Code Section
Add Favicon Link in Weebly Header Code Section

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.

Related:  How to Choose the Best Plugins for Your WordPress 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.

Check Favicon in Browser
Check Favicon in Browser

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!!!
Related:  How to Use Disavow Links Tools in Bing Webmaster Tools?

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)
Favicon for Weebly Pro Users
Favicon for Weebly Pro Users

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.

Recommended Articles:

78 thoughts on “How to Add Favicon in Free Weebly Site?”

  1. UPDATE

    The above methods aren’t necessary anymore. Under ‘settings’ and ‘general’ weebly now offers the option to upload your favicon and it will automatically appear. Works for .pmg as well as .ico files.

    Reply
  2. I have a problem. The favicon uploads to the website with .weebly domain but not to my Freenom domain. What is the problem and how can I fix it?

    Reply
    • You can’t upload ICO file using image element as mentioned in the article. Uploading an image under “Assets” section shouldn’t be a problem on any domains. You can consult with Weebly or use other PNG or JPG image file format as explained.

      Reply
  3. I’ve follow for 3 times all the steps for the first method without success.
    Am I the only user with this problem?

    Reply
  4. Wanted to ask a question: in the png method, in the code, I have pasted my image link, and done all the things afterwards, but my icon doesn’t appear. Plz help. Tell if anything I missed

    Reply
  5. Still works. Little work around with the file name as weebly no longer uses weebly.com/files…

    upload your ico as above. also upload a png the same name as your ico such as favicon.png and favicon.ico – upload them to the same folder or root. when you upload the png right click it and copy image address. copy into notepad and change .png to .ico then copy it with the .ico at the end. then use that as your link in the header section.

    Works a treat.

    dont name it favicon.ico as weebly will probably block that file name. mine is a wheel so mine is wheel.ico.

    Reply
  6. Thanks for the guide! Still possible to change the favicon but the .ico method didn’t fully work for me. I think the favicon needs to be placed manually in the root directory rather than uploaded through the weebly editor.

    I tried to replace the weebly favicon (called favicon.ico) in the root directory but it looks like weebly overwrites this file periodically.

    The new favicon must be named something other than favicon.ico (like favicon_1.ico). Your site will by default look for favicon.ico in the root direcory, but this can be overridden in the header code, available under Settings>SEO in the weebly editor.

    Reply
    • Thanks for the detail. If you have root access then definitely you can replace the Weebly icon with yours.

      Otherwise, whether using different name for images or different formats (.png) the result should be same.

      Reply
  7. Favicon disappears on my site when I point my domain name to my weebly free site with masking. I think the masking property hides the favicon also. Is there any way to over come this problem.?

    Reply
  8. I was not able to get it to work. When I upload my .ico file, the file name appears as shown in the example, but there is nothing in the dimension box (where the example shows “26 x 93”). Could that be the cause of my problem, and what can be done to fix it? Thanks.

    Reply
    • The link of your favicon is pointing to 404, it is not the correct image link. It does not matter if the image is not showing in the preview but it should be accessible with the URL.

      Reply
  9. I tried both methods above, even putting the code on individual pages. Sadly it’s not working for me, think its to do with the updated weebly. The instructions were nice and clear however, nice job there. Hope theres new a solution soon.

    Reply
    • Looks it works on some sites and not on others making it difficult to find a way out. You can see our demo site “http://demo.webnots.com/” perfectly working with favicon but sure not on all others.

      Reply
  10. Hi guys,

    I have the free version of weebly too and can’t manage to change the favicon.
    I have made a new page, put my favicon.jpg on it and copied the link.

    I pasted the following in the header-code, but it doesn’t work.

    Is the code wrong? I would really appreciate your help and advise!! Many thanks!

    Antje

    Reply
  11. Same here. Since the Weebly Update at the beginning of this october my favicon is gone.
    Now I am eagerly waiting for a new workaround,

    Thank you!

    Reply
    • Try remove your favicon link and publish the site. Again add the favicon and re-publish your site. If that does not help please wait some time till the dust of change is settled. This was the same case when Weebly changed the interface last time and things will start working after few days.

      Reply
  12. I sued this method (.ico) and it worked great for a year or so, not sure what weebly has been doing yesterday (looks like there have been quite some changes) but my favicon stoped working!!!
    Can you help?
    Thank you

    Reply
    • Hi,
      same here with Google Chrome browser – my favicon is gone.
      But – with MS IExplorer the favicon still shows up.

      Any idea..?

      Reply
    • Some browsers show your favicon and some shows Weebly icon. Since Weebly did big changes in their interface and fixing lot of bugs you can wait for some more time to get things right automatically. Unfortunately Weebly handles the change management process very unprofessionally in which even the premium users are getting affected and they do not worry about free users.

      Reply
      • If you have paid hosting service, then go to your root directory and delete the Weebly favicon if it is there and republish your site with your own favicon. It should work fine.

        Reply
        • Tried removing and re-placing it with html. Tried refreshing my page about 4 times in a row… didnt do the trick :(
          I pay for the hosting every year but use the free Weebly editor. not sure how to go to my root directory and delete the Weebly favicon???

          Reply
          • It depends on the hosting company, mostly you can look for the “File Manager” or similar option to go to the root directory and look for the files (or you can use FTP to connect to the root directory “/public_html”).
            At this moment, we can see your favicon in Firefox and not in Chrome, so wait for sometime.

    • The favicon image of yours is showing 404 not found error, check the image is accessible then it should appear in the browser.

      Reply
  13. I uploaded an image to http://www.sslpic.com/ and copied the link that was sent to my email address. I then inserted this into the code eg . I then copied this code into the SEO Header and published. It worked instantly. No need to make a special favicon page or upload an .ico.

    Reply
    • Any third party image hosting service will work for that matter if you have no concern on linking to their site.

      Reply
    • Your image size is 250×219 which is very large, use smaller image of size 16×16 or 32×32 for better clarity.
      Also use some bright color instead of grey.

      Reply
  14. This worked perfectly for me until today. Published my site and the Weebly favicon has reappeared. I’ve tried every possible method but nothing has worked. Anyone know why that might be?

    Reply
    • Looks it is no more possible to add favicon though upload is fine, the icon is not appearing and weebly icon only appears.

      Reply
      • Weebly did changes in the theme editor but the favicon is working fine, may be republish your site again and check.

        Reply
  15. I am trying to upload my favicon but it is not working.I think weebly has change their coding so you can not upload your own favicon.I am using the same code which you are giving us but for me it is not working.
    Can you please help me on this.Thanks

    Reply
    • Yes there are some changes in the theme editor, we changed the screenshots with the new editor. You can upload files under “Assets” and we checked the favicon is working fine. Please republish your site and check.

      Reply
  16. I am retracting my earlier comment. It turned out that, after waiting a few hours, my favicon showed up on my home page. It’s odd that it was displayed immediately on my other pages but now I’m a happy camper.

    Reply
    • One of the reason could be your browser’s cache (previously opened pages will show old favicon from cache and any newly opened page will show it properly) and took some time.
      Good to know it is fine now!!!

      Reply
      • Actually, I had continually cleared out my cache while making various changes to the html and again it produced favicons on the non-home pages immediately.

        Reply
  17. I have tried several variations of this and my result is always the same: my favicon shows up on every one of my pages EXCEPT my home page where I still see Weebly’s favicon. Any idea what I might be doing wrong?

    Thanks in advance,
    Larry

    Reply
  18. For some reason, the favicon URL will not show up and it will not work for me. I’ve tried to find the ico file by itself using the hyperlink, the host just says it cannot be found.

    Reply
  19. Really grateful for this! The title does say its free but It’s not working for me for some reason. In the settings tab, under favicon, is the ‘w’ of weebly with an upgrade button to the right. Is it still free? The default link of the image file (.ico) file works perfectly but not the ‘linking’ part.
    When checking the website, the ‘w’ shows up in the tab..tried refreshing and checking in different browsers.
    I am probably missing out on something..please help

    Reply
  20. I am just hosting and editing through weebly, I have my own domain. After I upload my favicon, I can’t find its hyperlink. If you could offer any assistance I would appreciate it.

    Reply
    • Refresh your page few times or wait sometime for your favicon to reflect in the browser. At any case uploaded icon file should be visible under your files section.

      Reply

Leave a Comment