1

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?

3
  • Você se refere ao favicon no topo do site ? Queres que quando salvar este link no celular ele apareça este icon é isso ? Commented 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
    – Rafa
    Commented 5/06/2018 às 20:55
  • Use esse código em seu site <link rel="shortcut icon" href="caminhodoarquivo/favicon.ico" /> Commented 5/06/2018 às 20:57

1 Resposta 1

5

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">
2
  • Perfeito!!! Muito obrigado hugocsl.
    – Rafa
    Commented 6/06/2018 às 11:19
  • @Rafa tmj boa sorte ai no projeto
    – hugocsl
    Commented 6/06/2018 às 11:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .