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.




Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

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

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

  1. 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 :)

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

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

    • 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

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

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

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

  6. 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 :)

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

  8. 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 !

  9. 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 ?