Site icon in Shortcut when adding site to mobile screen on Chrome has Android option

Asked

Viewed 1,830 times

1

I have a responsive site that is widely used on mobile by customers, always indicate that the customer use Google Chrome, because it offers an option to create a site shortcut on mobile, only it creates the shortcut and the icon is the initial letter of the tag , I’ve seen that several sites have the tab icon of the site, as I do so mine also has the icon in the shortcut?

html css web-application

  • Do you refer to the favicon at the top of the site ? Do you want when you save this link to the phone it appears this icon is it ?

  • That’s right Mike, in my case he gets the letter D on the icon, and has the favicon on the page, including I looked at the source of facebook and other sites that have to see if I was stating right and at first it was the same, but in mine does not work

  • Use this code on your website <link rel="shortcut icon" href="pathfile/favicon.ico" />

1 answer

5


What happens is that each operating system works with the Icon in one way. Usually what you see is Favicon being turned into the shortcut icon on mobile devices.

What I tell you is to use a Favicon generator that also has the JSON Manifest, and generates icons for all operating systems. Here is an example. of this type of site. It will give you a pack of images and script and vc will index on your page inside the <head> https://realfavicongenerator.net/

Example code for you to put the shortcuts using favicon, remembering that this code must be inside the <head> document and the images of this example at the root. OBS: the images will be generated by the mechanism of the site I mentioned as an example, but there are other...

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

  • Perfect!!! Thank you hugocsl.

  • @Rafa tmj good luck there on the project

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.