• open panel

How to Add Favicon to Your Weebly Site

 

You can add favicon to your weebly site whether you have a pro account or a free account. Adding favicon to a pro account is very straight forward. In Settings –>General Settings, there is a field specifically for favion.

Favicon upload for pro users

Pro users can upload logos for favicons

Click upload to upload any image or logo you would like to use as favicon. Weebly will convert it to the right size (16×16) for you. That is it for pro.

For a free weebly account, adding a favicon is done by manually uploading the file through Edit HTML/CSS. Here is how we did for the free weebly site http://kanatahomes.weebly.com. Before that you have to convert your image or logo to 16×16 size that can be used as favicon image. Go to convertico.com which can do this for you for free. Save the file as png or jpg. Do not save it as ico. Upload this file through Design –> Edit HTML/CSS –> Files.

Add favicon for free weebly account

Add favicon to free weebly site: Design -> Edit HTML/CSS -> Files

Uplaod favicon 16x16 image file

Upload your 16×16 resized image to files and select the uploaded 16×16 file.

Upload the file and select the uploaded file as shown above. For KanataHomes, our favicon file is KanataHomesLogo16x16.png. The link to our 16×16 image in case of KanataHomes is “http://kanatahomes.weebly.com/files/theme/KanataHomesLogo16x16.png”. The same image can also be referenced through weebly.com/uploads/……..etc.

Now “Save & Exit” the Upload files section. Go to ‘Settings’ and ‘Search Engine Optimization’ portion.

In the Header Code, add 

<link rel="shortcut icon" href="your-16x16-image-link-goes-here"/>

Check the example. Replace your-copied-link-goes-here with the link you copied. Save changes and publish your site. Refresh your web site in browser a few times for the favicon to show up.

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

35 Responses to “How to Add Favicon to Your Weebly Site”

  1. Didn't find any link 'FILES' after I go to Edit HTML/CSS> Please help.

     
    • Vishal
    • Reply
    • In "Edit HTML/CSS" view, you will see a column on the left with three categories "CSS, Page Types, Files". Click the 'Add Files' and upload your img. Once the file is uploaded, you will see your image in the list of files. Click on the image file you uploaded. The image preview opens in right window. Now right click on the image and select open in new tab. Get the URL. You can also post your image any where like in Picasa, Flickr etc and use that link if that is more easy for you.

       
      • Raju Nunna
      • Raju Nunna
    • Worked perfectly, thank you!!

       
  2. I followed the instructions but the favicon doesn't show up for me.

     
    • Jane Smith
    • Reply
    • If you have done every thing right, try to refresh your site a few times. If you have done every thing right, it should work. What is your site ? What is the link to your favicon image ? Make sure it is resized to 16×16 px.

       
      • Raju Nunna
      • Raju Nunna
  3. I've followed all the instructions. Resized it to 16X16. Refreshed about a dozen times but still it didnt show up.

     
    • Taohid, can you please post in the forums ? That will give you the opportunity to have back and forth discussion specific to your situation.

       
      • Raju Nunna
      • Raju Nunna
  4. Hey im wonderin if i can ask about moving/animated Favicons?

     
  5. Hi Jane Smith, Taohid. I think Raju Nunna already provided the perfect steps to make it work. And its very easy (I, my self not a designer, but I can say it very easy). Please visit our site: http://www.stealthprojects.us.tc – If you already visit our site, tell us what you think and guess we build this site with Free or Premium account? Good luck for your site, and Weebly “THANK YOU, YOU’RE AWESOME!” :)

     
    • I tried visiting your site but it says “Site not published” and it flashed out a 404 notification too :)

       
      • Prodyot
  6. umm, i tried to do it, but what do you mean by “link?” there are no links as far as I see ._.

     
    • Jazmin
    • Reply
  7. Thanks!!!! Great post, worked right away!

     
    • JXL
    • Reply
  8. Really good tut, cant fault it. It Worked right away!

     
  9. for the people who are having trouble. Right click the image and go to properties and it list the URL

     
    • Alex
    • Reply
  10. The tute is a bit complicated as to link of favicon so it was very helpful to have a bit more explanation. Many thanks commenters although it doesn’t show up for me either but I’m hoping time will tell.

    And actually, in the last picture the author has forgotten to close the tags in the Header Code.

     
    • me
    • Reply
    • Two things: Clear the cache and refresh the browser a couple of time. Make sure you use straight quotes.

       
      • Raju Nunna
      • Raju Nunna
  11. It worked immediately, without even refreshing the page… thanks a lot!

     
  12. Thanks Raju Nunna, worked right away with your added instructions. thanks!

     
  13. Hi Raju,

    My Weebly site favicon is not showing up on my YouTube channel. Any ideas? – Thanks, Kirk

    Site: http://www.SEOSlammer.com
    YouTube: http://www.youtube.com/SEOSlammer

    Here’s what’s in my header code of site settings at 16 x 16:
    <link rel=”shortcut icon” href=”http://seoslammer.com/files/theme/favicon.ico”

     
    • organic
    • Reply
    • YouTube Channel will show YouTube’s favicon, because it is a YouTube site.

      Not sure if YouTube has given any special provision to associate your own favicon with the channel.

      It has nothing to do with the favicon for your site. Favicon for youtube.com is different from favicon for seoslammer.com

       
      • Raju Nunna
      • Raju Nunna
  14. Thank you Raju Nunna. It worked on my website:
    http://www.iworshipthegardener.com
    May God bless you.

     
    • adamdomingomgl
    • Reply
  15. Hey Raju,

    I got the favicon to work using your steps here without using convertico.com, but my icon is not transparent. The white background is showing. I used the following coding:

    Is there anyway to get it so the white behind my icon to not show?

    Thanks a bunch!

     
  16. Hi,
    Just wondering if anyone else has had issues with a favicon not showing up on a free Weebly site w/ IE as the browser. I added my favicon following these instructions, and it does show up in Chrome and a couple of other browsers, but not IE 7 or 8.

    Is there a work-around for this? I can see other sites’ favicon just fine, so I’m wondering if it has something to do with the way IE is looking for it when it’s added to SEO Optimization-?

    Thanks!
    Sandra

     
    • Hey Sandra,

      I have the same issue. Like you say, it must be the way IE is looking for the favicon.

       
      • Nate
  17. Thnx Really orked Like A charm!!!!

     
  18. Dear Sir,
    I am Using Weebly For Running My Blog…. & I am Continusly
    Changing My Blog….and From Your Forums I changed So Many Thing….

    Finally I need Two Thing More….

    1st- I Need Favicon In Weebly Free Account
    2nd- Can You Plz. Tell Me How I will Add Most Popular Post In My Weebly Blog….

    I am Waiting For Your Reply… Plz.. Help Me For That
    thanks
    pankaj

     
    • pankajmonika
    • Reply
  19. This is AMAZING!!!! Why didnt I find this before?!?! I have been trying and trying to get a favicon for my website, and could never do it. These are straight forward, simple instructions, that worked first time! Thank you so much :)

     
  20. Thanks for this help, but as I’m publishing my site to a domain name not hosted by weebly(www.pianosax.ie), how can I find the path for my favicon file so I can link it in the [Settings - header code:] section?
    Thanks!

     
    • i am also wondering the same. it works on my weebly site, but not on my forwarded own domain site.

      Same as Paul (above)
      Does anyone know how to get around this? Thanks!

       
      • andrea
    • What is your forwarded site ? And the previous site ? Also, what was the location of favicon ?

       
      • Raju Nunna
      • Raju Nunna
  21. hello!

    i put this in SEO header area in settings:

    -as i was following instructions – but you have the exact location of the icon file at weebly.com with all the numbers and then what i put in above–

    how do i find the location for this themes icon file like you did in your seo window in great tutorial?

    thanks again my friend !

     
    • zeebly
    • roy
    • Reply
  22. spot on very easy to understand except the file location is different on my weebly it is:

     
    • manateevoyager
    • Reply
  23. This worked perfectly for me. Thank you. :D

     
  24. Thank You ! The favicon was visible in my weebly but , how to make it rounded as yours ? I had edited in round shape and save as PNG file , that image I use in my blog and it works and being round shape . But why in my weebly can’t works ? but yours ?

     
  25. worked, thanks :)
    btw cool web for icons: http://www.iconfinder.com

     
    • Smithyy
    • Reply

Leave a Comment

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: