---
title: "Cómo personalizar los iconos principales de tu app | Tutoriales - GoodBarber"
description: "Hola y bienvenido a tu nuevo tutorial de GoodBarber.\r \r Hoy vamos a aprender a personalizar los iconos de la aplicación.\r \r Este es un paso obligatorio para generar tu aplicación.\r \r El…"
canonical_url: "https://es.goodbarber.com/tutorials/diseno/como-personalizar-los-iconos-principales-de-tu-app/"
lang: es
---

# Cómo personalizar los iconos principales de tu app | Tutoriales - GoodBarber

[Atrás](https://es.goodbarber.com/tutorials/)

# Cómo personalizar los iconos principales de tu app

Hola y bienvenido a tu nuevo tutorial de GoodBarber.

Hoy vamos a aprender a personalizar los **iconos de la aplicación.**

Este es un paso obligatorio para generar tu aplicación.

El ícono es un elemento visual clave de tu aplicación. Los navegadores web lo utilizarán como favicon, se mostrará en las notificaciones automáticas para identificar al remitente, en la pantalla de inicio del dispositivo de tu usuario.

Para configurar los íconos, vamos al menú **Mi app > Diseño > diseño general**

Abre el menú de iconos

Puedes usar el asistente o crear un icono completamente personalizado

Comenzaremos con el asistente.

Aquí puedes agregar texto o un logotipo

Por ejemplo, quiero mostrar las iniciales de mi spa Freyja. Todo lo que necesito hacer es ingresarlos en el cuadro de texto
Voilá

Si prefiero un logotipo, simplemente debo hacer clic en la pestaña como esta y cargar una imagen en las dimensiones requeridas

Sigamos con el texto

En el menú del lado derecho, puedo configurar la fuente, el color del texto y los efectos.

Luego creo el fondo de mi icono: un color o una imagen de la biblioteca unSplash del back office o de mi computadora.

eso es lo que voy a hacer

¡Y listo, mi ícono está listo!

Todo lo que necesito ahora es editar el título de mi aplicación, que se mostrará en la pantalla de inicio de los dispositivos de tus clientes

¡Perfecto!

Haz clic en generar y confirma las modificaciones.

Los iconos se generan automáticamente en el formato requerido para todos los usos posibles.

Fue fácil no?

Ahora probemos la opción personalizada
Esto no podría ser más fácil. Simplemente carga el ícono del recorrido ya creado (en los tamaños requeridos)

¡Y ya está!

Ahora sabes cómo personalizar el ícono de tu aplicación

¡Nos vemos muy pronto para otro tutorial!

## Vídeos similares

[DiseñoCómo configurar tu encabezado](/tutorials/diseno/como-configurar-tu-encabezado/)

![Cómo configurar tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DiseñoCómo configurar el estilo global de tu aplicación](/tutorials/diseno/como-configurar-el-estilo-global-de-tu-aplicacion/)

![Cómo configurar el estilo global de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DiseñoCómo personalizar la pantalla de bienvenida de tu aplicación](/tutorials/diseno/como-personalizar-la-pantalla-de-bienvenida-de-tu-aplicacion/)

![Cómo personalizar la pantalla de bienvenida de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DiseñoCómo configurar el modo de navegación de tu aplicación](/tutorials/diseno/como-configurar-el-modo-de-navegacion-de-tu-aplicacion/)

![Cómo configurar el modo de navegación de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DiseñoCómo personalizar los iconos de tu menú](/tutorials/diseno/como-personalizar-los-iconos-de-tu-menu/)

![Cómo personalizar los iconos de tu menú](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DiseñoCómo diseñar sus secciones](/tutorials/diseno/como-disenar-tus-secciones/)

![Cómo diseñar sus secciones](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DiseñoCómo copiar el diseño de una sección](/tutorials/diseno/como-copiar-el-diseno-de-una-seccion/)

![Cómo copiar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DiseñoCómo configurar tu página de inicio](/tutorials/diseno/como-configurar-tu-pagina-de-inicio/)

![Cómo configurar tu página de inicio](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/diseno/como-elegir-el-tamano-de-tu-encabezado/)

![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DiseñoCómo modificar el fondo de tu aplicación](/tutorials/diseno/como-modificar-el-fondo-de-tu-aplicacion/)

![Cómo modificar el fondo de tu aplicación](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)