Depois que você começa a brincar um pouco mais com Ionic, a necessidade de deixar o App mais bonitinho vai aparecendo. Se você ja gerou o apk do seu aplicativo, deve ter se perguntado como altera a Splash Screen e o ícone do seu App…
Splash Screen é a tela de carregamento inicial do seu App, portanto uma das primeiras impressões que o usuário vai ter do seu App.
Cada celular dispositivo tem dimensões diferentes e portanto deve ter um splash Screen diferente.
O Ionic tem uma solução bem interessante para isso, mas primeiro vamos encontrar o local da Splash Screen dentro dos diretórios do seu App.
Dentro da pasta do seu projeto acesse a pasta resources. Nela já vem uma imagem padrão para a Splash Screen e para o ícone.
Prefere aprender em vídeo?
Como cada plataforma tem diferentes requisitos para as imagens de Splash Screen e ícone, é melhor fazer uma imagem com o maior tamanho necessário e deixar o o Ionic fazer o resto.
Na documentação do Ionic, tem um PSD template para a Splash Screen.
Mas, para te ajudar eu já criei uma Splash Screen com as medidas certas que você pode baixar aqui.
Delete a imagem splash.png que está dentro da pasta resources do seu projeto. Depois coloque a que você quer usar com o mesmo nome (também poderia ser uma splash.psd ou splash.ai).
No prompt de comando, navegue até a pasta do seu projeto. Depois digite o seguinte comando:
ionic resources --splash
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --splash
Você precisa de internet. Ele vai fazer upload do seu arquivo, gerar uma para cada tamanho necessário e já colocar dentro da pasta. Demais não é?
Para testar, você deve estar usando um emulador ou rodando no próprio celular.
Para mudar o ícone o processo é praticamente igual ao da Splash Screen Ionic. Você pode baixar aqui o template da própria documentação do Ionic, ou baixar o meu ícone já pronto.
Depois vamos lá na pasta resources de novo, deletamos o arquivo icon.png e colocamos o que acabamos de baixar.
Mais uma vez no prompt, digite o comando:
ionic resources --icon
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --icon
Curtiu? Mole né? Em breve uma série de Ionic com apps completos do início ao fim!
Aproveita e curte minha página, para ver os posts em primeira mão!
[wpdevart_like_box profile_id=”514623068560386″ connections=”show” width=”300″ height=”550″ header=”small” cover_photo=”show” locale=”pt_BR”]
Foi mês de carnaval, e fazendo essa curadoria eu sempre fico pensativo em quanta coisa…
Comecei o ano de 2026 decidido a ler mais, estudar mais, ser mais focado. Desde…
Ganhei esse livro alguns natais atrás, comecei a ler 2 ou 3 vezes e parei.…
Toda vez que começa um novo ano eu fico pensativo sobre o quão genial é…
E é provavelmente o melhor romance que eu já li. Inclusive eu só descobri -…
Eu acredito muito no poder dos livros, e agora que já faz 5 anos que…
View Comments
Valeu me ajudou! agora tenho uma duvida, no meu app coloquei uma imagem na tela de login, porém quando rodei no dispositivo [ ionic run android --device ] ele abriu sem a imagem, sabe o que poderia ser?
grato
Olá Junior, está usando Ionic 1 ou Ionic 2? Caso seja o Ionic 2, em qual pasta você colocou o arquivo da imagem, e como chamou no seu HTML ou CSS?
Olá @disqus_kf3Pol9CMf:disqus por via das dúvidas, antes de fazer ionic run, faça ionic build android.
Cara eu fiz aqui mas a imagem não sai certa não, fica com as guias do photoshop e o logo não sai do tamanho certo
Danilo, tem uma camada no Photoshop que você tem que ocultar, servem só pra te ajudar, é a icon-cut-guide. Outro detalhe importante é que você tem que deixar seu ícone bem no meio das guias. Dá uma olhada nessa imagem aqui http://prntscr.com/fcagcj
Se não conseguir, manda e-mail para mim pelo contato@andrefelizardo.com.br que a gente bate um papo e te ajudo melhor.
vlw brother!
Bom dia!
Estou tentando alterar apenas o ícone de notificação, mas até o momento não obtive sucesso. A notificação sempre chega com o mesmo ícone atribuído ao aplicativo. Sabe como faço para especificar qual o ícone que deve ser utilizado na notificação?
Olá Tauan. A notificação que você está utilizando é a notificação uma notificação local ou uma push notification?
boa tarde,
gostaria de saber qual o novo comando que substituiu o 'resources' pois no prompt ele me diz que foi renomeado, gostaria de saber para qual.
obrigado.
Olá @icaro_martins:disqus obrigado pelo comentário.
Você deve estar utilizando Ionic 3, correto?
Tente o seguinte comando: ionic cordova resources android por exemplo.
Olá parabéns pelo post. Eu estou tentando executar no cod ionic Cordova resources e continua com o mesmo erro. Saberia pq?
Olá @disqus_lH4rqefAEC:disqus qual versão do Ionic você está utilizando?
Olá @disqus_lH4rqefAEC:disqus qual versão do Ionic você está utilizando?
Olá, fiz um aplicativo de jogo da memória onde vc pode escolher as cartas de seu jogo, utilizei ionic. Publiquei na Playstore e compartilho com vcs: https://play.google.com/store/apps/details?id=com.i9.memoriav1
Parabéns pelo app Ana!