Como adicionar um ícone de página do navegador (favicon) para uma página web?
Como posso fazer isso em HTML e onde no código eu precisaria colocá-lo (por exemplo, Cabeçalho)? Eu tenho um arquivo logo {[[0]} que eu gostaria de converter para um ícone.
relacionado: imagem de conjunto HTML na página do navegador .
10 answers
<link rel="icon">
Basta adicionar o seguinte código ao elemento <head>:
<link rel="icon" href="http://example.com/favicon.png">
Os favicons PNG são suportados pela maioria dos navegadores, excepto IE . Para compatibilidade reversa, você pode usar ICO favicons.
Note que você não tem que preceder icon em rel atributo com shortcut já não. De tipos de ligações MDN:
O tipo de ligação
shortcuté frequentemente visto antes deicon, mas este tipo de ligação não está conforme, ignorado e os autores da web não devem usá-lo mais.
favicon.ico no directório raiz
De outra resposta (por @mercator):
Então, tudo o que tens de fazer é fazer o ... solicite ao seu site que devolva o seu favicon. Esta opção, infelizmente, não lhe permite usar um ícone PNG.Todos os navegadores modernos (testados com o Chrome 4, o Firefox 3.5, o IE8, o Opera 10 e o Safari 4) irão sempre pedir um
favicon.icoa menos que tenha indicado um ícone de atalho via<link>.
Ver também favicon.png vs favicon.porque devo usar PNG em vez de ICO?
- Use uma ferramenta para converter o seu png para um ficheiro ico. Você pode procurar "favicon generator" e você pode encontrar muitas ferramentas online.
-
Coloque o endereço ico no
headcom umlink-tag:<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
O melhor que encontrei foi http://www.favicomatic.com/ Digo o melhor porque me deu o favicon mais estaladiço, e não precisava de edição após a transformação. Ele vai gerar favicons em 16x16 e 32x32 e citá-los " todo maldito tamanho, Senhor!" Além disso, seu site parece legal e é fácil de usar.
Eles também geram o html que você precisa usar para os arquivos que 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=" "/>
<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" />
Existem vários ícones diferentes e até mesmo ecrãs splash que você pode definir para vários dispositivos. Esta resposta passa por como apoiá-los a todos.
Aqui estão alguns trechos que usei com links relevantes para onde recolhi a informação. Veja o meu blog Para mais informações e mais informações sobre o ASP.NET modelo de projecto MVC Boilerplate com tudo isto incorporado directamente da caixa (incluindo ficheiros de imagem de exemplo).Adicionar o seguinte marque para a sua cabeça de html. As secções comentadas são inteiramente opcionais. Enquanto as seções Sem comentários são recomendadas para cobrir todas as usagens de ícones. Não tenha medo, a maioria se são 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">
<?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>
{
"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 ficheiros do projecto (Note que os nomes destes ficheiros são importantes se decidir colocar alguns deles na raiz do seu projecto para evitar usar as meta-marcas 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
Total Das Despesas Gerais
Se você tirar os comentários que são 3KB de HTML extra, se você não suportar telas de respingo que são 1.5 KB. Se estiver a usar a compressão GZIP no seu conteúdo HTML, o que todos devem estar a fazer nos dias de hoje, isso deixa-o com cerca de 634 Bytes de sobrecarga por pedido para suportar todas as plataformas ou 446 Bytes sem ecrãs splash. Eu pessoalmente acho que vale a pena para apoiar IOS, Android e Windows dispositivos, mas a escolha é tua, só estou a dar as opções!
Nota Lateral Sobre A Situação Actual Do Ícone Web/Ecrã Inicial / Configuração
Esta situação com ícones específicos do Fornecedor, ecrãs splash e etiquetas especiais para controlar o navegador web ou ícones presos é ridícula. Num mundo perfeito, todos usaríamos um favicon.arquivo svg que poderia parecer bom em qualquer tamanho e poderia ser colocado na raiz da página. Apenas o FireFox suporta isto no momento da escrita (ver CanIUse.com).
No entanto, os ícones não são a única configuração nestes dias, existem várias outras configurações específicas do Fornecedor (mostradas acima), mas um favicon.o ficheiro svg cobriria a maioria dos casos de uso.
Actualizar
Actualizado para incluir a nova versão M39+ favicon/theming do Android/Chrome. Curiosamente, eles têm ido com uma abordagem semelhante à Microsoft, mas estão usando um arquivo JSON em vez de XML.
A única excepção é que o navegador SeaMonkey necessita de um código HTML inserido no seu {[[0]}; enquanto que os outros navegadores Irão à mesma mostrar o favicon.ico sem qualquer inserção HTML. Além disso, qualquer navegador que não o IE pode usar outros tipos de imagens, não apenas o .formato ico. Espero que isto ajude.
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
Listado acima
Você pode criar ambos {[[0]} e 32x32 (para o novo ecrã de retina) num só .Ficheiro ICO.
Sem problemas com IE e Firefox
Para o Chrome mostrar o ícone da página (favicon), você precisa verificar o seu site a partir de um servidor de hospedagem ou você pode usar a máquina local ao desenvolver e testar o seu site no seu PC.
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
Se me permitem acrescentar mais clareza aos que ainda estão confusos. O .o arquivo ico tende a fornecer mais transparência do que o.png, é por isso que eu recomendo converter sua imagem aqui como mencionado acima: http://www.favicomatic.com/done além disso, dentro do href é apenas a localização da imagem, pode ser qualquer localização do servidor, lembre-se de adicionar o http:// na frente, caso contrário ele não vai funcionar.
Criei um gerador 'Online' De Favicon com o qual poderá criar favicons a partir de ícones de tipo de letra impressionantes. Você pode visualizar o favicon criado ao vivo no navegador.
Se quiser funcionalidades adicionais, sinta-se à vontade para enviar um problema ou um pedido de puxão aqui :).