---
title: "Sovelluksen tärkeimpien kuvakkeiden mukauttaminen | Oppaat - GoodBarber"
description: "Hei ja tervetuloa uuteen GoodBarber-oppaaseen\r \r Tänään opettelemme mukauttamaan sovelluksen kuvakkeita\r \r Tämä on pakollinen vaihe sovelluksen luomiseksi\r \r Kuvake on sovelluksesi keskeinen visuaali…"
canonical_url: "https://fi.goodbarber.com/tutorials/design/sovelluksen-tarkeimpien-kuvakkeiden-mukauttaminen/"
lang: fi
---

# Sovelluksen tärkeimpien kuvakkeiden mukauttaminen | Oppaat - GoodBarber

[Takaisin](https://fi.goodbarber.com/tutorials/)

# Sovelluksen tärkeimpien kuvakkeiden mukauttaminen

Hei ja tervetuloa uuteen GoodBarber-oppaaseen

Tänään opettelemme **mukauttamaan sovelluksen kuvakkeita**

Tämä on pakollinen vaihe sovelluksen luomiseksi

Kuvake on sovelluksesi keskeinen visuaalinen elementti. Sitä käytetään verkkoselaimissa faviconina, sitä näytetään push-ilmoituksissa lähettäjän tunnistamiseksi ja se näkyy käyttäjien laitteen aloitusnäytössä.

Kuvakkeiden määrittämiseksi mennään valikkoon **Minun sovellus > Suunnittelu > Yleinen suunnittelu**

Avaa kuvakevalikko

Voit käyttää avustajaa tai luoda täysin oman kuvakkeen

Aloitamme avustajasta

Tässä voit lisätä tekstiä tai logon

Haluan esimerkiksi näyttää kylpyläni nimikirjaimet Freyja. Minun tarvitsee vain syöttää ne tekstikenttään
.
Voila

Jos haluan logon, minun tarvitsee vain napsauttaa tällaista välilehteä ja ladata haluamani kokoinen kuva

Pidetään’kiinni tekstistä

Oikeanpuoleisessa valikossa voin asettaa fontin, tekstin värin ja tehosteet

Sitten luon kuvakkeeni taustan: värin tai kuvan unSplash-kirjastosta taustatoimistosta tai omalta tietokoneeltani.

Tämä on se, mitä aion tehdä

Ja voila, kuvakkeeni on valmis!

Minun täytyy nyt vain muokata sovellukseni otsikkoa, joka näkyy asiakkaiden laitteiden aloitusnäytöllä

Täydellinen!

Klikkaa generate ja vahvista muutokset

Ikonat luodaan automaattisesti haluttuun muotoon kaikkia mahdollisia käyttötarkoituksia varten.

Ei ollut helppoa?

Kokeillaan nyt mukautettua vaihtoehtoa
Nyt se ei voisi'olla enää helpompaa. Lataa yksinkertaisesti jo luotu kuvake (halutun kokoisena)

Ja se’on valmis!

Tiedät nyt, miten voit muokata sovelluksen kuvaketta

Näemme hyvin pian uudessa tutorialissa!

## Samanlaisia videoita

[SuunnitteluMiten otsikko asetetaan](/tutorials/design/miten-otsikko-asetetaan/)

![Miten otsikko asetetaan](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[SuunnitteluSovelluksen globaalin tyylin määrittäminen](/tutorials/design/sovelluksen-globaalin-tyylin-maarittaminen/)

![Sovelluksen globaalin tyylin määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[SuunnitteluSovelluksen aloitusnäytön mukauttaminen](/tutorials/design/sovelluksen-aloitusnayton-mukauttaminen/)

![Sovelluksen aloitusnäytön mukauttaminen](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[SuunnitteluSovelluksen navigointitilan määrittäminen](/tutorials/design/sovelluksen-navigointitilan-maarittaminen/)

![Sovelluksen navigointitilan määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[SuunnitteluValikon kuvakkeiden mukauttaminen](/tutorials/design/valikon-kuvakkeiden-mukauttaminen/)

![Valikon kuvakkeiden mukauttaminen](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[SuunnitteluKuinka suunnitella osiot](/tutorials/design/kuinka-suunnitella-osiot/)

![Kuinka suunnitella osiot](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[SuunnitteluKuinka kopioida osion muotoilu](/tutorials/design/kuinka-kopioida-osion-muotoilu/)

![Kuinka kopioida osion muotoilu](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[SuunnitteluKotisivun määrittäminen](/tutorials/design/kotisivun-maarittaminen/)

![Kotisivun määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[SuunnitteluMiten valita otsikon koko ?](/tutorials/design/miten-valita-otsikon-koko/)

![Miten valita otsikon koko ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[SuunnitteluSovelluksen taustan mukauttaminen](/tutorials/design/sovelluksen-taustan-mukauttaminen/)

![Sovelluksen taustan mukauttaminen](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)