How to personalize the Google home page with your name and image

Google is the first thing most people open every time they surf the web, and like our office desks, we’d like something to personalize Google’s home page and make it more personal.

Google’s homepage is one of the fastest loading search engine pages thanks to its minimal design, but it can get a bit drab at times and we can’t wait for Google to act, we’ll do it ourselves.

There are many ways to customize the Google home page, you can modify the page using the inspection element and looking for the relevant tags to replace (like logo, background, etc.) with something more personalized. That sounds too technical, doesn’t it? Chrome extensions built for this exact purpose get the job done at the expense of a mouse click.

We’ll show you how to personalize the Google home page with your name in a few easy steps.

Stylus is the best alternative for Elegant– a popular browser extension, which was recently found stealing user data. But don’t worry, unlike Stylish, Stylus claims that they don’t find your user data that interesting.

And that’s not all, Stylus is available for Chrome, Opera, and Firefox, and it allows you to customize your Google home page using the same method that was discussed above. Automatically fetches the page build, finds those tags, and replaces them with custom elements. It does all the heavy lifting in the background and displays the result instantly.

Read: 5 Best Google Extensions To Prevent Video From Autoplaying

Personalize the Google home page with your name

Part 1

Opened Chrome or FireFox browser and in the search bar type ‘Pencil extension‘and hit enter. Or you can use this direct download link to download the extension for Chrome Y Firefox.

For this article, we will show you the steps in the Google Chrome browser, however the process should be the same for Firefox as well. 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 Stylus Chrome extension at the top right of the browser. You will see a pop-up window. In this case, choose custom styles for the web page by clicking ‘Find styles

Automatically detect the web page and suggest predesigned styles for that web page.

Stylus supports installations from popular online repositories. In simple words, you can customize other people’s work so you don’t have to build everything from scratch.

You can choose the style you want for the web page and install that style just by clicking it once, we went with Super Mario style.

Now go back to Google com and click on the pencil icon. You will see your newly installed skin at the top, check the box and you will customize your web page.

This was easy, right? Well, we have achieved the basic goal here and now you can find hundreds of different styles for most popular websites.

This tutorial is not just to show you how to click some buttons, we will show you how you can modify any page according to your needs and create a truly custom skin for a website.

Part 2

Let’s go over some basic points for the next part.

A website is written in HTML Y CSS And if you have the basic knowledge of any programming language, understanding the next part would be a piece of cake, we will make it even easier and explain everything to you in simple terms.

For example, Google, on the home page you have some objects like the Google logo, the search bar, a search button and some additional links. Pretty simple. Now let’s say we want to change the Google logo and replace it with our custom logo. To do this, we need to find where the logo is in the page’s CSS code. When we find the logo, we just replace it with our custom logo and it would display it on the home page.

But there is a problem if you reload the web page, the custom logo vanish and it would be replaced by the original logo, because every time you refresh the page, the server sends the CSS code with the original logo and the browser loads it.

To overcome this problem we will use the extension ‘Needle‘and create our own custom Google web page with our own custom logo.

First things first, this will be a very easy experiment and no ruin your web page or browser. Everything will go back to normal even if some things look skewed after hitting Refresh. We will have to take care of the dimensions of the logo or it may not appear.

Let’s start.

Customize your website

First things first, if you want to personalize the Google homepage with your name, you need to create a custom logo that looks like the Google logo. There are many ways to do it, you can use Photoshop or any online image editing tool. For the sake of this tutorial, we will use the website festivity. Allows you to create your own custom logo with Google font and color. All you have to do is type your name and hit enter. It will give you a free transparent png file.

Download the logo and upload it to any image hosting site and get a direct link. We will need it because we need uninterrupted access to the image at all times. We choose imgur and your direct link looks like this https://i.imgur.com/file.png, where ‘file’ is different for each image.

Make sure it works by opening it in a new tab, if it works, half the heavy lifting is done.

Now comes the easy part.

Go to the Google home page and select the pencil; you will see a mask there and a Edit button. Click on that.

It will open a new tab where you can edit the file for your own custom look of the web page.

Now we will find the image sources.

printing Ctrl + F to open the search dialog, type ‘background‘, you will see a lot of background labels The one that followed with a Url of an image is our background image fountain. If you want customize google chrome background, or if you want to 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 find the source of the Google logo image.

ctrl+F and writes ‘hplogo‘, the tag followed by an image url is the font of the logo and we have to replace these files with our logo. You stay with him The same size for your custom logo i.e 272 × 92 px.

Different themes have a different name for the logo and the background, the general rule is to search .png after pressing CTRL or CMD + F

Once you’ve replaced the Google logo with your own custom logo, click the Save button on the left side of the screen to save your changes.

Now go to google and press the pencil icon, you will see the cash register for the style you just edited. Checking that would show you your custom Google home page.

And that’s it, if you now go back to google.com and refresh the page, you should see your name instead of the Google logo. For this case, we decided to go with Bing (because why not) but you can add anything: your name, funny logo, anything. Your imagination is the only limitation.

However, you do not need to keep the extension for this to work. If you disable or remove the extension, the changes we made just now will also disappear.

Personalize the Google home page with your name

We show you how to personalize your web pages and make them look personalized and visually appealing. The first part of this tutorial was a transition to get comfortable with HTML and CSS. The second part was to show you how to change the Google homepage logo to anything you want.

What are you going to change? Let’s let you know in the comments below.

Read: Top Google Chrome Extensions for Privacy

Recommended For You

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *