Como adicionar um ícone da guia do navegador (favicon) a um site?

578

Estou trabalhando em um site e gostaria de adicionar um pequeno ícone à guia do navegador.

Como posso fazer isso em HTML e onde no código eu precisaria colocá-lo (por exemplo, cabeçalho)? Eu tenho um .pngarquivo de logotipo que gostaria de converter em um ícone.

Relacionado: Imagem do conjunto HTML na guia do navegador .

html icons favicon knookie
fonte
1
verifique o link para mais informações. Você está no caminho certo.
reggie
Carregue a imagem (favicon.ico) com FTP (leia nosso tutorial sobre FTP) na seção raiz do seu site. A seção raiz é a principal área de arquivo, onde você armazenaria o arquivo index.html (index.asp, index.php, etc) para sua página principal. davesite.com seria a raiz davesite.com/webstation não seria a raiz davesite.com/webstation/html também não é raiz Este arquivo, colocado corretamente, será carregado como o padrão para todo o seu domínio.
knookie
pressione a tecla Enter prematuramente - de qualquer forma, obrigado pela resposta. Só ia dizer que a primeira parte (que colei acima) no link que você deu não parecia funcionar? No entanto, a segunda parte funcionou perfeitamente - obrigado
knookie
3
Aqui estão as recomendações do w3.org com um aviso de que o IE antes do IE11 não suporta .png como ícones favoritos .
Denys Séguret

Respostas:

416

Na verdade, existem duas maneiras de adicionar um favicon a um site.

<link rel="icon">

Basta adicionar o seguinte código ao <head>elemento:

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

Os favicons PNG são suportados pela maioria dos navegadores, exceto o IE <= 10 . Para compatibilidade com versões anteriores, você pode usar os ícones favoritos da ICO.

Observe que você não precisa preceder mais iconno relatributoshortcut . Nos tipos de link MDN :

O shortcuttipo de link costuma ser visto antes icon, mas esse tipo de link não é conforme, é ignorado e os autores da Web não devem mais usá-lo .

favicon.ico no diretório raiz

De outra resposta do SO (por @mercator ):

Todos os navegadores modernos (testados com Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) sempre solicitam um, a favicon.icomenos que você tenha especificado um ícone de atalho por <link>.

Então, tudo o que você precisa fazer é fazer com que a /favicon.icosolicitação ao seu site retorne seu favicon. Infelizmente, esta opção não permite que você use um ícone PNG.

Consulte também favicon.png vs favicon.ico - por que devo usar PNG em vez de ICO?

Michał Perłakowski
fonte
1
Se você deseja TODOS os ícones automaticamente (incluindo dispositivos móveis, ícones 'adicionar à tela inicial', favoritos para dispositivos móveis, iOS / Droid, guia da área de trabalho, etc.), geração de arquivos ICO, etc. tudo com um clique, você pode usar esta ferramenta útil (não sou afiliado) realfavicongenerator.net
Albert Renshaw
2
Deseja adicionar: seu ícone deve estar na dimensão quadrada, significa que a largura é igual à altura.
Nguyen Tan Dat
3
Não se esqueça de pressionar Ctrl + F5 ao testá-lo. Às vezes, é armazenado em cache.
Hairi 06/02/19
Eu fiz não achar que simplesmente colocar um arquivo ICO favicon.ico chamado no diretório raiz do meu site causada tanto o Firefox ou Chrome para carregá-lo. Então eu fui a <link relrota. MAS, como o endereço do meu site não está listado de maneira confiável no DNS, não posso href="http://example.com"recuperá-lo. Então, eu chegou a esta solução no meu index.htmarquivo:<link rel="icon" href="favicon.ico">
CODE-Leia
426
  1. Use uma ferramenta para converter seu png em um arquivo ico. Você pode pesquisar "gerador de favicon" e pode encontrar muitas ferramentas online.

  2. Coloque o endereço ico no headcom uma link-tag:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
Gustavo Costa De Oliveira
fonte
3
obrigado! Eu segui as etapas corretamente e ele está funcionando muito bem no IE e Firefox, mas por algum motivo não está funcionando no Google Chrome, preciso excluir o cache? ou o que eu tenho que fazer a partir daí?
precisa saber é o seguinte
1
Eu gosto de usar o Photoshop Plugin: telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Ben_Coding
2
A parte "atalho" pode ser removida em várias circunstâncias: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon
bbc
72

O melhor que eu encontrei é http://www.favicomatic.com/ Eu digo o melhor porque me deu o favicon mais nítido e não exigiu edição após a transformação. Ele irá gerar favicons em 16x16 e 32x32 e citá-los "Todo tamanho maldito, senhor!" Além disso, o site parece legal e fácil de usar.

Eles também geram o html que você precisa usar para os arquivos que eles geram.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Eu olhei para os 20 primeiros resultados do Google, e esse foi de longe o melhor.

Jared Menard
fonte
4
Eu deveria colocar tudo isso na minha tag para todas as páginas?
Noumenon
1
Eu não colocaria tudo isso em sua cabeça. Eu colocaria apenas as tags necessárias para dar suporte aos dispositivos que você precisa. Honestamente você pode conviver com um único <type "ícone" = "image / ico" href = "/ images / favicon.ico" link rel =>
Jared Menard
5
Esta página git explica o que a maioria destes ícones são utilizados para: github.com/audreyr/favicon-cheat-sheet
Jared Menard
14

Existem vários ícones diferentes e até telas de apresentação que você pode definir para vários dispositivos. Esta resposta mostra como apoiar todos eles.

Aqui estão alguns trechos que usei com links relevantes para onde reuni as informações. Consulte o meu blog para obter mais informações e mais informações sobre o modelo de projeto do ASP.NET MVC Boilerplate com tudo isso incorporado diretamente da caixa (incluindo arquivos de imagem de exemplo).

Adicione a seguinte marcação à sua cabeça html. As seções comentadas são totalmente opcionais. Embora as seções não comentadas sejam recomendadas para cobrir todos os usos de ícones. Não se assuste, principalmente se forem comentários para ajudá-lo.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Meu arquivo browserconfig.xml. Explicação completa acima.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Meu arquivo manifest.json. Explicação completa acima.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Uma lista dos arquivos no projeto (observe que os nomes desses arquivos são importantes se você decidir colocar alguns deles na raiz do seu projeto para evitar o uso das metatags acima):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Despesas gerais totais

Se você remover os comentários com 3 KB de HTML extra, se você não suportar telas de apresentação com 1,5 KB. Se você estiver usando a compactação GZIP no seu conteúdo HTML, o que todo mundo deveria fazer hoje em dia, você terá cerca de 634 bytes de sobrecarga por solicitação para oferecer suporte a todas as plataformas ou 446 bytes sem telas de apresentação. Pessoalmente, acho que vale a pena suportar dispositivos IOS, Android e Windows, mas a escolha é sua, estou apenas dando as opções!

Nota lateral sobre o ícone atual da Web / Tela inicial / Situação das configurações

Essa situação com ícones específicos do fornecedor, telas de apresentação e tags especiais para controlar o navegador da Web ou ícones fixos é ridícula. Em um mundo perfeito, todos nós usaríamos um arquivo favicon.svg, que poderia ter uma boa aparência em qualquer tamanho e ser colocado na raiz da página. Somente o FireFox suporta isso no momento da escrita (consulte CanIUse.com ).

No entanto, os ícones não são a única configuração atualmente, existem várias outras configurações específicas do fornecedor (mostradas acima), mas um arquivo favicon.svg cobriria a maioria dos casos de uso.

Atualizar

Atualizado para incluir as novas opções de favicon / tema para Android / Chrome versão M39 +. Curiosamente, eles adotaram uma abordagem semelhante à Microsoft, mas estão usando um arquivo JSON em vez de XML.

Muhammad Rehan Saeed
fonte
11

Eu criei um Favicon Generator online com o qual você pode criar favicons a partir de Font Awesome Icons . Você pode visualizar o favicon criado ao vivo no navegador.

insira a descrição da imagem aqui

Se desejar recursos adicionais, não hesite em enviar um problema ou uma solicitação de recebimento aqui :).

eclipse
fonte
10

Fiz isso com sucesso no meu site.

A única exceção é que o navegador SeaMonkey requer código HTML inserido no seu <head>; enquanto os outros navegadores ainda exibirão o favicon.ico sem nenhuma inserção de HTML. Além disso, qualquer navegador que não seja o IE pode usar outros tipos de imagens, não apenas o formato .ico. Eu espero que isso ajude.

Barbie laptop gamer
fonte
5

Existem muitas soluções complicadas acima. Para mim? Usei o GIMP para salvar uma cópia do arquivo PNG original depois de alterar o tamanho da imagem para 32 x 32 pixels.

Apenas certifique-se de salvá-lo como um arquivo * .ico e use o 

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

listado acima

beep_check
fonte
4

Eu recomendo que você tente http://faviconer.com para converter seu arquivo .PNG ou .GIF em um arquivo .ICO.

Você pode criar ambos 16x16e 32x32(para nova exibição de retina) em um arquivo .ICO.

Sem problemas com o IE e Firefox

Dmitri A
fonte
3

Para que o Chrome exiba o ícone da página (favicon), você precisa verificar seu site em um servidor de hospedagem ou pode usar um host local ao desenvolver e testar seu site no seu PC.

Miloud Eloumri
fonte
2 
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Se posso acrescentar mais clareza para aqueles que ainda estão confusos. O arquivo .ico tende a fornecer mais transparência que o .png, e é por isso que recomendo converter sua imagem aqui, como mencionado acima: http://www.favicomatic.com/done também, dentro do href está apenas o local da imagem , pode ser qualquer local do servidor, lembre-se de adicionar o http: // na frente, caso contrário não funcionará.

dizad87
fonte
1

Eu não usei nenhum outro, mas https://realfavicongenerator.net/ parece ser uma das principais opções, e ainda não foi mencionado aqui.

Ele suporta SVGs como imagens de origem para gerar favicons e fornece opções úteis para substituir imagens em diferentes plataformas. Além disso, por padrão, não gera uma tonelada de imagens para ser compatível com versões anteriores de todas as plataformas desatualizadas. Em vez disso, fornece opções para verificar se você as deseja.

De um e-mail que o desenvolvedor me enviou, eles também têm planos de adicionar suporte para gerar favicons SVG, além da sensibilidade ao tema SVG , eu acho, que é um recurso totalmente incrível.

mbomb007
fonte
0

Por favor, use o código abaixo na seção do cabeçalho do seu arquivo de índice.

<link rel="icon" href="yourfevicon.ico" />
chitraksh bairathee
fonte