How to Customize Google Homepage With Your Name and Picture.
Google is the first thing most people open every time they browse the internet, and just like our office desks, we need something to customize the Google home page and make it more personal.
Google Home is one of the fastest loading search engine pages due to its minimalist design, but it can be a little monotonous at times and we can’t just wait for Google to take action, we’ll do it ourselves.
There are many ways to customize your Google home page. You can customize the page by using the inspect element and by finding the appropriate tags to replace (like logo, background, etc.) with something more personalized. It sounds too technical, doesn’t it? Chrome extensions, built for this very purpose, do their job with the click of a mouse.
We’re going to show you how to customize the Google homepage with your name in a few simple steps.
Stylus is the best alternative to the popular Stylish browser extension that was recently spotted stealing user data. But don’t worry, unlike Stylish, Stylus claims your user data isn’t all that interesting.
And that’s not all, Stylus is available for Chrome, Opera and Firefox and allows you to customize the Google home page in the same way as described earlier. It automatically searches for the page assembly, finds these tags, and replaces them with custom elements. It does all the hard work in the background and displays the result instantly.
Read: 5 best Google extensions to stop automatic video playback
Personalize Google Home Page with your name
Part 1
Open your Chrome or FireFox browser, type “Stylus extension” in the search bar and press Enter. Or you can use this direct download link to download the extension for Chrome and Firefox.
In this article, we will show you the steps in the Google Chrome browser, however, the process should be the same for Firefox. Install Stylus in Chrome and when done it will show up as an icon at the top.
No, go to google.com (or the local version of Google you want to customize) and click on the Chrome Stylus extension in the upper right corner of your browser. You will see a pop-up window. In this case, select your own styles for the web page by clicking Find Styles.
It automatically detects a web page and offers pre-made styles for that web page.
Stylus supports installation from popular online repositories. Simply put, you can customize other people’s work so that you don’t have to build everything from scratch.
You can choose any style for the web page and install it by simply clicking it once, we chose the Super Mario style.
Now go back to google.com and click on the stylus icon. You will see the newly installed skin at the top, check the box and it will customize your webpage.
It was easy, right? So, we have reached our main goal, and now you can find hundreds of different styles for the most popular websites.
Not only is this guide to show you how to click a few buttons, we are going to show you how you can change any page to suit your needs and create a truly personalized website skin.
Part 2
Let’s discuss a few highlights for the next part.
The website is written in HTML and CSS, and if you have a basic knowledge of any programming language and if you understand that the next part will be an easy walk, we will make it even easier and explain everything in simple language.
For example, Google has several objects on its home page, such as the Google logo, search bar, search button, and a few additional links. Pretty simple. Now, let’s say we want to change the Google logo and replace it with our own logo. To do this, we need to find the logo in the page’s CSS code. When we find a logo, we simply replace it with our own logo and it appears on the home page.
But there is one catch, if you reload the webpage, the custom logo will disappear and be replaced with the original logo, because every time you refresh the page, the server sends the CSS with the original logo and the browser downloads it.
To solve this problem, we will use the “Stylus” extension and create our own Google web page with our own logo.
First of all, this will be a very simple experiment that won’t mess up your web page or browser. Everything will return to normal, even if some things look garbled after clicking the Refresh button. we need to take care of the size of the logo, otherwise it may not display.
Let’s start.
Personalize your web page
First thing if you want to customize the Google homepage with your name, you need to create your own logo that looks like the Google logo. There are many ways to do this, you can use Photoshop or any online image editing tool. For this tutorial we will be using the festisite site. It allows you to create your own logo using google font and color. All you have to do is enter your name and press Enter. It will provide you with transparent png file for free.
Download the logo and upload it to any image hosting site and get a direct link. we need this because we need continuous access to the image at any time. we chose imgur, and its direct link looks like this: https://i.imgur.com/file.png where the “file†is different for each image.
Make sure it works by opening it in a new tab, if it works half the hard work is done.
Now for the simplest part.
Go to the Google homepage and select the stylus, there you will see a skin and an edit button. Click this.
A new tab will open where you can edit the file for your own appearance of the web page.
Now let’s find the sources of the images.
Press ctrl + F to open the search dialog box, enter background, you will see a lot of background tags. The one followed by the image url is our background image source. If you want to customize the Google Chrome background or change the Google Chrome theme with your own image, you need to replace the background image here. For this tutorial, I’ll just skip it.
Now let’s search for the source of the Google logo image.
ctrl + F and type “hplogo”, the tag followed by the image url is the source of the logo and we have to replace those files with our logo. You keep the same size for your own logo, which is 272×92 pixels.
Different themes have different names for the logo and background, the general rule is to look for .png after pressing CTRL or CMD + F
Once you have replaced the Google logo with your own, click the Save button on the left side of the screen to save your changes.
Now go to Google and click on the stylus icon. You will see a checkbox for the style you just edited. When you select this option, you will see your personalized Google home page.
That’s all. If you now go back to google.com and refresh the page, you will see your name instead of the Google logo. In this case, we decided to use Bing (why not), but you can add whatever you want – your name, a funny logo, whatever. Your imagination is the only limitation.
Don’t forget, though, that the extension must be left in order for it to work. If you disable or uninstall an extension, the changes we just made will also disappear.
Personalize Google Home Page with your name
We showed you how to customize your web pages and make them personalized and attractive. The first part of this tutorial was a follow-up to get you familiar with HTML and CSS. The second part was to show you how to change the Google homepage logo to whatever.
What are you going to change? Let us know in the comments below.