CODEWITHSUNDEEP
csshtml
Niks
Niks

Reputation: 95

What is this thumbnail icon on mobile chrome and how to use it in my website

I don't know what this icon is called and how to use it for my website. Can someone help me out.

Thumbnail icon on mobile chrome.

Upvotes: 1

Views: 755

Answers (2)

Ptrckk
Ptrckk

Reputation: 66

It's called favicon. Somewhere you should have a code like this:

<link rel="icon" type="image/png" href="/favicon.png" />

Follow the href to the location. You can find it in your header somewhere.

Upvotes: 0

Juan Ferreras
Juan Ferreras

Reputation: 2861

That'd be one of the favicons you need to set on your page. If you use an automatic tool like https://realfavicongenerator.net you will be able to easily cover all the required different files using a single image.

The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following tags:

<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Source: https://developer.chrome.com/multidevice/android/installtohomescreen#icon

Chrome uses the same icon as the favicon, bookmark icon and “Add to home screen” icon. It picks the widest PNG icon it can find which is no larger than 192×192.

Source: https://realfavicongenerator.net/blog/android-chrome-and-its-favicon/

Upvotes: 1

Related Questions