Icon Workshop1Envie sua imagem
Comece com um logotipo claro ou uma marca simples. Uma imagem quadrada funciona melhor.
Uma imagem. Todas as telas.
Gerador de favicons e ícones de aplicativos
Ícones pequenos. Uma impressão duradoura.
Converta sua imagem em favicons para sites, ícones de aplicativos e um pacote de ícones pronto para usar.
PNG ICO PWA
Crie seu pacote de ícones
Transforme sua imagem em favicons, ícones de aplicativos e muito mais.
- 1Enviar
- 2Ajustar
- 3Baixar
Arraste e solte sua imagem aqui
PNG, JPG ou SVG · Até 5 MB
Sua imagem é processada no navegador e nunca sai do seu dispositivo.
Ajustar o ícone
Ajuste o visual para cada tela.
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.
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 × 1632 × 32Ícones de 16 × 16 e 32 × 32 ajudam os visitantes a reconhecer seu site nas abas e nos favoritos.
iPhone & iPad
Meu Site180 × 180Use um ícone apple-touch de 180 × 180 quando seu site for adicionado à tela inicial.
PWA & Android
Instalar aplicativo192 × 192512 × 512Imagens 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">Perguntas frequentes
O que é um favicon?
Uma pequena imagem que representa o seu site nas abas e favoritos do navegador.
Que formato de imagem devo usar?
PNG é uma boa escolha para logotipos transparentes. JPG, WebP e SVG seguro também podem ser usados.
Posso usar uma imagem não quadrada?
Sim. Escolha Ajustar, Recortar ou Esticar para criar um ícone quadrado.
Por que vários tamanhos de ícones estão incluídos?
Navegadores e telas iniciais usam tamanhos diferentes. Ícones pequenos ficam nítidos nas abas; os maiores são adequados para atalhos de aplicativos.