Cómo agregar un favicon a WordPress

Agregar un favicon a WordPress se realiza a través de la función de icono de sitio incorporada de WordPress. Normalmente no es necesario crear un archivo favicon.ico, editar los archivos de su tema o instalar un complemento de favicon. En WordPress, el favicon se llama icono del sitio. Puede agregar uno desde Configuración general en WordPress 6.5 y versiones posteriores. Las versiones anteriores de WordPress usan el Personalizador, mientras que los temas de bloque también pueden administrar el ícono a través del bloque Logotipo del sitio.

Antes de comenzar, prepare una imagen cuadrada de al menos 512 × 512 píxeles. WordPress recomienda PNG para el icono del sitio.

¿Cómo se agrega un Favicon a WordPress?

Para WordPress 6.5 y versiones posteriores, WordPress movió la configuración del icono del sitio a Configuración general. Este es el método principal a utilizar en las instalaciones actuales de WordPress.

1. Inicie sesión en su panel de WordPress: Abra su área de administración de WordPress e inicie sesión. Necesita acceso de nivel de administrador o permisos suficientes para cambiar la configuración del sitio.
2. Abra Configuración general: Desde el panel de WordPress, abra Configuración → General.
3. Busque la configuración del icono del sitio: Busque la sección Icono del sitio. Deberías ver una opción etiquetada Elija un icono de sitio.
4. Sube o selecciona tu favicon: Haga clic Elija un icono de sitio. WordPress le permitirá seleccionar una imagen de su biblioteca multimedia o cargar la imagen preparada. Elija su imagen de favicon cuadrada (al menos 512 × 512 píxeles, se recomienda PNG).
5. Confirma la imagen: Después de seleccionar la imagen, revisa la vista previa cuidadosamente. Asegúrese de que esté seleccionada la imagen correcta, que la parte importante de su diseño esté visible, que el ícono no sea innecesariamente complicado y que la imagen sea cuadrada. Si la imagen contiene un logotipo con texto muy pequeño, considere preparar una versión simplificada antes de usarla como ícono del sitio.
6. Guarde el icono del sitio: Guarde los cambios de configuración general. El ícono del sitio ahora está asociado con su sitio web de WordPress.
7. Abra el sitio web en vivo: Abra su sitio web en una nueva pestaña del navegador. Marque el ícono al lado del título de la página. No juzgues el resultado sólo desde la pantalla de administración de WordPress. La verdadera prueba es el sitio web publicado en un navegador.

¿Dónde está la configuración de Favicon en WordPress?

La ubicación depende principalmente de su versión de WordPress y de la configuración del tema.

¿Dónde está la configuración de Favicon en WordPress 6.5 y posteriores?

Para WordPress 6.5 y posteriores, utilice:

Administrador de WordPress → Configuración → General → Icono del sitio

WordPress movió el ícono del sitio del Personalizador a la Configuración general en WordPress 6.5. Esta es la ruta estándar actual.

¿Dónde estaba la configuración de Favicon en versiones anteriores de WordPress?

En las versiones de WordPress 4.3 a 6.4, el ícono del sitio se administraba a través del Personalizador:

Administrador de WordPress → Apariencia → Personalizar → Identidad del sitio → Icono del sitio

Luego seleccionó o cargó una imagen cuadrada de al menos 512 × 512 píxeles. Esto explica por qué los tutoriales de WordPress más antiguos pueden mostrar una ruta de navegación diferente. Si su panel no coincide con esas instrucciones, primero verifique su versión de WordPress antes de asumir que la función ha desaparecido.

¿Dónde está la configuración de Favicon en un tema de bloque?

Los temas de bloque proporcionan otro flujo de trabajo a través del Editor del sitio. El bloque Logotipo del sitio incluye un Usar como icono del sitio opción. Cuando está habilitado, la imagen asignada al bloque Logotipo del sitio también se utiliza como icono del sitio. Esto es especialmente relevante cuando trabajas con un tema de bloque moderno y pasas la mayor parte del tiempo en Apariencia → Editor.

¿Cómo se agrega un Favicon con un tema de bloque de WordPress?

Un tema de bloque puede administrar el ícono del sitio a través del bloque Logotipo del sitio.

1. Abra Apariencia → Editor: Desde su panel de WordPress, vaya a Apariencia → Editor. Esto abre el Editor del sitio de WordPress para un tema de bloque.
2. Busque o agregue el bloque Logotipo del sitio: Es posible que su tema ya tenga un bloque de logotipo del sitio en su encabezado. Selecciónelo. Si no existe ninguno, agregue un bloque de logotipo del sitio a través del insertador de bloques. La documentación de WordPress explica que el bloque se puede insertar en plantillas en el Editor del sitio.
3. Añade tu imagen: Seleccione el bloque Logotipo del sitio y cargue una imagen o elija una de la Biblioteca multimedia.
4. Abra la configuración del bloque: Con el bloque Logotipo del sitio seleccionado, abra la barra lateral de configuración. busca el Usar como icono del sitio opción.
5. Habilite "Usar como ícono del sitio": encender Usar como icono del sitio. WordPress utilizará esa imagen como icono del sitio.
6. Guarde sus cambios: Guarde los cambios en el Editor del sitio, luego abra el sitio web en vivo y verifique la pestaña del navegador.

El logotipo del sitio y el ícono del sitio también pueden ser diferentes. WordPress documenta un flujo de trabajo de logotipo del sitio donde el logotipo se puede usar para configurar inicialmente el ícono y luego se puede seleccionar un ícono del sitio diferente.

¿Cómo se crea un Favicon para WordPress?

Tienes varias formas de crear la imagen antes de subirla.

¿Cómo se crea un Favicon a partir de su logotipo?

Comience con el logotipo de su marca existente. Si el logotipo ya es un símbolo cuadrado simple, es posible que solo necesite cambiar su tamaño y exportarlo. Si el logo es horizontal, simplifícalo primero. Elimine el texto innecesario o utilice la parte más reconocible del logotipo. No traduzca el logotipo ni modifique el nombre de la marca como parte del proceso de creación del favicon. Preserva la identidad de marca original mientras adaptas la obra de arte a un formato cuadrado pequeño.

¿Cómo se crea un favicon a partir de iniciales o texto?

Un favicon puede usar una o dos letras en lugar de un logotipo completo. Por ejemplo, una empresa llamada North Star Digital podría utilizar NS en lugar de intentar incluir el nombre completo en el icono. Utilice caracteres grandes y legibles con suficiente contraste.

¿Cómo se convierte un PNG en un Favicon?

Si ya tiene una imagen PNG, puede utilizar una herramienta de conversión de favicon para preparar una versión de favicon. Por ejemplo, PNGtoFavicon.com puede convertir un PNG existente en una obra de arte de favicon. Esto es útil cuando ya tienes un logotipo o icono adecuado pero necesitas preparar una versión de favicon antes de subirlo a WordPress. Después de la conversión, verifique la imagen resultante en un tamaño pequeño antes de usarla como ícono de su sitio.

El requisito importante de WordPress sigue siendo el mismo: la imagen debe ser cuadrada y tener al menos 512 × 512 píxeles.

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

WordPress requiere que el ícono del sitio sea cuadrado, de al menos 512 × 512 píxeles, y recomienda el formato PNG. Estos son los requisitos documentados actuales de WordPress.

No confunda el tamaño de la imagen que carga con el tamaño con el que el navegador finalmente muestra el favicon. Un navegador puede mostrar el icono en un tamaño mucho más pequeño que la imagen cargada original. Por eso es importante comenzar con una imagen limpia y suficientemente grande.

¿Cómo puedes comprobar si tu Favicon de WordPress está funcionando?

Después de guardar el ícono del sitio, consulte el sitio web en vivo.

• Consulta la pestaña del navegador: Abra su sitio web y mire la pestaña del navegador. El icono del sitio debería aparecer junto al título de la página. Esta es la forma más sencilla de confirmar que su sitio web proporciona el favicon.
• Consultar un marcador: Agregue el sitio web a favoritos y verifique si el ícono aparece al lado del marcador. Los favicons también se pueden utilizar en el historial del navegador y en otras interfaces del navegador.
• Pruebe el sitio en una ventana privada o de incógnito: Si su antiguo favicon aún está visible, abra el sitio web en una ventana privada o de incógnito. Esto le brinda una prueba más limpia porque es posible que su sesión normal de navegador aún tenga el favicon anterior en caché.
• Pruebe otro navegador: Abra el sitio web en un segundo navegador. Si el nuevo favicon aparece allí pero no en su navegador principal, es posible que la configuración de WordPress ya sea correcta y que el problema restante sea el almacenamiento en caché del navegador.
• Verifique el dominio en vivo: Asegúrese de visitar el dominio publicado correcto. No pruebes accidentalmente un sitio web provisional, una instalación de desarrollo, un dominio antiguo o una instalación diferente de WordPress.

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

La falta de un favicon no significa automáticamente que la carga del icono del sitio haya fallado. Varios problemas diferentes pueden provocar el mismo resultado.

¿Cómo se borra la caché del navegador o de WordPress después de cambiar un Favicon?

El almacenamiento en caché debe comprobarse sólo después de confirmar que el icono del sitio realmente se guardó. Utilice esta secuencia:

1. Confirme que el ícono del sitio sea correcto en WordPress.
2. Guarde el cambio.
3. Purgue la memoria caché del complemento de almacenamiento en caché de WordPress, si hay uno instalado.
4. Purgue la caché de su CDN, si su sitio web utiliza una CDN.
5. Abra el sitio web en una ventana privada o de incógnito.
6. Pruebe el sitio web en otro navegador.
7. Verifique el favicon en la pestaña del navegador.

Esto separa el problema de configuración de WordPress del problema del almacenamiento en caché. No reemplace repetidamente el favicon simplemente porque su navegador continúa mostrando la imagen anterior.

¿Cómo se cambia o reemplaza un favicon de WordPress?

Reemplazar un ícono de sitio es similar a agregar uno.

Para WordPress 6.5 y posteriores

• Inicie sesión en WordPress.
• Vaya a Configuración → General.
• Buscar icono del sitio.
• Elija una imagen diferente de la Biblioteca multimedia o cárguela.
• Confirma la imagen.
• Guarde la configuración.
• Abra el sitio web en vivo y verifique la pestaña del navegador.

La documentación actual de WordPress coloca el ícono del sitio en Configuración general para WordPress 6.5 y versiones posteriores.

Para versiones anteriores de WordPress

En WordPress 4.3 a 6.4, use Apariencia → Personalizar → Identidad del sitio → Icono del sitio, luego seleccione la imagen de reemplazo y guarde los cambios.

¿Cómo se elimina un Favicon de WordPress?

El proceso de eliminación depende de si estás usando la Configuración general, el Personalizador o un tema de bloque.

Eliminar el ícono del sitio de WordPress actual

Abra los controles del icono del sitio en Configuración → General y utilice el control de eliminación o reemplazo disponible proporcionado por su instalación de WordPress. Debido a que las interfaces de WordPress pueden variar entre versiones y temas, no confíe en el nombre de un botón específico de un tutorial anterior.

Eliminar el ícono del sitio del Personalizador

Las instalaciones anteriores de WordPress administran el ícono a través de Apariencia → Personalizar → Identidad del sitio. El panel Identidad del sitio contiene el control Icono del sitio y permite cambiar o eliminar la imagen.

Eliminar el ícono del sitio de un tema de bloque

Los temas de bloque pueden usar el bloque Logotipo del sitio para controlar el Icono del sitio. Abierto Apariencia → Editor, seleccione el bloque Logotipo del sitio y revise su imagen y la configuración del Icono del sitio. Eliminar la imagen del bloque del logotipo del sitio y eliminar el ícono del sitio no son necesariamente la misma operación, así que verifique la configuración del ícono del sitio cuando su objetivo sea específicamente eliminar el favicon.

¿Puedes agregar un Favicon de WordPress con código?

Sí, pero la codificación suele ser innecesaria. WordPress tiene una funcionalidad de ícono de sitio incorporada, por lo que los sitios web normales deberían usar la configuración incorporada en lugar de agregar manualmente el marcado de favicon a los archivos de temas. WordPress ha proporcionado la función Icono del sitio desde la versión 4.3.

¿Cuándo debería utilizar el icono de sitio integrado de WordPress?

Utilice la opción incorporada cuando esté disponible. Es más simple, más fácil de mantener y evita modificaciones innecesarias en los archivos de temas.

¿Cuándo podría ser necesario un código personalizado?

El código personalizado puede tener sentido para un tema personalizado o una implementación especializada donde los controles integrados no proporcionan el comportamiento requerido. Antes de editar el código del tema, determine si el tema existente ya admite la función Icono del sitio. No agregue una segunda implementación de favicon simplemente porque no puede encontrar la configuración inmediatamente.

¿Necesita un complemento para agregar un Favicon a WordPress?

No. Normalmente no es necesario un complemento de favicon dedicado. WordPress tiene la funcionalidad de ícono de sitio incorporada y la documentación oficial recomienda usarla en lugar de crear e instalar manualmente una implementación favicon.ico separada. Un complemento puede ser relevante para un requisito especializado, pero instalar uno simplemente para agregar un ícono de sitio estándar agrega una dependencia innecesaria.

Errores comunes que se deben evitar en el Favicon de WordPress

• Usando una imagen no cuadrada: WordPress requiere que el ícono del sitio sea cuadrado.
• Subir una imagen de menos de 512 × 512 píxeles: Prepare el ícono con las dimensiones mínimas requeridas en lugar de comenzar con una imagen fuente pequeña.
• Usando un logo complicado: Un logotipo detallado puede resultar imposible de reconocer cuando se reduce al tamaño de un favicon.
• Hacer el texto demasiado pequeño: Los nombres y eslóganes comerciales largos suelen volverse ilegibles.
• Usando mal contraste: Un favicon de bajo contraste puede desaparecer en la interfaz de un navegador.
• Comenzando con una fuente de baja calidad: Una imagen borrosa o muy comprimida no producirá un resultado limpio.
• Olvidar guardar: Seleccionar una imagen no ayuda si la configuración no se guarda.
• Comprobando solo un navegador: Utilice una ventana privada u otro navegador al verificar un favicon modificado recientemente.
• Logotipo del sitio confuso con el ícono del sitio: Sirven para diferentes propósitos. El logotipo de su sitio aparece dentro del diseño del sitio web, mientras que el ícono del sitio se utiliza como el pequeño ícono del navegador y de la aplicación.
• Editar código innecesariamente: Utilice la funcionalidad de icono de sitio incorporada de WordPress antes de modificar archivos de temas.
• Suponiendo que el favicon falló porque el ícono antiguo permanece visible: El almacenamiento en caché del navegador puede hacer que un cambio exitoso parezca fallido.

Preguntas frecuentes sobre favicones de WordPress

Cómo crear un Favicon antes de subirlo a WordPress

Utilice este flujo de trabajo cuando aún no tenga un ícono de sitio adecuado:

1. Comience con su logotipo, símbolo o iniciales existentes. Mantenga intactos el logotipo original y la identidad de la marca.
2. Simplifique la obra de arte para que siga siendo reconocible cuando se muestre en un tamaño muy pequeño.
3. Crea un lienzo cuadrado.
4. Haga que la imagen tenga al menos 512 × 512 píxeles.
5. Exportarlo como PNG.
6. Verifique el ícono en tamaños de pantalla pequeños.
7. Convierta un PNG existente en una ilustración de favicon cuando sea necesario.
8. Cargue la imagen terminada en WordPress como ícono del sitio.

Conclusión

Para agregar un favicon a WordPress, prepare una imagen cuadrada de al menos 512 × 512 píxeles, luego abra Configuración → General → Icono del sitio en WordPress 6.5 y versiones posteriores. Seleccione o cargue la imagen, guarde la configuración y consulte el sitio web en vivo en un navegador. Las instalaciones más antiguas de WordPress usan Apariencia → Personalizar → Identidad del sitio, mientras que los temas de bloque también pueden administrar el ícono a través del bloque Logotipo del sitio. Si el nuevo favicon no aparece inmediatamente, verifique el almacenamiento en caché del navegador, WordPress, CDN o servidor antes de asumir que la carga falló.