Si alguna vez has mirado las pestañas de tu navegador y has sentido una punzada de molestia porque tu sitio de WordPress todavía muestra ese globo gris genérico o el logotipo 'W' predeterminado, no estás solo. Es el detalle más pequeño que separa un 'proyecto de aficionado' de una marca en la que la gente realmente confía. En 2026, los usuarios esperan una experiencia visual fluida desde la pestaña del escritorio hasta el marcador en la pantalla de inicio del móvil.
El 'Icono del sitio' de WordPress vs. el Favicon tradicional
WordPress tiene su propia forma de hacer las cosas. No lo llaman favicon en el panel de control; lo llaman Icono del sitio. ¿La buena noticia? WordPress se encarga de gran parte del trabajo pesado (como generar múltiples tamaños) automáticamente. ¿La mala noticia? Si simplemente subes un PNG cualquiera de baja resolución, se verá borroso en pantallas de alta densidad como un iPhone o un MacBook Pro.
Antes de empezar, necesitas una imagen cuadrada. Recomiendo un PNG o SVG de 512x512 píxeles. Si tu logo es un rectángulo, no te limites a aplastarlo. Necesitas crear una versión simplificada y cuadrada. Fíjate en Stripe: su logo principal es un logotipo de texto, pero su favicon es una 'S' audaz y simplificada sobre un fondo morado. Es legible incluso a 16x16 píxeles. Si tienes un logo complejo, usa una herramienta como Mzu favicondl para probar cómo se ve a escalas más pequeñas antes de subirlo.
Método 1: La forma moderna (Temas de bloques y Editor del sitio)
Si estás utilizando un tema de bloques moderno (como Twenty Twenty-Four o Twenty Twenty-Five), el Personalizador a menudo está oculto. Así es como encuentras la configuración en 2026:
- Navega a Apariencia > Editor desde tu panel de WordPress.
- Haz clic en el icono de Estilos (el círculo medio lleno en la parte superior derecha).
- Haz clic en el icono de Editar (lápiz) para entrar en la configuración de estilos.
- Busca Identidad del sitio (a veces anidado bajo 'General' o 'Cabecera' dependiendo del tema).
- Haz clic en Seleccionar el icono del sitio y sube tu archivo de 512x512.
Método 2: La forma clásica (Personalizador)
Para aquellos que todavía usan temas clásicos o constructores de páginas como Elementor, el Personalizador de la vieja escuela es tu mejor amigo. Es más rápido y más directo.
- Ve a Apariencia > Personalizar.
- Encuentra la pestaña Identidad del sitio.
- Desplázate hacia abajo hasta la sección Icono del sitio.
- Sube tu imagen. WordPress te mostrará una vista previa de cómo se ve en una pestaña del navegador y como un icono de aplicación móvil.
Si descubres que tus cambios no aparecen, casi siempre es un problema de caché. Echa un vistazo a nuestra guía sobre el favicon que no se muestra para solucionar las causas más comunes.
Método 3: El método para desarrolladores (Código manual)
A veces, la función integrada de WordPress no te da suficiente control. Quizás quieras usar un favicon SVG moderno para una mejor escala y soporte para el modo oscuro. En ese caso, nos saltamos la interfaz de usuario y vamos directamente al código.
Sube tus archivos de favicon (ICO, PNG y SVG) a la carpeta de tu tema (p. ej., /wp-content/themes/your-theme/assets/favicons/). Luego, añade esto a tu archivo functions.php:
function mzu_custom_favicon() {
echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/favicon.svg" type="image/svg+xml">';
echo '<link rel="apple-touch-icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/apple-touch-icon.png">';
}
add_action("wp_head", "mzu_custom_favicon");Este método asegura que tu favicon se sirva exactamente como quieres, sin que la compresión automática de WordPress interfiera con la calidad.
Errores comunes que debes evitar
He auditado cientos de sitios de WordPress, y estos son los tres errores que veo con más frecuencia:
- Ignorar la regla de los 512px: WordPress utiliza este tamaño grande para generar iconos para dispositivos móviles. Si subes un archivo de 16x16, tu icono de 'Añadir a la pantalla de inicio' en el móvil se verá como un desastre pixelado.
- Olvidar la transparencia: A menos que el color de tu marca sea un cuadrado sólido, usa un PNG o SVG transparente. Una caja blanca alrededor de un logo circular parece de aficionado en las pestañas del navegador en modo oscuro.
- No comprobar el modo oscuro: Si tu logo es negro, desaparecerá en el modo oscuro de Chrome. Considera añadir un fino trazo blanco o usar un SVG con media queries.
Establecer un favicon para WordPress es una tarea de cinco minutos que tiene un impacto masivo en la calidad percibida de tu sitio. Ya sea que uses la herramienta de Icono del sitio integrada o lo codifiques manualmente para tener más control, asegúrate de que tus archivos sean nítidos y tengan el tamaño correcto. Si primero necesitas convertir tu logo a los formatos adecuados, usa Mzu favicondl para hacer el trabajo bien hecho.