Orisod
Qué es un favicon, y por qué importa
El ícono ayuda a reconocer el sitio entre varias pestañas y marcadores. Los accesos añadidos a la pantalla de inicio utilizan metadatos relacionados y suelen necesitar un recurso de mayor tamaño. La ausencia del favicon no impide que la página funcione, pero una marca clara facilita la navegación y mejora la presentación.
Qué archivos de favicon pueden ser útiles
No existe un único paquete obligatorio para todos los proyectos. Las opciones habituales incluyen ICO para compatibilidad con sistemas antiguos, PNG o SVG para navegadores actuales y un ícono táctil de Apple cuando se quiere controlar la imagen de la pantalla de inicio:
- favicon.ico: el formato clásico, todavía esperado por muchos navegadores como respaldo.
- Varios tamaños PNG (típicamente 16 × 16, 32 × 32, 192 × 192, 512 × 512): para distintos contextos de visualización, desde pestañas del navegador hasta pantallas de inicio de Android.
- apple-touch-icon: un tamaño específico que usan los dispositivos Apple cuando un sitio se guarda en la pantalla de inicio de un iPhone o iPad.
- Una referencia en el manifest: para aplicaciones web progresivas, uniendo el conjunto de íconos.
Un generador puede crear los tamaños, nombres y referencias HTML elegidos a partir de una sola imagen. Revisa el resultado en lugar de asumir que tu sitio necesita todos los archivos producidos.
| Archivo | Tamaño | Se usa para |
|---|---|---|
| favicon.ico | 16×16 + 32×32 (combinados) | Icono de pestaña (navegadores antiguos) |
| favicon-16x16.png | 16×16px | Pestaña del navegador (estándar) |
| favicon-32x32.png | 32×32px | Pestaña del navegador (alta densidad) |
| apple-touch-icon.png | 180×180px | Pantalla de inicio de iOS |
| android-chrome-192x192.png | 192×192px | Pantalla de inicio de Android |
| android-chrome-512x512.png | 512×512px | Splash de Android / PWA |
Elige una imagen que funcione a 16 píxeles
Utiliza un símbolo cuadrado, una o dos iniciales o un ícono sencillo con buen contraste. Comprueba cómo se ve a 16 × 16 píxeles. Las líneas finas y los textos pequeños pueden desaparecer aunque se distingan en la imagen original.
Generar el conjunto completo de archivos
Un generador puede convertir una imagen en variantes ICO y PNG y crear un ícono táctil de Apple. Descarga el conjunto que corresponda a tus objetivos de compatibilidad y conserva la imagen original para poder regenerarlo.
Instalarlo en tu sitio
Guarda los archivos en direcciones estables y añade las etiquetas <link> correspondientes dentro del <head> de la página. Utiliza solo las referencias de los archivos que conservaste, comprueba cada ruta y vuelve a cargar sin caché si continúa apareciendo el ícono anterior.
Errores comunes con el favicon
- Usar una imagen recargada o con mucho detalle. Cualquier cosa con texto fino o sombreado intrincado se convierte en una mancha ilegible a 16 × 16 píxeles. Más simple casi siempre es mejor.
- Subir solo un tamaño. Un único PNG puede verse bien en una pestaña del navegador pero aparecer en blanco o mal recortado cuando alguien guarda tu sitio en la pantalla de inicio de un teléfono.
- Olvidar limpiar la caché después de actualizarlo. Los navegadores guardan los favicons en caché de forma muy agresiva, así que después de reemplazar uno, puede que necesites forzar una actualización o borrar las imágenes en caché antes de que aparezca el nuevo.
- Colocar los archivos en la carpeta equivocada. Las etiquetas
<link>necesitan apuntar a donde viven los archivos en tu servidor. Un desajuste aquí es la razón más común por la que un favicon "generado correctamente" sigue sin aparecer.
Preguntas sobre la configuración del favicon
¿Necesito todos los tamaños generados? No siempre. El conjunto adecuado depende de los navegadores que quieras admitir, la compatibilidad con sistemas antiguos y si deseas un ícono específico para la pantalla de inicio.
¿Puedo utilizar una fotografía? Sí, pero suele perder detalle al reducirse. Un sujeto muy recortado o un gráfico sencillo normalmente se reconoce mejor.
¿Necesito un programa de pago? No. Un generador en el navegador puede crear los archivos; diseñar un ícono original es una tarea diferente.
Genera tu paquete de favicon ahora
Genera variantes ICO y PNG y un ícono táctil de Apple a partir de una sola imagen. Orisod procesa el archivo localmente en tu navegador e incluye las referencias HTML correspondientes.
Generar un favicon →Después de instalarlo, prueba el favicon en una pestaña nueva, un marcador y los contextos móviles que quieras admitir. El archivo puede ser correcto aunque una ruta HTML o la caché del navegador todavía apunten a otro ícono.