2011-12-31 11 views
35

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.usando favicon con css

Respuesta

42

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

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

+18

Eso es cojo. Favicon es en realidad sobre el diseño de una página web, definitivamente debe ser movido a CSS! –

+2

@AugustinRiedinger - ¿Cómo es un favicon parte de la página? Nunca aparece en la página en sí. – Oded

+0

Eso es correcto. Supongo que depende de lo que incluyas en el diseño de una página web. En mi caso, he estado recortando un servicio web de código abierto y había algunos CSS especiales para este propósito. ¡Pensé que el favicon debería haber sido parte de esta personalización y hubiera sido fácil en un archivo css! –

6

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, limpia 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.

2

Si (1) que necesita un favicon que es diferente para algunas partes del dominio, o (2) que desea que esto funcione con IE 8 o más (no han probado ninguna versión más reciente), y luego se tiene que editar el html para especificar el favicon

0

No hay una manera 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 nombre, o renombre, el favicon de "favicon.ico" o algo similar que será fácil de recordar o relevante para el sitio en el que está 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 colocar un favicon nuevo con el mismo nombre se eliminará el antiguo, así que asegúrese de hacer una copia de seguridad del favicon anterior en caso de desastre, o si alguna vez desea volver al diseño anterior.