Un favicon es la imagen pequeña que aparece junto al título de una página en la pestaña del navegador. Un logotipo completo suele convertirse en una mancha ilegible a ese tamaño. En este tutorial crearás un icono sencillo con una letra, descargarás archivos utilizables, lo instalarás por una de dos rutas y comprobarás el resultado.
Al terminar tendrás: una carpeta extraída con los iconos y un icono visible en tu propio sitio. Si otra persona mantiene el sitio, terminarás con el archivo correcto y una solicitud de instalación precisa.
Necesitas: un navegador; permiso para actualizar el sitio; y acceso de administrador a WordPress o una persona responsable que pueda actualizar el HTML y los recursos. Crear los archivos con Favicon.io es gratis. Esto no incluye el alojamiento del sitio web.
Estado de la investigación: documentación oficial revisada el 22 de octubre de 2026. El generador, los controles de WordPress y el resultado final en el navegador no se han probado para este borrador. Los pasos están investigados; no son una afirmación de que se haya probado la instalación de principio a fin.
1. Crea un icono que funcione en tamaño pequeño
Abre el generador de texto de Favicon.io. Prueba este diseño de práctica:
- Texto: F
- Fondo: redondeado
- Color de la letra: #FFFFFF
- Color de fondo: #153E4E
- Tipografía: elige una opción sencilla y en negrita que puedas leer con claridad
Si lo prefieres, usa la inicial de tu negocio. Ajusta el tamaño de la letra hasta que tenga espacio a su alrededor. Una sola letra clara es un mejor primer intento que apretar todo el nombre del negocio dentro del cuadrado. Estas son decisiones de diseño de ejemplo, no colores de marca obligatorios.
Mira la vista previa más pequeña, no solo la grande. ¿Todavía distingues la letra? ¿Toca el borde? Si no está clara, simplifícala antes de descargar. El generador admite texto, formas de fondo, ajustes tipográficos y colores HEX. Instrucciones del generador
¿Ya tienes un logotipo? Usa el conversor de imágenes con una versión cuadrada y sencilla. Evita subir una fotografía del logotipo sin recortar o un logotipo horizontal y largo. Comprueba que tienes permiso para usar esa imagen.
2. Descárgalo y descomprímelo
Elige Download en el generador. Busca el ZIP en las descargas del navegador y ábrelo o extráelo con la función normal de tu computadora. Conserva la carpeta extraída, no solo el ZIP.
Según la documentación actual, el paquete de Favicon.io contiene:
favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifestEstos archivos sirven para diferentes tamaños y contextos. Por ejemplo, el icono táctil de Apple mide 180 × 180 píxeles; el último PNG mide 512 × 512. No necesitas instalar todos los archivos para completar la tarea básica de la pestaña del navegador. Contenido del paquete
Abre android-chrome-512x512.png en un visor de imágenes. Comprueba que contiene el icono que querías y no una descarga anterior. Si una segunda descarga tiene un nombre de ZIP numerado, inspecciona su contenido en lugar de suponer que es la versión correcta.
3. Elige una ruta de instalación
Ruta A: WordPress con el ajuste integrado Site Icon
Usa esta ruta en vez de editar los archivos del tema.
- En WordPress, sube el archivo extraído
android-chrome-512x512.pnga la biblioteca de medios. Favicon.io recomienda específicamente este archivo como imagen de origen para WordPress. No subas el ZIP como icono. - En WordPress 6.5 o posterior, abre Settings → General (Ajustes → Generales) y busca Site Icon (Icono del sitio).
- Elige la imagen que subiste. Completa cualquier paso de selección o recorte y luego haz clic en Save Changes (Guardar cambios) en la página de ajustes generales. Guardar los ajustes generales
- Abre el sitio público en una pestaña nueva.
WordPress exige una imagen cuadrada de al menos 512 × 512 píxeles. En las versiones 4.3 a 6.4, la ruta documentada es Appearance → Customize → Site Identity (Apariencia → Personalizar → Identidad del sitio). Si tu cuenta no puede ver estos controles, envía el archivo a la persona administradora. No instales un complemento ni reemplaces el tema solo para eludir la falta de acceso. Instrucciones de Site Icon en WordPress
Si otro constructor de sitios ofrece un control para subir un favicon o icono del sitio, usa su documentación actual. La ruta de menús de WordPress no es universal.
Ruta B: un sitio cuyo HTML y archivos públicos mantienes
Haz este cambio dentro de tu flujo habitual de vista previa y revisión. Conserva el icono y el marcado anteriores para poder restaurarlos.
- Coloca
favicon.icoen la raíz pública del sitio, de modo que su dirección final seahttps://TU-DOMINIO/favicon.ico. - Añade esta línea dentro del
<head>HTML compartido por las páginas:
<link rel="icon" href="/favicon.ico">- Si una línea de icono existente apunta a otro lugar, actualiza la línea prevista en vez de acumular versiones en conflicto.
- Publica el cambio aprobado mediante el proceso existente del sitio.
La barra inicial indica la raíz del dominio. Un framework puede usar una carpeta de código llamada public u otro nombre; una ruta de carpeta del código no es automáticamente la URL pública. Si el sitio vive dentro de un subdirectorio, confirma la ruta publicada con quien lo mantiene. Metadatos de página en MDN
Para especificar también iconos PNG y un icono táctil de Apple, puedes subir los archivos correspondientes y usar:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Incluye únicamente enlaces a archivos que hayas instalado de verdad. Un icono para la pestaña del navegador no exige sobrescribir un site.webmanifest existente. Ese archivo puede contener ya el nombre de tu aplicación web, sus iconos o ajustes de inicio. Déjalo intacto a menos que también mantengas esa configuración. Referencia de implementación de favicon
4. Demuestra que funciona
Realiza estas comprobaciones en orden:
- Comprobación del archivo, para la Ruta B: abre la dirección real de
/favicon.ico. Debes ver o descargar el icono, no un error 404, una pantalla de inicio de sesión o una página web normal. - Comprobación de la página: abre el sitio en una nueva ventana privada o de incógnito y mira la pestaña. Una ventana privada es útil para comprobar la caché, pero no garantiza que se omitan todas las cachés.
- Comprobación en tamaño pequeño: crea un marcador nuevo e inspecciona su icono donde lo muestre el navegador. Confirma que el diseño se reconoce a ese tamaño.
- Comprobación en una segunda página: visita otra página. El icono no debe depender de estar en la página de inicio.
Si falla la URL del icono, corrige la ubicación del archivo o el enlace antes de cambiar el diseño. Si el archivo es correcto pero continúa apareciendo un icono anterior, cierra la pestaña vieja y vuelve a intentarlo en una sesión nueva; la caché del favicon puede sobrevivir a una actualización normal. Instalación y solución de problemas del ICO
Esto no garantiza cuándo mostrará el icono un motor de búsqueda ni cómo lo presentará cada dispositivo.
Terminado: se abre el archivo de imagen correcto, el icono previsto aparece en una visita nueva y has conservado los archivos fuente. Si otra persona debe instalarlo, envíale: «Usa este PNG de 512 × 512 como icono del sitio mediante el ajuste integrado, o instala el ICO suministrado y verifícalo en una sesión nueva del navegador».