w3schools page link index icon code html static favicon

page - Añadiendo un favicon a una página HTML estática



index html favicon (15)

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

No puedes hacer eco de nada a la página anterior:

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

Tengo algunas static pages que son solo HTML puro, que mostramos cuando el servidor deja de funcionar. ¿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 de "pestaña" como estaba? 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 trabajar. 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 hacer que esto funcionara localmente, aunque el código comprueba que solo funcionará correctamente una vez que el servidor haya comenzado a servir el sitio. Solo intente enviarlo al servidor y actualizar su caché y debería funcionar bien.

Convierta su archivo de imagen en una cadena Base64 con una herramienta como this y luego reemplace el marcador de posición YourBase64StringHere en el siguiente fragmento de YourBase64StringHere 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.

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 las personas no tengan que crear todas estas imágenes y las etiquetas correctas a mano.

Espero que te guste.

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

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

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

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

Los siguientes trabajos para mí ...

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

Puede crear un archivo .png de 16x16 y luego usar uno de los siguientes fragmentos de código entre las etiquetas <head> de sus documentos HTML estáticos:

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

Sé que es la publicación más antigua pero todavía estoy publicando para alguien como yo. Esto funciono para mi

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

Pon tu ícono de favicon en el directorio raíz.

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 olvide borrar el caché de su navegador mientras trabaja en esas cosas. Muchas veces, el código está bien, pero el caché es el verdadero culpable.

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

Utilicé convert -resize 16x16 img.png favicon.ico (en linux konsole) para convertir mi imagen, y añada <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> a mi cabecera y todo funciona perfecto.

w3.org/2005/10/howto-favicon , puede usar el atributo rel para lograr esto.

Ejemplo:

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

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

<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