Agregar un favicon a una página HTML estática

641

Tengo algunas páginas estáticas que son solo HTML puro, que mostramos cuando el servidor se cae. ¿Cómo puedo poner un favicon que hice (es 16x16px y está en el mismo directorio que el archivo HTML; se llama favicon.ico) como el ícono "tab" por así decirlo? He leído en Wikipedia, he visto algunos tutoriales y he implementado lo siguiente:

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

Pero todavía no quiere funcionar. Estoy usando Chrome para probar los sitios. Según Wikipedia .ico es el mejor formato de imagen que se ejecuta en todos los tipos de navegador.

Actualizar

No pude lograr que esto funcionara localmente, aunque el código comprueba que solo funcionará correctamente una vez que el servidor comenzó a servir el sitio. Simplemente intente subirlo al servidor y actualice su caché y debería funcionar bien.

html static favicon La leyenda
fuente
a quién no le dices a ninguno de tus amigos que lo compruebe por ti en algún otro sistema, el mismo problema es que uno de mi cliente mi sistema se muestra bien y se está quejando de que el favicon no se muestra, principalmente utilizo el primer ejemplo de ti y es correcto. la mejor de las suertes.
mt
3
Posible duplicado de ¿Cómo agregar un ícono de pestaña del navegador (favicon) para un sitio web?
Michał Perłakowski
Tu ejemplo está funcionando ahora en Chrome.
Damjan Pavlica
Interesante, el sitio web en vivo sirvió el favicon muy bien, pero cuando se visualiza el archivo localmente y no se sirve a través de un servidor local (b / c es un sitio estático simple, ¡sí!), El favicon no se mostró. En retrospectiva, tiene sentido, los servidores lo sirven automáticamente. Agregar <link rel="icon" type="image/x-icon" href="favicon.ico">al head(junto a las variaciones de favicon 32, 16 y 180 link) resolvió el problema localmente. Como había incluido links para los tamaños de ícono más grandes y el manifiesto, ¡no lo pensé dos veces acerca de por qué favicon.icono aparecía! :-)
SherylHohman

Respuestas:

934

Puede hacer una imagen .png y luego usar uno de los siguientes fragmentos entre las <head>etiquetas de sus 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
fuente
3
¿intentaste poner el "ícono de acceso directo" en el rel = para tus enlaces ico y pusiste un / antes de favicon.ico en ambos solo para indicar que está en el directorio webroot?
Hazy McGee
1
yip intentó eso también ... hombre lol califico que voy a reiniciar todo y luego intentar arrancar y ver si tal vez está cobrando mal o algo así ...
TheLegend
55
Lo juro, tuve los mismos problemas después de agregar el código, el navegador tardó quizás un día en mostrar el ícono en lugar del cuadro gris que generalmente tiene, intente eliminar el historial de caché del navegador, etc. Y si copió mi código, asegúrese de que cambie example.com a su dominio lol
Hazy McGee
2
Hay un argumento href redundante / en la línea superior. Una vez que lo eliminé funciona como un encanto. Debe ser: <link rel = "icono de acceso directo" href = "favicon.png" type = "image / png">
drpawelo
44
w3.org/2005/10/howto-favicon dice que incluir un profileatributo en la headetiqueta ... ¿es necesario?
Rakib
228

La mayoría de los navegadores se recogerán favicon.icodel directorio raíz del sitio sin necesidad de que se lo indiquen; pero no siempre lo actualizan con uno nuevo de inmediato.

Sin embargo, generalmente voy por el segundo de tus ejemplos:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
Codecraft
fuente
¿tiene que ser antes de los metadatos o las etiquetas del script? o no es un problema
TheLegend
2
Mientras esté en la sección <head>, no debería importar, porque no depende de otra cosa para funcionar.
Codecraft
127

En realidad, para que su favicon funcione en todos los navegadores, debe tener más de 10 imágenes en los tamaños y formatos correctos.

Creé una aplicación ( faviconit.com ) para que la gente no tenga que crear a mano todas estas imágenes y las etiquetas correctas.

Espero que te guste.

Eduardo Russo
fuente
66
Me encantó la aplicación, no bs, directamente, y la imagen se puede editar antes de crear todos los favicons +1 para ahorrarme un montón de tiempo :)
SidOfc
1
De acuerdo, esta es una gran aplicación. Si bien no creo que todos esos tamaños de imagen parezcan bastante necesarios, me encanta que los genere y el marcado requerido, etc. ¡Gracias!
andrhamm
Indeead una gran aplicación: +1 :. Ayudó mucho o /
Renato Gomes
1
Pero es de propiedad.
ctrl-alt-delor
No funciona, daWhoops, looks like something went wrong.
daka
68

Lo siguiente funciona para mí ...

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

Convierta su archivo de imagen en una cadena Base64 con una herramienta como esta y luego reemplace el YourBase64StringHeremarcador de posición en el fragmento de abajo con su cadena y coloque la línea en la sección de encabezado HTML:

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

Esto funcionará al 100% en los navegadores.

Farshid
fuente
3
Encontré otra herramienta que realiza la conversión en JavaScript sin transferir datos al servidor: jpillora.com/base64-encoder Además, maneja múltiples archivos arrastrando y soltando. Guarde la página para usarla localmente.
manejar el
1
En mi humilde opinión, la mejor solución, ya que respeta la página "HTML estático" y está completamente autocontenido dentro del documento.
Buffalo Rabor
1
Mejor solución. Funciona con archivos png también. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
Rolf of Saxony
1
Esto hará que se agregue una cadena larga a cada página. Utilice en línea base64 para imágenes pequeñas que rara vez se envían al usuario.
frodeborli
De esta manera, su favicon nunca se almacena en caché, envía toda la cadena al cliente cada vez, IHMHO utiliza una url y, por lo tanto, el caché del navegador se siente 'más limpio / mejor'
Michiel
34

Uso Sintaxis: .ico, .gif, .png,.svg

Esta tabla muestra cómo usar los faviconprincipales navegadores. La implementación estándar utiliza un elemento de enlace con un atributo rel en la sección del documento para especificar el formato y el nombre y la ubicación del archivo.

Tenga en cuenta que la mayoría de los navegadores darán prioridad a un favicon.icoarchivo ubicado en la raíz del sitio web (por lo tanto, ignorando cualquier etiqueta de enlace de icono).

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

Soporte de formato de archivo

La siguiente tabla ilustra el soporte de formato de archivo de imagen 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

Implementación del navegador

La siguiente tabla ilustra las diferentes áreas del navegador donde se muestran los favicon:

                      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

Los archivos de iconos pueden tener un tamaño de 16 × 16 , 32 × 32 , 48 × 48 o 64 × 64 píxeles y 8 bits , profundidad de color de 24 bits o 32 bits .

Si bien la información anterior es generalmente correcta, hay algunas variaciones / excepciones en ciertas situaciones.

img Ver el artículo completo en la fuente en Wikipedia.

Actualizar: ("más información")

ashleedawg
fuente
15

Si el favicon es una imagen de tipo png, no funcionará en versiones anteriores de Chrome. Sin embargo, funcionará bien en Firefox. Además, no olvides borrar el caché de tu navegador mientras trabajas en esas cosas. Muchas veces, el código está bien, pero el caché es el verdadero culpable.

Tanveer Shaikh
fuente
1
Esta bien; es muy difícil instalar / mantener una versión antigua de Chrome de todos modos
Ben Leggiero
14

Según lo recomendado por W3.org , puede usar elrel atributo para lograr esto.

Ejemplo:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
Rahul Desai
fuente
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
fuente
7 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Esto funciono para mi

Anand Dwivedi
fuente
44
Si bien esto puede funcionar, no puede usar image / png como el Tipo MIME, porque es incorrecto considerando que está usando .ico
zanderwar
5

Sé que es una publicación anterior, pero aún publico para alguien como yo. Esto funciono para mi

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

ponga su icono de favicon en el directorio raíz.

Ciclotrón3x3
fuente
4

como una nota adicional que puede ayudar a alguien algún día.

No puede repetir nada en la página antes:

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

no cargará ico

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

funciona bien

bart2puck
fuente
3
Esto se debe a que se supone que está en la sección principal de un documento HTML, y la mayoría de los navegadores lo ignoran si no lo está.
Eric Sebasta
Sí, solo quería poner esto aquí en caso de que alguien tuviera un problema. Mi problema fue que el "hola" era un código de depuración y me dejó perplejo por un momento.
bart2puck
3

Utilicé convert -resize 16x16 img.png favicon.ico(en Linux Konsole) para convertir mi imagen y agregar <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">a mi encabezado y todo funciona perfectamente.

dmx
fuente
2

Tenga en cuenta que si su sitio se ejecuta como un subfolderie:

http://localhost/MySite/

Deberá tener eso en cuenta. Si lo está haciendo desde una ASP.NETaplicación, todo lo que necesita hacer es agregar un ~al frente de la URL:

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

Según la actualización de OP, no se mostraba localmente, pero según la actualización de OP, una vez que lo cargué en el servidor, estaba bien.

Dado que este es un sitio web html simple y estático, tengo el lujo de trabajar en él sin ejecutar un servidor web local.
Un servidor web generalmente servirá automáticamente el favicon, si lo hay, de forma predeterminada.

Pero cuando no está ejecutando un servidor web, el navegador en sí no solo leerá el directorio en busca de archivos adicionales, digamos un favicon.ico, a menos que aparezca en el documento html.

Entonces, aunque tenía los siguientes elementos en la headetiqueta: 

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

No incluí también una referencia para plain 'ol favicon.ico.
Aunque favicon.icose incluyó el archivo, además de las imágenes enumeradas anteriormente.

Una vez que agregué la siguiente línea: 

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

Se hizo también aparece en mi navegador, cuando ve la local de archivos, incluso cuando no servirlo a través de un servidor local.

Entonces, el ícono apareció bien cuando se ejecutó en el servidor en vivo, pero no localmente.

Menciono esto explícitamente porque el generador de favicones que utilicé, amablemente proporcionó el código, los iconos, el manifiesto y las instrucciones. Sin embargo, si bien incluyó la favicon.icoimagen, no incluyó un <link>archivo de ese archivo en el código para agregarlo al htmldocumento.
Supongo que los presupuestos de servicio se favicon.icoservirán automáticamente y serán utilizados por todos los navegadores de forma predeterminada, por lo que solo las versiones "alternativas" debían agregarse explícitamente a la etiqueta principal.
Evidentemente, no consideran que cuando se ven archivos localmente (es decir, no se los entrega localmente), ¿no nos interesa ver el favicon?

SherylHohman
fuente
0

Tenga en cuenta que FF no puede cargar un icono con una //URL redundante como /img//favicon.png. Probado en FF 53. Chrome está bien.

Étienne Bersac
fuente
Esa no es realmente una respuesta , sino un comentario . (Ver " Cómo responder ".)
ashleedawg
0

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

subindas pm
fuente
-2

Acabo de usar un png. Asegúrese de eliminar cualquier fondo blanco. hace un mejor icono

Tom
fuente