Eu tenho algumas páginas estáticas que são apenas HTML puro, que exibimos quando o servidor fica inoperante. Como posso colocar um favicon que eu criei (é 16x16px e está no mesmo diretório que o arquivo HTML; é chamado favicon.ico) como o ícone "tab"? Eu li na Wikipedia e observei alguns tutoriais e implementei o seguinte:

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

Mas ainda não quer funcionar. Estou usando o Chrome para testar os sites. Segundo a Wikipedia .ico é o melhor formato de imagem que é executado em todos os tipos de navegadores.

Atualizar

Não foi possível fazer com que isso funcionasse localmente, embora o código seja verificado apenas funcionará corretamente quando o servidor começar a servir o site. Apenas tente enviá-lo ao servidor e atualize seu cache, e ele deve funcionar bem.

html static favicon

— A lenda
fonte

quem você não diz a um amigo que o verifique em algum outro sistema, o mesmo problema é com um dos meus clientes, meu sistema está aparecendo bem e ele está reclamando que o favicon não está aparecendo, eu uso principalmente o primeiro exemplo e está certo. boa sorte.

— mt

3

Possível duplicata de Como adicionar um ícone da guia do navegador (favicon) a um site?

— Michał Perłakowski

Seu exemplo está funcionando agora no Chrome.

— Damjan Pavlica

Interessante, o site ao vivo serviu o favicon muito bem, mas ao visualizar o arquivo localmente, e não o servindo através de um servidor local (porque é um site estático simples - sim!), O favicon não foi exibido. Em retrospectiva, faz sentido, os servidores atendem automaticamente. A adição <link rel="icon" type="image/x-icon" href="favicon.ico">de head(ao lado das variações de favicon de 32, 16 e 180 link) resolveu o problema localmente. Como eu incluí links para tamanhos maiores de ícone e o manifesto, não pensei duas vezes sobre o motivo de favicon.iconão aparecer! :-)

— SherylHohman 9/03

934

Você pode criar uma imagem .png e, em seguida, usar um dos seguintes trechos entre as <head>tags dos seus documentos HTML estáticos:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— Hazy McGee
fonte

3

você tentou colocar "ícone de atalho" no rel = para os links do ico e colocou um / antes do favicon.ico em ambos apenas para afirmar que ele está no diretório raiz do web?

— precisa

1

Yip tentei isso também .. homem lol eu classificaria eu vou reiniciar tudo e tente arrancar e ver se talvez é errado descontar ou algo ..

— TheLegend

5

Eu juro - tive os mesmos problemas depois de adicionar o código - demorou talvez um dia para o navegador exibir o ícone em vez da caixa cinza que geralmente possui - tente despejar o histórico de cache do navegador, etc. E se você copiou meu código, certifique-se de alterar example.com para seu domínio lol

— Hazy McGee

2

Existe um argumento href redundante / na linha superior. Depois que o removi, ele funciona como um encanto. Deveria ser: <link rel = "ícone de atalho" href = "favicon.png" type = "image / png">

— drpawelo 27/06

4

w3.org/2005/10/howto-favicon diz para incluir um profileatributo na headtag ... isso é necessário?

— Rakib

228

A maioria dos navegadores seleciona favicon.icoo diretório raiz do site sem precisar ser informado; mas eles nem sempre atualizam com um novo imediatamente.

No entanto, eu costumo ir para o segundo de seus exemplos:

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

— Codecraft
fonte

tem que estar antes dos metadados ou das tags de script? ou não um problema

— TheLegend

2

Desde que esteja na seção <head>, isso não deve importar - porque não depende de outra coisa para funcionar.

— Codecraft

126

Na verdade, para fazer seu favicon funcionar em todos os navegadores, você deve ter mais de 10 imagens nos tamanhos e formatos corretos.

Eu criei um aplicativo ( faviconit.com ) para que as pessoas não criar todas essas imagens e as tags corretas manualmente.

Espero que você goste.

— Eduardo Russo
fonte

6

Amamos o aplicativo, há bs - direto para ele, e a imagem pode ser editada antes de criar todos os favicons +1 a você por me salvar um monte de tempo :)

— SidOfc

1

Concordo, este é um ótimo aplicativo. Embora eu não ache que todos esses tamanhos de imagem pareçam necessários, eu amo que eles os gerem e a marcação necessária, etc. Obrigado!

— andrhamm

Escolha um ótimo aplicativo: +1 :. Ajudou muito o /

— Renato Gomes

1

Mas é proprietário.

— Ctrl-alt-delor 5/0318

Não funciona, dáWhoops, looks like something went wrong.

— daka

68

O seguinte funciona para mim ...

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

— Jet Blue
fonte

40

Converta seu arquivo de imagem em string Base64 com uma ferramenta como esta e substitua o YourBase64StringHereespaço reservado no snippet abaixo por sua string e coloque a linha na seção de cabeçalho HTML:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Isso funcionará 100% nos navegadores.

— Farshid
fonte

3

Encontrei outra ferramenta que faz a conversão em JavaScript sem transferir dados para o servidor: jpillora.com/base64-encoder Além disso, ele lida com vários arquivos arrastando e soltando . Salve a página para usá-la localmente.

— manipula

1

imho, a melhor solução, porque honra a página "estática html" e é completamente independente no documento.

— Buffalo Rabor

1

Melhor solução. Também funciona com arquivos png. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />

— Rolf da Saxônia

1

Isso fará com que uma string longa seja adicionada a todas as páginas. Use base64 embutido para imagens pequenas que raramente são enviadas ao usuário.

— Frodeborli

Desta forma o seu favicon não é armazenado em cache, você envia a corda toda para o cliente de cada vez, IHMHO usando uma url e, portanto, as sente cache do navegador 'mais limpo / melhor'

— Michiel

34

Uso Sintaxe: _{^{.ico, .gif, .png,.svg}}

Esta tabela mostra como usar o favicon principais navegadores. A implementação padrão usa um elemento de link com um atributo rel na seção do documento para especificar o formato e o nome e o local do arquivo.

Observe que a maioria dos navegadores dará precedência a um favicon.icoarquivo localizado na raiz do site ( ignorando, portanto, qualquer tag de link de ícone).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Suporte ao formato de arquivo

A tabela a seguir ilustra o suporte ao formato do arquivo de imagem para favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Implementação do navegador

A tabela abaixo ilustra as diferentes áreas do navegador onde os favicon são exibidos:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Os arquivos de ícone podem ter 16 × 16 , 32 × 32 , 48 × 48 ou 64 × 64 pixels de tamanho e 8 bits , 24 bits ou 32 bits em profundidade de cores.

Embora as informações acima estejam geralmente corretas, existem algumas variações / exceções em determinadas situações.

^{Veja o artigo completo na fonte na Wikipedia.}

Atualização: ("mais informações")

Consulte os "novos" critérios do Google (2019) para definir um favicon para exibição nos resultados de pesquisa .
Você pode recuperar (programaticamente ou manualmente) o favicon em cache do Google para qualquer domínio com um URL como:https://www.google.com/s2/favicons?domain=stackoverflow.com

O uso do URL acima diretamente em uma <img>tag retorna: " ".
Eu usei o realfavicongenerator.net algumas vezes; é muito completo, gerando / personalizando todas as variações possíveis de favicon necessárias para a máxima compatibilidade. (No entanto, se você está procurando uma única imagem favicon, esta pode não ser a ferramenta para você!) Para uma simples conversão de arquivo (por exemplo, PNGpara ICO, etc), gosto de onlineconvertfree.com .

— ashleedawg
fonte

15

Se o favicon for uma imagem do tipo png, não funcionará nas versões mais antigas do Chrome. No entanto, ele funcionará bem no FireFox. Além disso, não se esqueça de limpar o cache do navegador enquanto estiver trabalhando nessas coisas. Muitas vezes, o código é bom, mas o cache é o verdadeiro culpado.

— Tanveer Shaikh
fonte

1

Isso é bom; é muito difícil para instalar / manter uma versão antiga do Chrome qualquer maneira

— Ben leggiero

14

Conforme recomendado pelo W3.org , você pode usar o relatributo para conseguir isso.

Exemplo:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

— Rahul Desai
fonte

8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

— shilovk
fonte

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Isso funcionou para mim

— Anand Dwivedi
fonte

4

Enquanto isto pode funcionar, você não pode usar image / png como o Tipo de MIME - porque é incorreta, considerando que você está usando Ico

— zanderwar

5

Conheço o post mais antigo, mas ainda estou postando para alguém como eu. Isso funcionou para mim

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

coloque seu ícone favicon no diretório raiz ..

— Cyclotron3x3
fonte

4

como uma nota adicional que pode ajudar alguém algum dia.

Você não pode repetir nada na página antes:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

não carrega ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

funciona bem

— bart2puck
fonte

3

Isso ocorre porque deveria estar na seção principal de um documento HTML e é ignorado pela maioria dos navegadores, se não estiver.

— Eric Sebasta

Sim, eu só queria colocar isso aqui, caso alguém tenha algum problema. Meu problema era que o "olá" era um código de depuração e me deixava perplexo um pouco.

— bart2puck

3

Eu usei convert -resize 16x16 img.png favicon.ico(no linux konsole) para converter minha imagem e adicionar <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">ao meu cabeçalho e tudo funciona perfeitamente.

— dmx
fonte

2

Observe que se o seu site estiver sendo executado como um exemplo subfolder:

http://localhost/MySite/

Você precisará levar isso em conta. Se você estiver fazendo isso a partir de um ASP.NETaplicativo, basta adicionar um ~à frente do URL:

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

— Serj Sagan
fonte

2

De acordo com a atualização do OP, ele não estava aparecendo localmente, mas conforme a atualização do OP, uma vez que eu o carreguei no servidor, estava tudo bem.

Como este é um site html simples e estático, tenho o luxo de trabalhar nele sem executar um servidor da web local.
Um servidor da web geralmente envia automaticamente o favicon, se houver, por padrão.

Porém, quando não estiver executando um servidor da web, o próprio navegador não apenas lerá o diretório procurando arquivos adicionais, como o favicon.ico, a menos que esteja listado no documento html.

Então, enquanto eu tinha os seguintes itens na headtag:

    <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">

Eu não também incluir uma referência para ol liso' favicon.ico.
Mesmo assim, o favicon.icoarquivo foi incluído, além das imagens listadas acima.

Uma vez eu adicionei a seguinte linha:

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

Ele também apareceu no meu navegador, quando visualizo o arquivo local , mesmo quando não servi-lo através de um servidor local.

Portanto, o ícone apareceu bem quando foi executado no servidor ativo, mas não localmente.

Menciono isso explicitamente porque o gerador de favicon que usei gentilmente forneceu o código, os ícones, o manifesto e as instruções. No entanto, embora incluísse a favicon.icoimagem, não incluía um <link>no arquivo no código para adicionar ao htmldocumento.
Eu acho que o serviço presume que favicon.icoserá automaticamente exibido e usado por todos os navegadores por padrão, portanto, apenas as versões "alternativas" precisavam ser explicitamente adicionadas à tag principal.
Evidentemente, eles não consideram que, ao exibir arquivos localmente (ou seja, não os servem localmente), não estamos interessados em ver o favicon?

— SherylHohman
fonte

1

Se você adicionar o favicon à pasta raiz / imagens com o nome favicon.ico, o navegador entenderá automaticamente e o fará como favicon. Eu testei e trabalhei. seu link deve ser www.website.com/images/favicon.ico

Para mais informações, procure esta resposta:

Você precisa incluir <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

— Sarkhan
fonte

0

Observe que o FF falha ao carregar um ícone com um //URL redundante como /img//favicon.png. Testado no FF 53. O Chrome está OK.

— Étienne Bersac
fonte

Isso não é realmente uma resposta , mas um comentário . (Veja " Como responder ".)

— ashleedawg

0

Tente usar o <link rel="icon" type="image/ico" href="images/favi.ico"/>

— subindas pm
fonte

-2

Eu apenas usei um png. Certifique-se de remover qualquer fundo branco. contribui para um ícone melhor

— Tom
fonte

Adicionando um favicon a uma página HTML estática