Adding a Favicon for your Google Site – 5 easy steps

I had previously made a post on how to add a Favicon to your website. In that post I linked back to a website that had directions for creating a favicon in a Google Site.  Apparently that post no longer exists so I thought I would make the directions myself.

A favicon is the icon you see in the tab of your web browser. You can see in the below screenshot that I have 3 tabs open.  The gmail logo is visible in the first tab, that icon is a favicon.  In the 2nd tab you will notice the favicon for Google Sites.

The reason to change the favicon on your Google Site is it makes it easier for you and students to navigate multiple tabs. In browsers such as Chrome and FireFox the favicon is visible right on the tab.  If your classroom website is a Google Site and you post your daily lessons and directions on the site then the students will need to keep your site up and travel back to it frequently.  By having a clearly identifiable class logo or icon in the tab the students are able to quickly locate the tab with your class information.

Step 1: Create an image
You can use any editor you want. You can use Google Draw to create a logo and then download it as JPEG image. You can use Photoshop or Illustrator. There are many other online webtools such as pixlr that will allow you to edit images or create your own. You can also use Apple Keynote to design a picture and then take a screenshot (command+shift+4) to grab your creation

Step 2: Go to http://favicon.cc
You will want to upload your image to a favicon creator.

No need to register or login.  Simply click on the “Import Image” button.


Click on “Choose File” and upload your image file.  Click on the “Upload” button.


Once you’ve uploaded the file scroll down a little to the preview box.  Click on the “Download Favicon” button.

 NOTE: It is very important that your favicon file is named favicon.ico
If you downloaded more than one favicon file you might have favicon(1).ico or similar file names in your downloads folder. You will need to exactly rename your final version to favicon.ico.

Step 3: Click on the blue share button on your Google Site

Step 4: Click on “Attachments” on the left hand side

Step 5: Click on the upload button and upload your favicon.ico file

That is it! If you uploaded a file exactly named “favicon.ico” then that image file should now be appearing on the tab of Google Site.

This entry was posted in Google, Sites and tagged , , . Bookmark the permalink.


14 Responses to Adding a Favicon for your Google Site – 5 easy steps

  1. Pingback: Add a Favicon to your Google Site | Teacher Tech

  2. Pingback: Mr G's Idle Musings » Blog Archive » My Diigo 01/30/2013

  3. Pingback: Adding a Favicon for your Google Site | Teacher Tech | New Web 2.0 tools for education | Scoop.it

  4. Pingback: Google Apps | Pearltrees

  5. Pingback: Update: Diigo in Education group (weekly) | ChalkTech

  6. Pingback: Adding a Favicon for your Google Site | Teacher Tech | Teaching with web 2.0 tools | Scoop.it

  7. Pingback: Google | Pearltrees

  8. Pingback: Adding a Favicon for your Google Site | Teacher Tech | Google for Class | Scoop.it

  9. Pingback: Adding a Favicon for your Google Site | Teacher Tech | ICT Teaching and Learning | Scoop.it

  10. Gwendolyn Holden says:

    Thank you! The part about having the name be EXACTLY favicon.ico made it finally work for me. I’d been working on it for quite a while before I clicked on your suggestion!

  11. thanks! it was so easy!

  12. Marilyn says:

    Works like a charm! Thank you!

  13. I used exactly what you describe to get a favicon but can Google Sites support an animated favicon? I uploaded one but it is not animated on the tab, only when you view it.

  14. Great, easy directions – thanks. Any tips on how to get this to work on Blogger? Can’t seem to get rid of the orange B icon.

Leave a Reply