How do I make my website change the google chrome icon?

I was surfing the internet and an advert came up about one of those fake you have a virus site please call this number and pay me money to fix it scams came up (it’s not a virus). When I pressed Alt + Tab I noticed that the website changed the google chrome icon and replaced it with its own icon.

How do I do that for my website?

It’s called a favicon. The easiest way is to just make a favicon.ico and save it at the root of your website and it will be picked up automatically. It needs to be at the root, because some browsers only look for it there.

If you want one for all devices and styles, then this site is pretty cool:

I’ve used favicons before. This website has a favicon. I’m sure that favicons don’t change the google chrome icon when you press Alt + Tab.

If you run your logo through that site it will generate all the app icons as well.

It’ll produce this:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<!-- you're probably seeing one of these -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<!--- ^ one of those -->
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Changed the Google Chrome icon - where? Are you saying something on this site changed your browser settings/appearance?

Never mind. I just went on the site and it was a bug in windows, and nothing to do with the website.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.