Favicon para WordPress: todos los formatos de una imagen
Un favicon moderno no es un archivo de 16×16: son una docena de formatos para pestañas, iOS, Android y Windows. Genéralos todos desde una sola imagen.
Un favicon es una cosa diminuta —el pequeño ícono en la pestaña del navegador, en un marcador, en la pantalla de inicio del teléfono— y es una de las primeras señales de que un sitio está terminado y no a medio construir. Pero «agregar un favicon» se convirtió, sin que nadie lo anunciara, en una verdadera faena. Soltar un .ico de 16×16 en tu directorio raíz dejó de ser suficiente hace años. Los navegadores, iOS, Android y Windows exigen cada uno sus propios formatos y tamaños, más archivos de manifiesto que los aten entre sí. Aquí te muestro cómo producir el set completo a partir de una sola imagen, y no volver a pensar en ello nunca más.
Lo esencial
- Un favicon completo hoy significa
favicon.ico+ PNG en 16, 32, 48, 180, 192, 512 y un mosaico de Windows, no un archivo único. - También necesita un
site.webmanifest(Android/PWA) y unbrowserconfig.xml(mosaicos de Windows), más un juego de etiquetas<head>. - El ícono del sitio integrado en WordPress es incompleto: tamaños limitados, sin manifiesto, sin color de tema ni mosaico de Windows.
- El Favicon Generator construye todo a partir de una sola subida de una imagen cuadrada de 512×512 o más, con un color de tema y un color de fondo.
- Cambio de marca en un paso: sube una imagen nueva y cada formato, archivo y etiqueta se regenera, sin ediciones manuales.
¿Qué formatos de favicon necesitas realmente?
Este es el set completo que un sitio moderno debería servir:
| Archivo / formato | Tamaño | Se usa para |
|---|---|---|
favicon.ico | 16×16, 32×32, 48×48 | Pestañas del navegador, marcadores, cualquier petición directa a /favicon.ico |
| Apple Touch icon | PNG de 180×180 | Pantallas de inicio de iOS |
| Íconos Android Chrome | PNG de 192×192 y 512×512 | Pantallas de inicio de Android y Progressive Web Apps |
| Mosaico de Windows | 150×150 | Sitios anclados en Windows |
site.webmanifest | Archivo JSON | Le dice a los navegadores Android cuáles son tus íconos y tu color de tema |
browserconfig.xml | Archivo XML | Configuración de los mosaicos de Windows |
Son muchos archivos y etiquetas <head> para algo que debería ser simple; exactamente por eso hacerlo a mano es una faena que no quieres repetir en cada cambio de marca.
¿Por qué no basta con un .ico (o con el ícono del sitio)?
La ruta manual es esta: usar un generador en línea, descargar un ZIP, subir los archivos a tu servidor y pegar las etiquetas HTML en el header de tu tema; y luego repetir el baile completo cada vez que tu logo cambie, cruzando los dedos para no omitir ningún formato.
El ícono del sitio integrado en el Personalizador de WordPress ayuda, pero es parcial: genera un conjunto limitado de tamaños y no crea los archivos de manifiesto, así que los íconos PWA, los colores de tema y los mosaicos de Windows simplemente quedan sin cubrir. Terminas de vuelta en el generador manual para el resto.
¿Cómo generas todos los formatos automáticamente?
Activa el módulo Favicon Generator en Blaminhor Essentials, sube una imagen cuadrada de al menos 512×512, y elige un color de tema y uno de fondo. Al guardar, genera todos los formatos —favicon.ico, Apple Touch, Android y mosaico de Windows—, escribe site.webmanifest y browserconfig.xml, e inyecta las etiquetas <head> correctas automáticamente. Tres pasos:
Entra una imagen cuadrada y dos colores; salen todos los formatos de favicon, los archivos de manifiesto y las etiquetas del head.
- Sube una imagen. Una sola imagen cuadrada en alta resolución, de al menos 512×512. Un logo o símbolo sobre fondo transparente o sólido funciona mejor.
- Define tus colores. Elige un color de tema (el tinte de la barra del navegador en móviles) y un color de fondo (para los mosaicos de Windows y las pantallas de bienvenida de Android).
- Guarda. El módulo genera todos los formatos —
favicon.ico(y lo copia a la raíz de tu sitio), el set PNG completo, el Apple Touch icon, los íconos de Android y el mosaico de Windows—, sirvesite.webmanifestybrowserconfig.xml, e inyecta las etiquetas<head>correctas en tu sitio.
Entra una imagen, sale un favicon completo en todas partes.
Actualizar tu favicon más adelante
Cambiar de marca solía significar repetir todo el ritual de generar y subir. Aquí es una sola acción: sube la imagen nueva y todo se regenera: cada tamaño, ambos archivos de manifiesto y todas las etiquetas del head. Sin archivos que administrar, sin código que tocar, sin metaetiquetas que editar a mano. Y como el módulo no emite nada hasta que los íconos están realmente generados, nunca deja etiquetas rotas apuntando a archivos que no existen.
Un favicon nítido es una pequeña parte de la sensación de un sitio terminado; combina de forma natural con una gestión de imágenes ordenada en el resto de tus medios.
Favicon Generator es una de las más de 20 herramientas de Blaminhor Essentials, gratuito y de código abierto en WordPress.org.
Descargar Blaminhor Essentials
– blaminhor
FAQ
¿De qué tamaño debe ser la imagen de origen de mi favicon?
De al menos 512×512 píxeles y cuadrada, para que cada tamaño menor pueda generarse limpiamente sin escalar hacia arriba. Un logo o símbolo sobre fondo transparente o sólido funciona mejor: los detalles finos y el texto tienden a desaparecer a 16×16, así que las marcas simples se leen mucho mejor como favicon.
¿Por qué mi favicon no aparece en WordPress?
Normalmente tu navegador está mostrando una versión en caché, o las etiquetas del head apuntan a archivos que en realidad no existen. El Favicon Generator inyecta las etiquetas correctas y copia favicon.ico a la raíz de tu sitio automáticamente, así que los archivos existen; después, un refresco forzado elimina el ícono obsoleto al que tu navegador se aferraba con terquedad.
¿Cómo fuerzo a los navegadores a refrescar un favicon en caché?
Los favicons se guardan en caché de forma agresiva. Un refresco forzado —Ctrl+F5, o Cmd+Shift+R en Mac— suele bastar; si no, abre la URL del ícono directamente, o revisa en una ventana privada. Regenerar el favicon cambia los archivos a los que apuntan las etiquetas, lo que empuja a la mayoría de los navegadores a descargar el nuevo.
¿Un favicon puede ser un SVG, o tiene que ser PNG/ICO?
Los navegadores modernos sí aceptan un favicon SVG para las pestañas, pero las pantallas de inicio de iOS, Android y los mosaicos de Windows siguen esperando PNG e ICO en tamaños fijos, así que un SVG por sí solo no cubre todas las superficies. Por eso el generador construye el set ráster completo a partir de tu única imagen en vez de apoyarse en un solo archivo escalable.
¿Puedo agregar un favicon sin un plugin?
Sí: genera los archivos con una herramienta en línea, súbelos a tu servidor y pega las etiquetas del head en tu tema a mano. Funciona, pero repites todo el ritual en cada cambio de marca y te arriesgas a omitir un formato. Un módulo generador hace el mismo trabajo desde una sola subida y actualiza todo con un clic.
Comentarios