Uma imagem. Todas as telas.

Conversor de PNG para ICO

Ícones pequenos. Uma impressão duradoura.

Converta um PNG em ICO com vários tamanhos. Preserve a transparência, confira as prévias pequenas e baixe os ícones localmente.

PNG ICO PWA

Crie seu pacote de ícones

Transforme sua imagem em favicons, ícones de aplicativos e muito mais.

1Enviar
2Ajustar
3Baixar

Aguardando uma imagem

Arraste e solte sua imagem aqui

PNG · Até 5 MB

Sua imagem é processada no navegador e nunca sai do seu dispositivo.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Ajustar o ícone

Ajuste o visual para cada tela.

Ajuste da imagem

Fundo

Transparente

Cor sólida

#FFFFFF

Margem interna6%

Raio dos cantos0%

Tamanhos ICO (você pode selecionar vários)

256

Ícones adaptáveis

Ver em contexto(envie uma imagem para ver seu ícone)

Aba do navegador

https://example.com

Tela inicial do iOS

Seu ícone aqui

PWA / Android

Seu ícone aqui

Como fazer um favicon em 3 etapas

De uma imagem para um conjunto completo de ícones.

1Envie sua imagem

Converta um PNG em ICO com vários tamanhos. Preserve a transparência, confira as prévias pequenas e baixe os ícones localmente.

2Ajustar e visualizar

Escolha o ajuste, o fundo e a margem interna. Confira o resultado em tamanhos pequenos.

3Baixe e adicione ao seu site

Exporte o pacote de ícones, envie os arquivos e adicione os links dos ícones ao HTML.

Um logotipo, pronto para cada tela

Veja onde os arquivos gerados são usados.

Favicon do site

Meu Site×

16 × 16

32 × 32

Ícones de 16 × 16 e 32 × 32 ajudam os visitantes a reconhecer seu site nas abas e nos favoritos.

iPhone & iPad

Meu Site

180 × 180

Use um ícone apple-touch de 180 × 180 quando seu site for adicionado à tela inicial.

PWA & Android

Instalar aplicativo

192 × 192

512 × 512

Imagens de 192 × 192 e 512 × 512 são tamanhos comuns em manifestos de aplicativos web.

O que há no seu pacote de ícones?

Um conjunto de ícones pronto para usar em todas as plataformas.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestManifesto do aplicativo web

Adicionar ícones ao seu site

Coloque estes links no <head> do seu HTML.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Extraia o pacote em public/ na raiz do projeto Nuxt. Mantenha os nomes e coloque site.webmanifest junto de favicon.ico, não dentro de app/.
Adicione o código ao bloco script setup de app/app.vue. Substitua os links de ícones antigos, faça um novo build e publique seu projeto.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Abra /favicon.ico, /apple-touch-icon.png e /site.webmanifest no seu site. Confira respostas bem-sucedidas e conteúdo real de imagem ou JSON; uma resposta 200 com página de erro HTML também indica caminho errado. Confira cada URL de ícone do manifesto.

Se o ícone antigo continuar, confira links duplicados no head, desative o cache nas ferramentas do navegador e recarregue. Confira também caches de CDN e service worker, se usados. Compare as prévias reais de 16 e 32 pixels: simplifique textos pequenos e linhas finas.

Os arquivos fornecem ícones e metadados do manifesto. Sozinhos não tornam o site uma PWA instalável. O exemplo considera a raiz do domínio; em subdiretórios ajuste todos os links e caminhos de ícones do manifesto.

Nuxt 4 · public/ · Nuxt 4 · useHead