Google to replace Chrome's HTTPS lock icon in September
Google has announced that it will replace the HTTPS lock icon in Chrome. It wants to bring a new icon as part of its redesign that is set to arrive in September.
Why is the HTTPS lock icon so important?
As you may know, an HTTPS connection ensures that the channel is secure, i.e. the browser's connection to a web page cannot be eavesdropped upon by hackers. An HTTP page on the other hand is generally unsafe as it could be redirected to malicious web pages. The HTTPS protocol is widely employed by websites, Google says over 95% of page loads on Windows are over HTTPS channels. The Silicon Valley mogul had pushed the use of HTTPS widely, and had warned websites that it would rank non-HTTPS sites lower in search results, which helped the adoption of the protocol.
There are a couple of ways to tell when a connection to a website is secure. One is to check the prefix of a URL, if it starts with HTTPS or not. A simpler way is to look at the lock icon next to the address bar, if it shows a padlock the connection is using a secure channel. Some modern browsers have a dedicated site details button sort of like a shield icon, clicking on which provides more details about the connection to a website, but that's a different story.
Why is Google replacing the HTTPS icon?
So, if the HTTPS icon is useful, why does Google want to replace it? The Mountain View company says that the icon is a remnant of the past, where HTTPS was not commonly deployed by websites. Google says that the HTTPS lock icon is often misunderstood as representing a website's trustworthiness. A study conducted by the search giant in 2021 revealed that just 11% of participants in the research had actually understood what the lock icon meant.
In other words, people assumed that a website was safe to use because it had an HTTPS connection. The company reveals that it is far from the truth and that even hackers are using it, nearly all phishing sites use HTTPS. This will of course display the lock icon, which is exactly the landmine that it wants to sidestep. Even the FBI published a paper where it advised users that the HTTPS lock icon is not a safety sign.
Google began experimenting with the HTTPS icon in 2021, when it replaced it with an arrow button. The experiment was apparently successful and didn't cause any confusion among users. Here's what it looked like.
But, the company decided to go with a different style.
What is the new icon in Chrome?
The new HTTPS button is a tune icon that has been redesigned slightly. Google says that the new button is a neutral indicator that will avoid the confusion and security risks that were caused by the lock icon.
How will this help users? Functionally, the buttons are the same. But the company says that the tune icon does not imply that a website is trustworthy. The aesthetics are quite similar to settings in other apps, which will help users understand that it is clickable. This will in turn engage user interaction, so they may click on it to check the site details, and permissions. Google says the new icon will launch with the redesigned interface in Chrome 117, which is scheduled to be released in September 2023.
If you want to see what the new HTTPS icon looks like and experiment with it, you can install Chrome Canary, by testing the 2023 redesign. You can find the steps for enabling it in Martin's article.
On a sidenote, Google Chrome for iOS has been updated to version 113. It now lets you translate text by selection.
Changing an icon is not going to cure ignorance. In fact, it’s going to advance it.
Stop attempting to fix what is not broken. I’m sick of these absurd adjustments to the interface. So, what will I tell end users I support over the phone now? Click the button that looks like two individuals in a 69 position?
Google and the FBI are more and more becoming a remnant of the past.
Talk about save than Google and the FBI both represent the complete opposite of that.
Here on Firefox,
1- Full urls, always
2- No url security icon, instead a yellow urlbar background when the connection is secured (https) which is practically always the case (i.e. 3724 bookmarks out of 3800 are https here).
Concerning Google’s move : Wow, cough, sigh, yawn.
Tom, as a firefox user – do you know how to get rid of the “site information” icon which occupies the same space at the address bar that chrome’s shield does in chrome. It’s on my list of edits to make to the userchrome.css, but seems like not an easy one.
Because that is essentially the “url security icon” – you claim that you don’t have it in Firefox, how did you manage this? Thanks in advance!
@basingstoke
I believe what you are referring concerns Firefox’s Identity Box.
Hereafter is included in my userChrome.css file.
I wrote this some time ago (FF versions 70…) and still does it here, but maybe does it handle more than the only “Site Information” icon you indicate.
There’s so much, at least I tweak so much the interface that when modifications continue to work I happen to forget what does what, lol!
Best is to try, fine tune if it’s overdoing, please let me know if it misses what you aim :
/* ######################################################################### */
/* IDENTITY BOX */
/* ######################################################################### */
/* IDENTITY BOX : HIDE LABELS */
#identity-icon-label, #identity-icon-labels, #identity-icon-country-label, #identity-icon-box, #identity-permission-box {display:none !important;}
#identity-box {padding-inline-end: 0px !important; margin-inline-end: 0px !important; border-inline-end: 0px !important;}
/* ——————————————————————————————————– */
/* IDENTITYBOX : HIDE PADLOCK */
#nav-bar #identity-icon {display:none !important;}
/* ——————————————————————————————————– */
/* IDENTITYBOX : HIDE “ENHANCED TRACKING PROTECTION” BUTTON */
#nav-bar #tracking-protection-icon-box {visibility: collapse !important;}
#nav-bar #tracking-protection-icon-container {display: none !important;}
/* ——————————————————————————————————– */
/* IDENTITYBOX : REPOSITION “ENHANCED TRACKING PROTECTION” BUTTON */
#nav-bar #tracking-protection-icon-container {margin-right: 1px !important; margin-left: -5px !important;}
#nav-bar #tracking-protection-icon-container {padding-bottom: 2px !important;}
/* ——————————————————————————————————– */
OMG… Thanks!
I won’t be able to try this until this evening when I get back home, but it looks like it’ll do the trick. Definitely might be more in there than needed – I already use a little bit of css to hide the “enhanced tracking protection” shield, so might just need the “hide labels” and/or “hide padlock”. But that’s the fun part of userchrome.css, put the code in, and test/amend until it does what you want and nothing further.
Thanks!
@basingstoke, I had quickly copy/pasted : indeed the ‘ENHANCED TRACKING PROTECTION” BUTTON’ sections shouldn’t apply : I don’t use Firefox’s ETP which is why I included it in the list : not to be hidden of course otherwise.
For sure userChrome.css and userContent.css can be quite performant.
Be noted that I found most of these tweaks on two Firefox dedicated sub-Reddits :
1- Firefox (globally) : [https://teddit.pussthecat.org/r/firefox/]
2- Firefox – CSS : [https://teddit.pussthecat.org/r/FirefoxCSS/]
Hope you fine tune that Urlbar to your likes!
Tom,
I’ve had a chance to test this – here’s what I can say: Thanks!
“IDENTITYBOX : HIDE PADLOCK” this section got rid of the icon for “site information”, but actually there was still a little box secretly there which could be pressed.
“IDENTITY BOX : HIDE LABELS” seems to target a lot of things, but it does get rid of the little left-over box, completely removing the element I was looking to rid myself of.
I will say, the URL begins very close to the edge of the url-bar now, and when you have the flashing “type here” line it’s practiclly touching the border of the box – perhaps I can add a pixel or two of padding somehow, just for my own sanity reasons.
Ah, so many things still to tweak – I am still proud of using 1) Resource Hacker and 2) omni.ja archive, to completely replace all new firefox icons inside-and-out with older, prettier and more detailed icons… but almsot every day I see something that blows my mind. Check this out, Tom:
https://www.reddit.com/r/FirefoxCSS/comments/1362fwi/internet_explorer_theme_for_firefox_111/
The aero glass doesn’t cover enough “area” due to the design being made for W10 and not W7, but could be made perfect with some tweaks – makes me want to throw out all my css and just install it! …But I won’t, just yet.
@basingstoke,
> I will say, the URL begins very close to the edge of the url-bar now, and when you have the flashing “type here” line it’s practically touching the border of the box – perhaps I can add a pixel or two of padding somehow, just for my own sanity reasons.
In that regard this is what i use :
/* URLBAR – RIGHT-LEFT PADDING HANDLES SPÄCE BETWEEN RIGHT/LEFT BORDER AND URL TEXT */
#urlbar-input-container {padding-right: 4px !important; padding-left: 7px !important;}
Digging into Firefox’s omni.jars provides a haven of information, so true! They open as zip files and I often dig into them (especially the one in the ‘browser’ sub-folder) to try to spot anything I’d miss …
I also should have evoked : Custom CSS for Firefox [https://github.com/Aris-t2/CustomCSSforFx] which can be installed as a whole or serve as a source of several CSSs : really worth it.
I had mentioned Firefox at Reddit but I see you know all that already. The post ‘Internet Explorer theme for Firefox 111’ is out of my scope given I have no experience in the Firefox-Win10/11 relationship :=) No similar issue here with Win7.
I have 112KB of userChrome.css settings so if there’s one you’re missing I can always have a look in the store to see “what’s available” here :=)
Read you later. Have a nice week-end!
It could be a good idea that @Tom Hawack writes here at Ghacks some articles about tricks and the several help he provides to us, at the section about Firefox. :]
My vote is up! +1
@Tom Hawack, also Edge provides full urls, always too. I wonder when it will don’t show them anymore.
Uglynew icon ever. Turn back full url!
@John G.
I can set full URLs under brave://settings/appearance.
@Iron Heart, I have installed again the Brave browser two days ago and it’s quite good with tons of good features. I am giving it an opportunity for official government sites due its privacy and the increased security that it offers. :]
Here’s a novel idea, make the “https://”, wait for it… “https://”.
Google seems to be going to great pains to do just about anything they can other than show the full URL with its protocol written out. Yet, showing full URLs is actually the best way to educate and inform users about the sites they are visiting and what things mean.
They could make the https:// part of the URL clickable, sending users to a page that shows the certificate, it’s issuers, and issue dates, with a link at the bottom to some sort of explainer article about what https:// is. If they did this in one click, it’d get to that information one click faster than Chromium based browsers currently do (The certificate details are the click after the click on the lock icon, not the first click on the lock icon).
I realize that you can probably still choose an option to display full URLs on Chrome for desktop (Don’t know for sure, don’t use it) and, if you can’t, that there are lots of alternatives available like Vivaldi and Firefox that will still let you do that.
The situation on mobile is much more dire, though. Iceraven is probably the only browser that’ll even give you the option to show a full URL on Android these days.
Really, full URLs should be the default for all browsers on all platforms. This crap about what icon to show ignores the common sense option of just showing the users the freaking URL. I don’t see the logic in saying that full URLs are too complicated for casual users to understand, but ever-changing hieroglyphics are supposed to be easy for casual users to understand.