w3schools tag page link icon fav html css favicon

tag - link favicon html5



usando favicon con css (4)

Quiero configurar el favicon para un número bastante grande de páginas. Pero, en lugar de usar la etiqueta HTML <head> <link rel="shortcut icon" href="favicon.ico"> , me gustaría configurarlo en el archivo CSS. Tengo acceso limitado a algunos de los archivos html y control limitado a su ciclo de vida.


No es necesario que: si el favicon se coloca en la raíz en favicon.ico, los navegadores lo recogerán automáticamente.

Si no lo ves funcionando, borra tu caché, etc., funciona sin el marcado. Solo necesita usar el código si desea llamarlo de otra forma o ponerlo en un CDN, por ejemplo.


No hay una forma explícita de cambiar el favicon globalmente usando CSS que yo sepa. Pero puedes usar un truco simple para cambiarlo sobre la marcha.

Primero solo nombra, o cambia el nombre, el favicon a "favicon.ico" o algo similar que será fácil de recordar o relevante para el sitio en el que estás trabajando. A continuación, agregue el enlace al favicon en la cabeza como lo haría normalmente. Luego, cuando introduzcas un favicón nuevo, asegúrate de que está en el mismo directorio que el anterior, y que tiene el mismo nombre, ¡y listo!

No es una solución muy elegante, y requiere un poco de esfuerzo. Pero colocar un favicon nuevo en un lugar es mucho más fácil que buscar y reemplazar todos los enlaces o, lo que es peor, cambiarlos manualmente. Al menos de esta manera no implica jugar con el código.

Por supuesto, al agregar un favicon nuevo con el mismo nombre se eliminará el antiguo, así que asegúrese de hacer una copia de seguridad del antiguo favicon en caso de desastre, o si alguna vez quiere volver al diseño anterior.


No puede establecer un favicon de CSS; si desea hacerlo explícitamente, debe hacerlo en el marcado como describió.

La mayoría de los navegadores, sin embargo, buscarán un archivo favicon.ico en la raíz del sitio web, de modo que si accede a http://example.com, la mayoría de los navegadores buscarán http://example.com/favicon.ico automáticamente.


Si (1) necesita un favicon que sea diferente para algunas partes del dominio, o (2) desea que funcione con IE 8 o anterior (no ha probado ninguna versión más nueva), entonces debe editar el html para especifica el favicon