Google homepage is one of the fastest loading search engine pages thanks to its minimalistic design but it can get a little monotonous sometimes and we can’t just wait around for Google to take action, we’ll do it ourselves. There are plenty of ways to customize the Google home page, you can tweak the page by using the inspect element and finding the relevant tags to replace (like the logo, background, etc) with something more personalized. Now that sounds too technical, doesn’t it? Chrome extensions build for this exact purpose get the job done at the expense of a mouse click. We’re going to show you how to customize Google homepage with your name in a few easy steps. Stylus is the best alternative to Stylish– a popular browser extension, that was recently found stealing user data. But don’t worry, unlike Stylish, Stylus claims they don’t find your user data to be all that interesting. And that’s not it, Stylus is available for Chrome, Opera, and Firefox, and lets you customize your Google homepage using the same method as discussed earlier. It automatically looks for the page build and finds those tags and replaces it with customized items. It does all the heavy lifting in the background and displays the result instantly. Read: 5 Best Google Extensions to Stop Video From Auto Playing
Customize Google Homepage With Your Name
Part-1
Open Chrome Browser or FireFox and in the search bar type ‘Stylus extension‘ and hit enter. Or you can use this direct download link to download the extension for Chrome and Firefox.
For this article, we’ll show you the steps on Google Chrome browser, however, the process should be the same for Firefox as well. Install Stylus in the Chrome and when it finishes, it’ll show as an icon on the top.
No, head over to google.com (or the local version of Google that you want to customize) and click on Stylus chrome extension on the top right side of the browser. You will see a pop-up. For this instance, choose custom styles for the web page by clicking on ‘Find styles‘
It automatically detects the web page and suggests pre-built styles for that webpage. Stylus supports installs from popular online repositories. In simple words, you can customize other people work so that you don’t have to build everything from the scratch.
You can choose any style that you like 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 stylus icon. you’ll see your newly installed skin on the top check the box and it’ll customize your webpage.
This was easy, right? Well, we’ve achieved the basic goal here and now you can find hundreds of different styles for most of the popular websites. This tutorial is not just to show you how to click a few buttons we’ll 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 discuss a few basic points for the next part. A website is written in HTML and CSS and if you have the basic knowledge of any programming language understanding the next part would a cakewalk, we’ll make it even easier and explain everything in layman’s terms. For Example, Google, on the homepage has a few objects like the Google logo, search bar, a search button and a few extra 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 is the logo in the CSS code of the page. When we find the logo we just replace it with our custom logo and it would display it on the homepage. But there’s a catch if you were to reload the webpage the custom logo would disappear and would be replaced with the original logo, because everytime you refresh the page the server sends the CSS code with the original logo and the browser loads that. To overcome this problem we’ll use the extension ‘Stylus‘ and make our own custom Google webpage with our own custom logo. First things first, this is going to be a very easy experiment and does not ruin your webpage or browser. Everything will go back to normal even if some things look skewed after you hit refresh. we’ll have to take care of the dimensions of the logo or it might not show up. Let’s begin.
Customize your webpage
First thing first, if you want to customize Google homepage with your name, you need to make a custom logo that looks like Google logo. There are many ways to do that, you can use Photoshop or any online image editing tool. For the sake of this tutorial, we will use the website festisite. It lets you make your own custom logo with Google’s font and color. All you have to do is type in your name and hit enter. It’ll give you a transparent png file for free.
Download the logo and upload it on any image hosting site and get a direct link. we’ll need this because we need uninterrupted access to the image at all times. we chose imgur and its direct link looks like this https://i.imgur.com/file.png, where ‘file’ is different for every image. Make sure it works by opening it in a new tab, if it works, half of the heavy lifting is done. Now comes the easy part. Go to Google homepage and select stylus you’ll see a skin there and an edit button. Click that.
It’ll open a new tab where you can edit the file for your own custom look of the webpage. Now we’ll find the image sources. Press ctrl+ F to open the find dialog box, type ‘background‘, you’ll see many background tags. The one followed with an URL of an image is our background image source. If you want to customize Google Chrome background, or if you want to change the Google Chrome theme with your own picture, you need to replace the background picture here. For this tutorial, I’ll just skip it.
Now, let’s look for the Google logo image source. ctrl+F and type ‘hplogo‘, the tag followed by an URL of an image is the logo source and we have to replace these files with our logo. You keep the size same for your custom logo, i.e. 272×92 px.
Once you have replaced the Google logo with your own custom logo, click on the save button in the left side of the screen to save the changes.
Now go to google and press stylus icon you’ll see the checkbox for the style you just edited. Ticking that would show you your custom google homepage.
And that’s it, if you now go back to google.com and refresh the page, you should see your name instead of Google logo. For this instance, 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. Although, do not that you’ll have to keep the extension, in order for this to work. If you disable or remove the extension, the changes we made just now, we’ll be gone as well.
Customize Google Homepage With Your Name
We showed you how to customize your web pages and make them look personalized and visually appealing. The first part of this tutorial was a segue to make you comfortable with HTML and CSS. The second part was to show you how to change the logo of Google’s Homepage to anything that you want. What are you going to change? Let’s know in the comments below. Read: Top Google Chrome Extensions for Privacy
