Teacher Tech blog with Alice Keeler

Paperless Is Not a Pedagogy

Alice Keeler

Adding a Favicon for your Google Site – 5 easy steps

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 and also suggested about a more affordable web design agency that will be able to help you to design the best site for your company.  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.

8 thoughts on “Adding a Favicon for your Google Site – 5 easy steps

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

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2024 All Rights Reserved.

💥 FREE OTIS WORKSHOP

Join Alice Keeler, Thursday Mar 28th or register to gain access to the recording.
Create a free OTIS account.

Join Alice Keeler for this session for a way to create dynamic and interactive digital lessons. The Desmos platform is completely free and allows for any topic to be created or customized.

Exit this pop up by pressing escape or clicking anywhere off the pop up.