Cómo agregar un favicon a tu sitio WordPress: Personalizador, código y solución de problemas

Agregar un favicon a WordPress toma unos 30 segundos: ve a Apariencia → Personalizar → Identidad del sitio → Icono del sitio, sube un PNG de 512x512 y haz clic en Publicar. Listo.

Pero si eso no funciona, o quieres más control, sigue leyendo. Hay algunos detalles que vale la pena conocer.

La forma rápida: el Personalizador de WordPress

Esto funciona en cualquier sitio WordPress con la versión 4.3 o posterior (lanzada en 2015). Si tienes una versión medianamente reciente, tienes esta opción.

Paso 1: Abre el Personalizador

• Ve a Apariencia → Personalizar en tu panel de administración de WordPress
• O haz clic en "Personalizar" en la barra de administración mientras ves tu sitio

Paso 2: Encuentra Identidad del sitio

• Haz clic en Identidad del sitio en la barra lateral del Personalizador
• Desplázate hacia abajo hasta Icono del sitio

Paso 3: Sube tu imagen

• Haz clic en Seleccionar icono del sitio
• Sube una imagen PNG de al menos 512 x 512 píxeles
• WordPress generará automáticamente todos los tamaños menores que necesita (incluyendo 32x32, 180x180, etc.)
• Recorta si se te solicita, luego haz clic en Publicar

Eso es todo. WordPress se encarga del resto: crea las etiquetas <link> para los favicons del navegador, los Apple touch icons e incluso la imagen de mosaico de Windows.

La forma con código: agregar favicon manualmente

A veces el enfoque del Personalizador no es suficiente. Tal vez estás construyendo un tema personalizado, o tu tema anula el comportamiento predeterminado. Así es cómo agregarlo con código.

Opción A: Coloca archivos en tu tema

Sube los archivos de tu favicon al directorio raíz de tu tema, luego agrega esto al functions.php de tu tema:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Opción B: Usa un favicon SVG

Los favicons SVG se escalan perfectamente y soportan modo oscuro. Agrega esto a functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

El respaldo en PNG es para Safari, que aún no soporta completamente los favicons SVG.

Usar un plugin (si lo prefieres)

Varios plugins manejan favicons, pero siendo honestos, el Personalizador integrado funciona bien para la mayoría de los sitios. Los plugins tienen sentido si necesitas:

• Favicons diferentes por página o entrada
• Pruebas A/B con diferentes íconos
• Multisite con favicons por sitio

Las opciones populares incluyen All in One Favicon y Flavor (anteriormente flavicon). Pero de nuevo, prueba primero el Personalizador.

Temas de bloques en WordPress (edición completa del sitio)

Si estás usando un tema de bloques como Twenty Twenty-Four o Twenty Twenty-Five, el proceso es ligeramente diferente:

1. Ve a Apariencia → Editor
2. Haz clic en Estilos (el ícono de semicírculo)
3. Navega a los estilos globales de tu sitio
4. La configuración del Icono del sitio sigue estando en Apariencia → Personalizar → Identidad del sitio

Los temas de bloques aún usan el mismo Personalizador para el favicon. WordPress todavía no ha movido esta función al Editor del sitio.

Archivos de favicon recomendados

Para una cobertura completa, prepara estos archivos:

El Personalizador de WordPress maneja la mayoría de estos automáticamente cuando subes una imagen de 512x512. Los archivos SVG e ICO deben agregarse manualmente si los deseas.

Solución de problemas: el favicon no se muestra

Limpia todo

Los problemas de favicon en WordPress casi siempre son por caché:

1. Caché del navegador: Recarga forzada con Ctrl+Shift+R (Windows) o Cmd+Shift+R (Mac)
2. Caché de WordPress: Si usas WP Super Cache, W3 Total Cache o LiteSpeed Cache, púrgalo
3. Caché del CDN: Cloudflare, Fastly o lo que uses, purga las URLs del favicon
4. Prueba en incógnito: Abre una sesión limpia sin archivos en caché

Verifica conflictos de plugins

Algunos plugins de SEO y frameworks de temas inyectan sus propias etiquetas de favicon. Si ves etiquetas <link rel="icon"> duplicadas en el código fuente de tu página:

1. Ve el código fuente de la página (Ctrl+U)
2. Busca "icon" o "favicon"
3. Si hay duplicados, verifica qué plugin los está agregando
4. Desactiva la función de favicon del plugin o elimina tu código manual

Problemas de anulación del tema

Algunos temas (especialmente los premium) tienen su propia configuración de favicon que anula el Personalizador. Verifica:

• El panel de Opciones del tema para una configuración de favicon
• El archivo header.php del tema para etiquetas <link rel="icon"> codificadas directamente
• La documentación del tema para instrucciones sobre el favicon

Solución de problemas: Google muestra el favicon incorrecto

Google puede tardar días o semanas en actualizar los favicons en los resultados de búsqueda. Así es cómo acelerar el proceso:

Requisitos de favicon de Google

Google tiene reglas específicas para mostrar favicons en los resultados de búsqueda:

• Debe ser múltiplo de 48px (48x48, 96x96, 144x144)
• Debe ser cuadrado
• No debe contener contenido inapropiado o NSFW
• Debe representar al sitio web (no ser un ícono genérico)

Acelera la actualización

1. Asegúrate de que tu favicon esté activo y accesible
2. Abre Google Search Console
3. Usa Inspección de URLs en tu página principal
4. Haz clic en Solicitar indexación
5. Espera: generalmente toma de 1 a 2 semanas

Solución de problemas: el favicon se muestra en escritorio pero no en móvil

Los navegadores móviles son más exigentes con los formatos de favicon:

• iOS Safari: Necesita apple-touch-icon (180x180) — el favicon normal no se mostrará en la pantalla de inicio
• Android Chrome: Busca manifest.json con referencias de íconos para la pantalla de inicio
• PWA: Necesita íconos de 192x192 y 512x512 definidos en el manifiesto de la aplicación web

Si tu sitio WordPress tiene un manifiesto de aplicación web (algunos temas y plugins lo agregan), asegúrate de que las rutas de los íconos sean correctas.

Consideraciones para Multisite

¿Usas WordPress Multisite? Cada sitio necesita su propio favicon.

• El Personalizador es por sitio, así que cada subsitio puede tener su propio ícono
• La configuración a nivel de red no incluye un favicon predeterminado
• Si quieres un favicon predeterminado para toda la red, agrégalo mediante functions.php en un plugin obligatorio (wp-content/mu-plugins/)

Mejores prácticas

• Comienza en grande: Sube al menos 512x512 — WordPress reduce, nunca agranda
• Usa PNG: Los fondos transparentes funcionan mejor que JPEG
• Mantenlo simple: Tu favicon es pequeño — los logos complejos no se leen a 16x16
• Prueba en varios navegadores: Usa Favicon.im para verificar tu configuración
• Versiona tu favicon: Agrega ?v=2 a la URL cuando actualices para evitar la caché

Preguntas frecuentes

¿Cómo agrego un favicon en WordPress?

Ve a Apariencia → Personalizar → Identidad del sitio → Icono del sitio, sube una imagen PNG de 512x512 y haz clic en Publicar. WordPress genera automáticamente todos los tamaños necesarios.

¿Qué tamaño debe tener un favicon en WordPress?

Sube al menos 512 x 512 píxeles. WordPress creará automáticamente los tamaños de 32x32, 180x180 y otros. Para los resultados de búsqueda de Google, usa múltiplos de 48px.

¿Por qué no se muestra mi favicon en WordPress?

Generalmente es un problema de caché. Limpia la caché del navegador, del plugin de caché de WordPress y del CDN. Prueba en una ventana de incógnito. También verifica si hay conflictos de plugins que causen etiquetas de favicon duplicadas.

¿Puedo usar un favicon SVG en WordPress?

WordPress no permite subir archivos SVG por defecto por razones de seguridad. Puedes agregar soporte para favicon SVG manualmente mediante código en functions.php, o usar un plugin que habilite la subida de SVG.

¿Cómo agrego favicons diferentes para modo claro y oscuro en WordPress?

Usa un favicon SVG con media queries CSS integradas para prefers-color-scheme. Agrega el archivo SVG manualmente mediante functions.php ya que el Personalizador solo maneja formatos PNG/ICO.

Referencias

1. Site Icon - WordPress Developer Resources - Documentación oficial de WordPress
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Herramienta de prueba y validación de favicons