# Añadir un favicón a WordPress: Las 3 maneras de hacerlo

Cada pestaña de la barra de tu navegador contiene el título de la página del sitio y un pequeño icono que recibe el nombre de *favicon*, favicón, favicono o icono de página en castellano. Ambos facilitan al usuario identificar la [página web](https://www.ionos.com/es-us/digitalguide/paginas-web/creacion-de-paginas-web/en-que-consiste-una-pagina-de-inicio/ "¿En qué consiste una página de inicio?") y mejoran su orientación cuando hay varias pestañas abiertas. El favicón de una web también es parte de la marca de la empresa y mejora la experiencia del usuario. Existen **tres métodos diferentes** de insertar un favicón en WordPress. Te explicamos paso a paso cómo hacerlo y las ventajas de cada método.

Nota En castellano, se aceptan las formas *favicón* y *favicono* y sus plurales *favicones* y *faviconos* para el anglicismo *favicon*, voz que proviene de *favourite icon*.

## ¿Por qué insertar un favicón en WordPress?

El término favicon es la abreviatura de “*favourite icon”*. Este pequeño icono es un elemento básico en la **página web de una empresa**. Se muestra en la barra de las pestañas, en la barra de marcadores, en las aplicaciones móviles de WordPress, en los iconos de inicio y en los resultados de búsqueda en el móvil. Por consiguiente, se recomienda elegir un icono significativo y único como favicón. El favicón trae consigo **numerosas ventajas**:

- Proporciona **seriedad y profesionalidad** a la página web.
- Facilita al usuario el reconocimiento de la empresa y de sus servicios en la web y, por tanto, mejora la **experiencia del usuario**.
- Tiene un efecto positivo en el [SEO](https://www.ionos.com/es-us/digitalguide/online-marketing/marketing-para-motores-de-busqueda/consejos-sobre-seo-para-wordpress/) de la página.
- Cuando un usuario tiene varias pestañas abiertas en el navegador, los títulos se ocultan, pero el favicón **siempre permanece visible**.

Consejo La mayoría de empresas utiliza **su logo o una variante** del mismo como favicón en [WordPress](https://www.ionos.com/es-us/digitalguide/hosting/blogs/crear-paginas-web-con-wordpress-primeros-pasos/).

## Cómo añadir un favicón a WordPress

Hay **tres maneras diferentes** de insertar un favicón en WordPress: con el Personalizador de WordPress, con un *plugin* o manualmente. A continuación, te explicamos cada una de estas opciones.

Consejo En este artículo te explicamos cómo insertar un favicón ya creado en WordPress. Puedes crearlo con cualquier programa de diseño gráfico o con nuestro [Favicon Generator](https://www.ionos.com/es-us/tools/crear-favicon "IONOS Favicon Generator").

### Método 1: Personalizador de WordPress

La forma más fácil y rápida de insertar un favicón en WordPress está disponible **desde la versión 4.3** de la plataforma. Con esta herramienta, puedes subir el favicón a WordPress, recortarlo si es necesario y configurarlo en un par de clics.

Si utilizas este método, el tamaño mínimo recomendado para el favicón es de **512 x 512 píxeles**. Sin embargo, en la pestaña del navegador, la imagen se mostrará en un tamaño de 16 x 16 píxeles. Asegúrate de que tu favicón es reconocible con este tamaño. A continuación, te explicamos paso a paso cómo insertar tu favicón con el Personalizador de WordPress.

#### Paso 1: abre el Personalizador

En la barra de opciones de WordPress, **haz clic en “Apariencia” (“Appearance”) y luego en “Personalizar” (“Customize”).**

[![Imagen: Personalizador para añadir favicones a WordPress en el menú](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/b/6/csm_favicon-wordpress-1_8c8880a4ea.webp "Personalizador para añadir favicones a WordPress en el menú")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-1.png) Personalizador para añadir favicones a WordPress en el menú #### Paso 2: abre la opción “Identidad del sitio web”

Selecciona la **opción “Identidad del sitio web” (“Site Identity”)**.

[![Imagen: Favicón en WordPress: “Site Identity” en el personalizador de WordPress](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/c/7/csm_favicon-wordpress-2_3ee396fba0.webp "Favicón en WordPress: “Site Identity” en el personalizador de WordPress")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-2.png) Favicón en WordPress: “Site Identity” en el personalizador de WordPress #### Paso 3: selecciona tu favicón

En este apartado podrás configurar **el título y el subtítulo** de tu página web. Esta información se encontrará junto al favicón en la pestaña del navegador. En el apartado “Icono del sitio” (“Site Icon”), haz clic en el **botón “Seleccionar imagen” (“Select site icon”)** para personalizar tu favicón de WordPress.

[![Imagen: Añadir un favicón a WordPress: menú del Personalizador](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/7/2/csm_favicon-wordpress-3_5c191df653.webp "Añadir un favicón a WordPress: menú del Personalizador")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-3.png) Añadir un favicón a WordPress: menú del Personalizador #### Paso 4: selecciona tu favicón

A continuación, se abrirá la **mediateca de WordPress**. Si ya has subido tu favicón, selecciónalo. De lo contrario, haz clic en la pestaña “Seleccionar archivos” (“Select Files”) y selecciona el archivo que quieras de tu ordenador. Confirma tu selección haciendo clic en “Select”.

[![Imagen: Mediateca de WordPress: botón para insertar el favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/e/c/csm_favicon-wordpress-4_a120f5827c.webp "Mediateca de WordPress: botón para insertar el favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-4.png) Mediateca de WordPress: botón para insertar el favicón #### Paso 5: recorta tu favicón

Después, tendrás la posibilidad de **recortar la imagen**. WordPress muestra automáticamente una vista previa actual del favicón en la parte derecha. Cuando hayas ajustado el recorte, confírmalo con el botón “Recortar imagen” (“Crop Image”). Si tu favicón ya tiene el formato adecuado, pulsa en “No recortar” (“Skip Cropping”).

[![Imagen: Menú para recortar el favicón de WordPress](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/3/0/csm_favicon-wordpress-5_330e46880a.webp "Menú para recortar el favicón de WordPress")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-5.png) Menú para recortar el favicón de WordPress **WordPress insertará el favicón automáticamente**. Si en un futuro deseas cambiarlo, vuelve a esta sección de ajustes.

### Método 2: insertar un favicón con plugin

WordPress ofrece un *plugin* para casi cualquier cosa, incluida la inserción de favicones. Uno de los *plugins* gratuitos más populares es **Favicon by RealFaviconGenerator**. Comparado con el Personalizador de WordPress, este ofrece **opciones de configuración adicionales** para mejorar la compatibilidad del favicón con diferentes dispositivos y aplicaciones. A continuación, te explicamos cómo configurar un favicón en WordPress con este *plugin*.

#### Paso 1: instala el plugin

En el menú de WordPress, abre la sección “Plugins” y luego haz clic en “Añadir nuevo” (“Add new”).

[![Imagen: Instalación del plugin para insertar un favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/4/4/csm_favicon-wordpress-6_6dc49fbe23.webp "Instalación del plugin para insertar un favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-6.png) Instalación del plugin para insertar un favicón Busca el *plugin* Favicon by RealFaviconGenerator, selecciónalo en los resultados de búsqueda e instálalo. Luego haz clic en “Activar” y el *plugin* estará listo para usarse.

[![Imagen: Menú de instalación del plugin de WordPress Favicon by RealFaviconGenerator](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/6/2/csm_favicon-wordpress-7_0a434f5dd1.webp "Menú de instalación del plugin de WordPress Favicon by RealFaviconGenerator")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-7.png) Menú de instalación del plugin de WordPress Favicon by RealFaviconGenerator #### Paso 2: abre la configuración del plugin

Una vez instalado el *plugin*, ve al menú y haz clic en “Apariencia” (“**Appearance**”) y luego en “**Favicon**”. Aquí encontrarás la configuración del *plugin*.

[![Imagen: Configurar el favicón en WordPress con un plugin](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/3/a/csm_favicon-wordpress-8_5a6e0cb2ae.webp "Configurar el favicón en WordPress con un plugin")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-8.png) Configurar el favicón en WordPress con un plugin #### Paso 3: selecciona el favicón

Haz clic en “Seleccionar de la biblioteca multimedia” (“**Select from the Media Library**”) para abrir la mediateca de WordPress y selecciona la imagen de tu favicón. El favicón debe tener como mínimo un tamaño de 70 x 70 píxeles, pero se recomienda que tenga 260 x 260 píxeles o más. Después de haber seleccionado la imagen, confirma tu selección haciendo clic en el **botón “Generar favicón”** (“Generate favicon”).

[![Imagen: Favicon by RealFaviconGenerator: ventana para elegir tu favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/a/0/csm_favicon-wordpress-9_c9c92a9b43.webp "Favicon by RealFaviconGenerator: ventana para elegir tu favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-9.png) Favicon by RealFaviconGenerator: ventana para elegir tu favicón #### Paso 4: confirma la inserción del favicón

El *plugin* te redirigirá automáticamente a tu página web. Cuando la imagen se haya cargado, dispondrás también de algunos **ajustes opcionales**. Si quieres, puedes ajustar la visualización del favicón para el navegador de escritorio, para los resultados de búsqueda de Google o para diferentes formatos de *smartphone*.

[![Imagen: Favicon by RealFaviconGenerator: nenú para personalizar el favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/7/e/csm_favicon-wordpress-10_9df41b5cbf.webp "Favicon by RealFaviconGenerator: nenú para personalizar el favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-10.png) Favicon by RealFaviconGenerator: nenú para personalizar el favicón Si has realizado todos los ajustes o quieres saltarte los restantes, haz clic en el botón “Generar favicón y código HTML” (“**Generate your Favicons and HTML code**”) al final de la página.

[![Imagen: Favicon by RealFaviconGenerator: ventana para crear el favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/6/9/csm_favicon-wordpress-11_a114a2d4cd.webp "Favicon by RealFaviconGenerator: ventana para crear el favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-11.png) Favicon by RealFaviconGenerator: ventana para crear el favicón El *plugin* te redirigirá de nuevo al ***backend*** y **confirmará la instalación** del favicón en WordPress.

[![Imagen: Favicon by RealFaviconGenerator: mensaje que informa de que la instalación ha sido completada](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/f/a/csm_favicon-wordpress-12_0deba71d6b.webp "Favicon by RealFaviconGenerator: mensaje que informa de que la instalación ha sido completada")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-12.png) Favicon by RealFaviconGenerator: mensaje que informa de que la instalación ha sido completada ### Método 3: insertar un favicón a mano

En muchos casos, WordPress también ofrece la posibilidad de hacer los ajustes manualmente. Por lo tanto, también se puede añadir un favicón a WordPress a través del **Protocolo de transferencia de archivos (FTP)**. Para esto necesitarás un paquete de favicón con diferentes archivos y un código HTML. En la red, dispones de muchas herramientas online gratuitas para crearlos.

#### Paso 1: crea los archivos para tu favicón

Abre cualquier **herramienta online para generar favicones**. En este ejemplo, utilizamos [Real Favicon Generator](https://realfavicongenerator.net/ "Favicon Generator"). Haz clic en el botón “Select your Favicon image” para cargar la imagen.

[![Imagen: RealFaviconGenerator: ventana para subir el favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/8/4/csm_favicon-wordpress-13_8735c7daa0.webp "RealFaviconGenerator: ventana para subir el favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-13.png) RealFaviconGenerator: ventana para subir el favicón A continuación, aparecerán una serie de **ajustes opcionales** para cambiar el tamaño de la imagen y su fondo. Realiza los cambios que desees o sáltate este paso y genera el favicón y el código HTML.

[![Imagen: RealFaviconGenerator: menú para crear el favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/5/f/csm_favicon-wordpress-14_1b7a5d9e3f.webp "RealFaviconGenerator: menú para crear el favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-14.png) RealFaviconGenerator: menú para crear el favicón Después tendrás la posibilidad de **descargar el paquete del favicón** y de **copiar el código HTML**. Descarga el paquete y renómbralo “favicon.ico”. De esta manera, el gráfico se reconocerá directamente como favicón.

[![Imagen: RealFaviconGenerator: código HTML del favicón](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/7/0/csm_favicon-wordpress-15_ded885a100.webp "RealFaviconGenerator: código HTML del favicón")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/favicon-wordpress-15.png) RealFaviconGenerator: código HTML del favicón #### Paso 2: sube el paquete del favicón por FTP

Accede a los datos de WordPress a través del FTP. Abre el **directorio raíz** y sube allí el paquete del favicón. Asegúrate de que se encuentra en la misma carpeta que la carpeta WP Admin y la carpeta WP Content.

#### Paso 3: inserta el código HTML

Después, abre el **archivo *header.php*** e inserta el código HTML del favicón en la parte del encabezado. Asegúrate de que tu dominio y la ruta del favicón estén especificados correctamente.

Consejo Un [**alojamiento WordPress**](https://www.ionos.com/es-us/alojamiento/wordpress-hosting "Hosting para WordPress de IONOS") **profesional** garantiza un comienzo fácil en la plataforma, brinda confianza y pone a tu alcance copias de seguridad automáticas para tu sitio web.


This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/hosting/blogs/anadir-un-favicon-a-wordpress/](https://www.ionos.com/es-us/digitalguide/hosting/blogs/anadir-un-favicon-a-wordpress/) for AI/LLM consumption.