---
title: "Cómo personalizar los iconos principales de tu tienda | App de tienda online - Tutoriales - GoodBarber"
description: "Hoy vamos a aprender a personalizar los íconos de tu aplicación.\r \r Este es un paso obligatorio para generar tu aplicación.\r \r El icono es un elemento visual clave de tu aplicaci…"
canonical_url: "https://es.goodbarber.com/tutorials/shop/diseno/como-personalizar-los-iconos-principales-de-tu-tienda/"
lang: es
---

# Cómo personalizar los iconos principales de tu tienda | App de tienda online - Tutoriales - GoodBarber

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

# Cómo personalizar los iconos principales de tu tienda

Hoy vamos a aprender a personalizar los íconos de tu aplicación.

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

El icono es un elemento visual clave de tu aplicación. Los navegadores web lo utilizarán como favicon, que se mostrará en las notificaciones push para identificar al remitente, en la pantalla de inicio del dispositivo de tus usuarios.

Para configurar los iconos, vayamos al menú Contenido y diseño, Diseño, diseño general

Abrir el menú de icono

Puedes utilizar el asistente o crear un icono completamente personalizado

Empezaremos por el asistente

Aquí puedes agregar texto o un logotipo

Por ejemplo, quiero mostrar las iniciales de mi tienda Urban Shango. Todo lo que necesito para ingresarlos en el cuadro de texto

Voila

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

Vamos a ceñirnos al 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 unSpash del back office o de mi computadora.

Eso es lo que voy a hacer

¡Y listo, mi icono 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 sus clientes.

¡Perfecto!

Haga clic en generar y confirme las modificaciones

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

Eso fue fácil, ¿no?

Probemos ahora la opción personalizada

Ahora, eso no podría ser más fácil. Simplemente carga el ícono del tour ya creado (en los tamaños requeridos)

¡Y ya está!

Ahora sabes cómo personalizar el icono de tu aplicación

¡Nos vemos muy pronto en otro tutorial!

## Vídeos similares

[DiseñoCómo configurar tu menú de navegación](/tutorials/shop/diseno/como-configurar-tu-menu-de-navegacion/)

![Cómo configurar tu menú de navegación](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

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

![Cómo personalizar los iconos del menú](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

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

![Cómo configurar la página de inicio de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DiseñoCómo personalizar tu pantalla de bienvenida](/tutorials/shop/diseno/como-personalizar-tu-pantalla-de-bienvenida/)

![Cómo personalizar tu pantalla de bienvenida](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

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

![Cómo configurar el encabezado de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

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

![Cómo configurar el estilo global de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DiseñoCómo diseñar las secciones de tu tienda](/tutorials/shop/diseno/como-disenar-las-secciones-de-tu-tienda/)

![Cómo diseñar las secciones de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

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

![Cómo desenganchar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/shop/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)