3

Olá, estou com a seguinte dúvida, tenho meu site, totalmente responsivo, e para alguns de nossos clientes, nós colocamos um atalho do site no celular, pelo Google Chrome. O atalho funciona mas fica um ícone totalmente aleatório em relação ao meu site.

Quero que funcione como o Tecmundo, Globo.com, todos estes sites, quando vamos adicionar um atalho deles no celular já trás o ícone do site.

Fiz isso mas não deu certo.

   <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>

Funciona no computador normalmente aparecendo o ícone lá em cima ao lado do título.

SOLUÇÂO

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
        <!-- Opera Speed Dial Favicon -->
  <link rel="icon" type="image/png" href="images/icon/favicon.png" />
    <!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="images/icon/favicon.ico" />
    <!-- For iPhone 4 Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icon/apple-touch-icon-114x114-precomposed.png">
    <!-- For iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon/apple-touch-icon-72x72-precomposed.png">
    <!-- For iPhone: -->
  <link rel="apple-touch-icon-precomposed" href="images/icon/apple-touch-icon-57x57-precomposed.png">
1
  • Esse serviço já cria os ícones para diversos dispositivos com opção para personalizar cores etc ... realfavicongenerator.net
    – denis
    Commented 2/02/2017 às 16:58

2 Respostas 2

2

Caso a imagem que irá inserir seja do tipo .ico, você deve definir o type o image/x-icon. Veja abaixo:

<link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon" />

Para outros formatos de imagens como .png e .gif, veja abaixo como deve ser:

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

Para deixar registrado, deixei um arquivo favicons.html no Github. Veja também mais detalhes nestes exemplos de favicons(en).

2
  • Aproveitei o link que você deixou e já fiz para todos dispositivos. Deu Certo Commented 3/02/2017 às 13:03
  • @LucasMarques legal cara... boa sorte ai! =)
    – viana
    Commented 3/02/2017 às 13:04
-1

Amigo, você quer colocar um favicon nos site.

Faça o seguinte:

1 - Edite uma imagem que você deseja que apareça, no tamanho de 15X15 e salve a mesma com o nome favicon.ico

2 - Envie a imagem para onde estar hospedado a sua pagina index.html

3 - No código fonte da pagina index.html e nas pagina do site coloque este link abaixo:

<link href="/SEU SITE/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Exemplo:

O meu estou usando hospedagem gratuita da 000webhostapp ficou assim:

<link href="/https://lojasceess.000webhostapp.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Teste no meu site e veja se é assim (uma coroa aparece antes do nome da pagina)

https://lojasceess.000webhostapp.com/

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 .