Tenho um site responsivo que é muito utilizado no celular pelo clientes, sempre indicamos que o cliente usem o Google Chrome, pois ele oferece uma opção de criar um atalho do site no celular, só que ele cria o atalho e o ícone fica a letra inicial da tag , já vi que vários sites ficam com o ícone da tab do site, como eu faço para que o meu também fique com o ícone no atalho?
-
Você se refere ao favicon no topo do site ? Queres que quando salvar este link no celular ele apareça este icon é isso ?– Mike OtharanCommented 5/06/2018 às 20:53
-
Isso mesmo Mike, no meu caso ele fica com a letra D no ícone, e tem o favicon na pagina, inclusive olhei o fonte do facebook e de outros sites que tem pra ver se eu estava declarando certo e a principio estava igual, mas no meu não funciona– RafaCommented 5/06/2018 às 20:55
-
Use esse código em seu site <link rel="shortcut icon" href="caminhodoarquivo/favicon.ico" />– Mike OtharanCommented 5/06/2018 às 20:57
Adicione um comentário
|
1 Resposta
O que acontece é que cada sistema operacional trabalha com o Ícone de um jeito. Normalmente o que se vê é o Favicon ser transformado no ícone de atalho em dispositivos mobile.
O que eu te indico é usar um gerador de Favicon que também tenha o Manifesto JSON, e que gere ícones para todos os sistemas operacionais. Aqui tem um exemplo. de site desse tipo. Ele vai te dar um pack de imagens e script e vc vai indexar na sua página dentro do <head>
https://realfavicongenerator.net/
Exemplo de código para vc colocar os atalhos usando favicon, lembrando que esse código devem estar dentro da <head>
do documento e as imagens desse exemplo na raiz. OBS: as imagens serão geradas pelo mecanismo do site que citei como exemplo, mas existem outros...
<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">