Sunday, January 31, 2010

Creating A Favicon For Your Google Site


As I'm building my Google Site for www.chadkafka.com and also working on one for my church at www.underwoodchurch.org, I started to wonder how you get the little icon to appear before the web address. Through my Google searching, I came to find that this little icon is called a "Favicon." Here is how I made the Favicon for my Google Site.

CREATE YOUR ICON AND CONVERT
Create your Favicon. I used Photoshop and made a simple square image. I started with 300 pixels by 300 pixels. When finished, I resized the image to 16px by 16px. The finished image I saved as a .JPG file. I then used the Dynamic Drive website and uploaded my file there and clicked the CREATE ICON button. The file was converted to an .ICO file type and I was allowed to download it back to my computer as the file favicon.ico Once you have the file, you can then follow these steps to put it into your Google Site:
  1. Login to your Google Site
  2. Click the MORE ACTIONS button (top right of screen)
  3. Click MANAGE SITE
  4. Click on ATTACHMENTS (on left menu)
  5. If you see a favicon.ico file already there, click the checkbox for that file and then click the DELETE button at the top.
  6. Click UPLOAD button
  7. Click CHOOSE FILE button and browse to your customized favicon.ico file and click the UPLOAD ATTACHMENT TO / top level button
  8. Click RETURN TO SITE and refresh your browser and your Favicon should display!
Special thanks to stefan.apateanu in the Google Sites forum who provided some of the directions above.

3 comments:

  1. Hi Chad!

    Thanks for putting this tutorial together. I tried, and tried, and tried. And yes, I did succeed, however my favicon (even when I resized it to 16 x 16 appears EXTREMELY pixelated. I think it has something to do with the fact that I used a photograph. I may have to retry with a vector image.

    Thoughts???

    Thanks!

    ReplyDelete
  2. I originally tried a photograph as well and it did look very pixelated and hard to see. I then made my image using text in Photoshop and it turned out fine. I think for an image so small, we can't really see the photograph too well. Colors that compliment well would probably be good. Good luck!

    ReplyDelete
  3. Thank you for the easy to follow directions. I had a favicon on my site but it disappeared! I made a new one, followed the directions, and re-uploaded the favicon.ico file and it still doesn’t appear. I tried deleting the file and re-uploading it several times, nothing. I have tried various browsers with the same result. Any ideas? Thanks.

    ReplyDelete