Adding Your Logo and Site Icon in Google Sites

Learning Objectives

• Upload and position a logo on your Google Site
• Set and customise a site icon effectively
• Understand the importance of high-quality images for brand presence

Introduction

Your logo and site icon are the first things visitors notice about your Google Site. These visual elements build trust, improve recognition, and make your site look professional. In this chapter, you'll learn how to add both elements to your Google Site and ensure they display properly across all devices.

Lessons

Adding Your Site Logo

Your logo represents your brand and should be prominently displayed on your site. Here's how to add it:

Step 1: Open your Google Sites editor and click "Insert" in the top menu.

Step 2: Select "Image" from the dropdown menu.

Step 3: Choose "Upload" and select your logo file from your computer.

Step 4: Once uploaded, click on the logo image to resize it. Drag the corner handles to maintain proportions.

Step 5: Position your logo by dragging it to the desired location on your page.

Getting the best results: Use a high-resolution image at least 800 pixels wide. This ensures your logo stays crisp when visitors zoom in or view your site on high-resolution screens.

Setting Your Site Icon

Your site icon (favicon) appears in browser tabs and bookmarks. It's like a tiny business card for your website.

Step 1: Click "Theme" in the top menu of your Google Sites editor.

Step 2: Select "Site favicon" from the theme options.

Step 3: Click "Upload" and choose your icon file from your computer.

Step 4: Adjust the cropping area if needed to ensure the most important part of your icon is visible.

Step 5: Click "Apply" to save your changes.

Getting the best results: Keep your favicon simple and bold. Complex designs become unclear at small sizes. Square images work best since favicons are typically displayed as squares.

Checking Display Across Devices

Your logo and icon need to look good on phones, tablets, and desktop computers.

Step 1: Click the "Preview" button in your Google Sites editor.

Step 2: Use the device preview options to see how your logo appears on different screen sizes.

Step 3: If your logo looks too large or small on certain devices, return to the editor and adjust the size.

Step 4: Test your favicon by opening your published site in a new browser tab to see how it appears.

This is the bit most people miss: Always check your logo placement on mobile devices. What looks perfect on desktop might be too large or poorly positioned on a phone screen.

Practice

Upload a logo and favicon to your Google Site, then preview your site on at least three different device sizes using the preview feature. Make notes about any adjustments needed for optimal display across all devices.

FAQs

How do I upload a logo on Google Sites?
Click "Insert" in the top menu, select "Image," upload your logo file, then resize and position it as needed.

What size should my logo be for Google Sites?
Use a high-resolution image at least 800 pixels wide to ensure quality across all screen sizes and zoom levels.

Can I customise the site icon on Google Sites?
Yes, click "Theme" in the top menu, select "Site favicon," and upload your custom icon file.

Why doesn't my favicon appear immediately?
Browsers cache favicons, so changes might take a few minutes to appear. Try refreshing your browser or clearing your cache.

What file formats work for logos and favicons?
Google Sites accepts PNG, JPG, and GIF files. PNG works best for logos with transparent backgrounds.

Jargon Buster

Site Logo – A graphic symbol representing your business or organisation, displayed prominently on your website for branding purposes.

Site Icon (Favicon) – A small image that appears in browser tabs and bookmarks, helping users quickly identify your website.

Responsive Design – A design approach ensuring your website adjusts properly to different screen sizes and devices.

High-Resolution Image – An image with enough pixels to remain sharp and clear when displayed on various devices and zoom levels.

Wrap-up

Adding a logo and site icon transforms your Google Site from generic to professional. These elements help visitors recognise and remember your site while building trust in your brand. Remember to test how they appear on different devices and keep your images high-quality for the best results.

Ready to take your Google Sites skills further? Join our community of learners at https://www.pixelhaze.academy/membership for more detailed tutorials and expert guidance.