📌 Cómo añadir un favicon en WordPress: 3 formas para cualquier sitio

Un sitio sin favicon parece inacabado. Un visitante abre cinco pestañas, busca la suya entre ellas y no la encuentra porque en lugar de un icono hay un marcador de posición gris del navegador. ¿Un detalle menor? Sí. Pero son estos pequeños detalles los que moldean la impresión: alguien se preocupó por usted o lo armó a las apuradas.

WordPress ha simplificado la adición de un icono de sitio a un par de clics, sin embargo, la mitad de los propietarios de sitios o bien desconocen esta función o, después de subirlo, se topan con que el favicon no se muestra. La razón casi siempre es la caché del navegador o un tamaño de archivo incorrecto.

A continuación, tres formas efectivas de añadir un favicon en WordPress: mediante el Personalizador (la más fácil), manualmente a través de código y mediante un plugin. Además, un desglose de los requisitos de tamaño y formato para que el icono se muestre en todas partes: en pestañas, marcadores, en iPhone y Android.

💡 Resumen rápido:

• Qué es un favicon y por qué su sitio lo necesita: reconocimiento de marca, confianza, navegación por pestañas
• Requisitos del archivo: una imagen cuadrada de tamaño estándar, formato PNG, ICO o SVG
• Método 1: subir a través de "Sitio" → Personalizador (2 minutos, sin plugins)
• Método 2: inserción manual mediante functions.php o header.php (para quienes editan temas)
• Método 3: instalar el plugin Site Favicon (si el Personalizador no está disponible)
• Qué hacer si el favicon no se muestra: caché del navegador, ICO antiguo, CDN

Por qué su sitio necesita un favicon y cuáles son los requisitos

Un favicon (abreviatura de favorite icon) es un pequeño icono que el navegador muestra a la izquierda del título de la página en la pestaña, en los marcadores y en el historial de navegación. Un usuario con una docena de pestañas abiertas encuentra su sitio de un vistazo en una fracción de segundo, precisamente por el favicon, no por el texto del título.

La segunda función es menos obvia: el favicon contribuye a construir una micro-marca. Cuando alguien guarda una página en marcadores o añade el sitio a la pantalla de inicio de su smartphone, es el icono del sitio lo que aparece allí. Sin uno, WordPress sustituye un marcador de posición gris o una captura de pantalla de la página, lo cual da un aspecto descuidado.

Requisitos de tamaño y formato

Desde 2014, WordPress permite subir un icono de sitio a través del Personalizador. Los requisitos son estándar:

• Tamaño: 512×512 píxeles. WordPress genera automáticamente copias reducidas para los navegadores (32×32, 180×180 para el icono táctil de Apple, 192×192 y 512×512 para Android). No necesita subir archivos separados para cada resolución; el núcleo lo hace por sí solo. Más información sobre los requisitos del icono de sitio en la documentación oficial de WordPress.
• Formato: PNG (recomendado), ICO o SVG. PNG ofrece la mejor calidad en pantallas retina. ICO, un formato heredado para navegadores antiguos, es prácticamente innecesario en 2026.
• Qué usar como favicon: un logotipo que sea reconocible en un cuadrado y legible al reducirlo significativamente. Tres o cuatro letras de texto sobre un fondo de color funcionan mejor que una ilustración compleja.

La regla principal al preparar el archivo: debe ser cuadrado. WordPress recortará forzosamente una imagen no cuadrada, y el resultado puede no ser de su agrado.

Cómo añadir un favicon en WordPress: 3 métodos

Método 1: mediante el Personalizador, el más simple

Este método funciona en cualquier versión moderna de WordPress con un tema clásico. Para temas de bloque (FSE) la ruta es ligeramente diferente; le mostraré ambas.

Tema clásico (Personalizador):

• Inicie sesión en el administrador de WordPress.
• Vaya a Apariencia → Personalizar.
• Seleccione la sección Identidad del sitio. En algunos temas se llama "Información del sitio" o "Icono y logotipo del sitio".
• Busque el campo Icono del sitio. Haga clic en "Seleccionar icono del sitio" y suba un PNG cuadrado; WordPress espera una imagen de al menos 512×512, según la documentación.
• Si es necesario, recorte la imagen usando el editor integrado y haga clic en "Guardar cambios".

Tema de bloque (Editor de sitio, WordPress 5.9+):

Si el tema admite la Edición completa del sitio, el Personalizador se sustituye por el Editor de sitio. Vaya a Apariencia → Editor, abra el panel de Estilos o Ajustes, busque la sección Icono del sitio y suba la misma imagen cuadrada. La lógica es la misma, la interfaz es diferente.

Después de guardar, abra el sitio en una nueva ventana privada del navegador; el favicon debería aparecer en la pestaña. Si no aparece de inmediato, no se alarme: los navegadores almacenan en caché los favicons de forma agresiva. Más sobre esto en la sección de preguntas frecuentes a continuación.

Método 2: manualmente mediante functions.php

Una opción para quienes editan un tema hijo y no quieren depender del Personalizador. Añada el siguiente código al functions.php del tema hijo o mediante el plugin Code Snippets:

1
/**
2
 * Include favicon via wp_head.
3
 * The favicon.png file should be in the root of the child theme.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Lo que sucede aquí: el gancho wp_head inserta dos etiquetas <link> en el <head> de cada página. La primera es un favicon estándar para navegadores, la segunda es un icono táctil de Apple para dispositivos Apple (iPhone, iPad). La función get_stylesheet_directory_uri() devuelve la URL del tema hijo; el favicon debe colocarse allí, en la raíz de la carpeta del tema.

No es necesario renombrar el archivo a favicon.ico. WordPress funciona bien con PNG, y los navegadores lo entienden sin problemas. Lo principal es un cuadrado de tamaño estándar.

Si está enlazando el favicon no desde el tema sino desde la raíz del sitio, reemplace get_stylesheet_directory_uri() por home_url() y ajuste la ruta:

1
$favicon_url = home_url( '/favicon.png' );

Después de añadir el código, suba favicon.png a la carpeta correspondiente mediante FTP o el administrador de archivos del hosting. Verifique el resultado en una ventana privada del navegador.

Método 3: mediante un plugin

Si el Personalizador por alguna razón no le permite subir un icono de sitio (esto sucede en temas personalizados y obsoletos), instale el plugin Site Favicon, que es minimalista y gratuito. Instálelo de la forma estándar: Plugins → Añadir nuevo → busque "Site Favicon" → Instalar → Activar. Tras la activación, aparece un elemento de menú Ajustes → Site Favicon en el administrador, donde puede subir un icono y ver una vista previa de inmediato.

Otra opción es All in One SEO. Si el plugin SEO ya está en el sitio, revise sus ajustes: allí hay una sección de subida de icono de sitio que hace lo mismo sin un plugin adicional. Pero no recomendamos instalar una suite SEO pesada solo por un favicon; Site Favicon cumple la tarea, pesa menos y no añade carga extra.

Después de configurar el favicon usando cualquiera de los tres métodos, verifique que el icono realmente se muestre: abra el sitio en modo incógnito y mire la pestaña del navegador.

El video anterior es una demostración paso a paso de los tres métodos en un sitio WordPress real. Si después de leer aún tiene dudas sobre alguno de los pasos, vea el video: en el minuto 1:15 muestran la subida mediante el Personalizador, en el 3:40 el método manual.

⁉️🤔 Preguntas frecuentes

¿Por qué no se muestra el favicon después de subirlo mediante el Personalizador?

En la mayoría de los casos el problema es la caché del navegador. Los favicons se almacenan en caché de forma agresiva; el navegador puede conservar la versión antigua durante varios días. Abra el sitio en modo incógnito (Ctrl+Shift+N en Chrome): si el icono aparece, el problema es efectivamente la caché. Limpie la caché de su navegador o espere a que caduque de forma natural. La segunda razón más común es que el favicon se subió en formato ICO mientras que el navegador espera PNG. WordPress desde la versión 4.3 prefiere PNG; suba un cuadrado de tamaño estándar en PNG, como exige la documentación, y el problema desaparecerá.

¿Puedo usar mi logotipo como favicon?

Puede y debe; es la práctica habitual. Pero no todos los logotipos son adecuados. Compruebe cómo se ve su logotipo a pequeña escala: si los detalles se fusionan en una mancha ilegible, haga una versión simplificada. Un buen ejemplo es el icono de WordPress (W sobre fondo azul): reconocible incluso a un tamaño diminuto. Un logotipo horizontal con diez letras de texto se convertirá en una franja gris al reducirlo significativamente; para el favicon, use solo el símbolo sin el texto.

¿Por qué WordPress exige un favicon exactamente de este tamaño?

Para WordPress, sí. El núcleo acepta exactamente este tamaño como fuente y genera todas las copias reducidas necesarias automáticamente; la documentación oficial confirma el requisito mínimo de 512 px en cada lado. Si sube un favicon más pequeño (por ejemplo, 128×128), el escalado a 512 píxeles ocurrirá con pérdida de calidad, y en pantallas retina el icono se verá borroso. La excepción es si enlaza el favicon manualmente mediante código (método 2): entonces puede preparar varios tamaños y especificarlos con etiquetas <link> separadas.

¿Cómo elimino o reemplazo un favicon?

El reemplazo se hace a través de la misma interfaz donde lo subió: Personalizador → Identidad del sitio → Icono del sitio → "Eliminar" y luego suba uno nuevo. El icono antiguo permanecerá en la caché del navegador durante algún tiempo (hasta varios días); esto es normal. Para la eliminación completa, use el botón "Eliminar" en la misma interfaz, después de lo cual WordPress dejará de mostrar las etiquetas del favicon y el navegador volverá al marcador de posición gris.

¿Afecta un favicon al SEO?

Directamente, no. Google no usa la presencia o ausencia de un favicon como factor de posicionamiento. Indirectamente, sí: un sitio con favicon parece más profesional, y es menos probable que los usuarios lo confundan con la competencia al navegar por las pestañas. Esto reduce la tasa de pogo-sticking (retorno a los resultados de búsqueda), lo cual los motores de búsqueda tienen en cuenta indirectamente. Además, Google a veces muestra favicons en los resultados de búsqueda móviles; el icono hace que el fragmento sea visualmente más llamativo, lo que mejora el CTR.

Qué método elegir: un algoritmo breve

Si tiene un tema estándar con Personalizador, use el método 1. Son dos clics, y WordPress se encarga de todo el trabajo técnico: redimensionado, generación de etiquetas, compatibilidad con Apple y Android. Nueve de cada diez sitios WordPress resuelven la cuestión del favicon exactamente de esta manera.

¿Un tema personalizado sin soporte para icono de sitio? Enlácelo mediante functions.php (método 2); el código de tres líneas le da control total sobre tamaños y formato. Reserve el plugin (método 3) para los casos en que ni el Personalizador ni la edición del tema estén disponibles, por ejemplo, si el sitio está en una instalación multisitio con permisos restringidos o está trabajando con un constructor que no da acceso a functions.php.

Y lo más importante: después de subir el favicon, verifique el sitio en el modo incógnito de un navegador nuevo. No confíe en una ventana normal; allí puede estar almacenada en caché la versión antigua o el propio marcador de posición. ¿Ve el icono en la pestaña? Listo.