Gerador de favicon
Transforme uma imagem, SVG, letras ou emoji em um favicon.ico, todos os tamanhos de ícone PNG, um ícone de toque da Apple e um manifesto de aplicativo web, tudo em um único ZIP. Gratuito, e os arquivos nunca saem do seu dispositivo.
Visualizar
- 16
- 32
- 48 px
Abas do navegador
Tela inicial: iPhone e Android
Adicione o favicon ao seu site
Envie os arquivos do ZIP para a sua pasta de ícones e cole estas tags dentro do elemento head de cada página. Elas seguem a pasta, o nome e a cor do tema que você definiu.
Como funciona
Um gerador de favicon cria os pequenos ícones que navegadores, resultados de busca e celulares exibem para um site. Este gera um favicon.ico com vários tamanhos (16, 32 e 48 pixels), ícones PNG de 16 a 512 pixels, um ícone Apple touch de 180 pixels, ícones mascaráveis para Android e um site.webmanifest a partir da sua imagem, SVG, letras ou emoji, totalmente no seu navegador, e fornece as tags HTML para colar nas suas páginas.
- Escolha a origem
Escolha uma imagem ou SVG, ou digite letras ou um emoji. Cada visualização é atualizada conforme você altera.
- Estilize o ícone
Defina o fundo, o raio dos cantos e o preenchimento, depois confira as visualizações da aba do navegador e da tela inicial.
- Baixe e adicione
Crie o pacote, envie os arquivos para o seu site e cole as tags HTML no head das suas páginas.
O que há no pacote
| Arquivo | Pixels | Usado para |
|---|---|---|
| favicon.ico | 16, 32, 48 | Abas do navegador e favoritos. Os navegadores também solicitam /favicon.ico automaticamente. |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32, 48 | Campos de ícone do site em temas e construtores de sites que pedem arquivos PNG |
| favicon-96x96.png | 96 | Resultados de busca do Google e telas de alta densidade |
| apple-touch-icon.png | 180 | Tela inicial do iPhone e iPad |
| icon-192.png, icon-512.png | 192, 512 | Tela inicial do Android e aplicativos web instalados |
| icon-maskable-192.png, icon-maskable-512.png | 192, 512 | Inicializadores do Android que recortam ícones em círculo ou outra forma |
| favicon.svg | Qualquer | Um ícone de aba que permanece nítido em qualquer tamanho nos navegadores modernos. Incluído quando você começa a partir de um SVG. |
| site.webmanifest | Texto | Nome do aplicativo, cores e lista de ícones do aplicativo |
| favicon-tags.html | Texto | As tags HTML para colar dentro do head |
Cada tamanho é desenhado a partir do mesmo design de 512 pixels e reduzido em etapas, para que os ícones pequenos permaneçam suaves. O arquivo ICO contém imagens PNG, compatíveis com todos os navegadores atuais e com o Windows.
Ícones mascaráveis e zona segura
O Android recorta os ícones de app em círculo, quadrado arredondado ou outra forma escolhida pelo fabricante do celular. Um ícone mascarável preenche todo o quadrado com seu fundo e mantém o logotipo dentro da zona segura: um círculo centralizado cujo diâmetro é 80% do ícone. A configuração de tamanho do logotipo dimensiona o logotipo nos ícones mascaráveis; com 56% ou menos, até mesmo um logotipo quadrado fica inteiramente dentro desse círculo.
Por que o ícone da Apple tem fundo sólido
iPhones e iPads arredondam automaticamente os cantos de um apple-touch-icon e exibem suas partes transparentes em preto. Por isso, o ícone da Apple é um quadrado inteiro com uma cor sólida: a cor de fundo escolhida por você ou o fundo do ícone do aplicativo que você seleciona quando o fundo é transparente.
Sua imagem permanece neste dispositivo
Os ícones, o manifesto e o ZIP são criados no seu navegador. Nada é enviado, e não há conta, marca d'água ou limite.
Perguntas frequentes
De quais tamanhos de favicon preciso para um site?
Os navegadores usam ícones de 16 e 32 pixels para abas e favoritos, que um favicon.ico reúne junto com uma versão de 48 pixels. Adicione um PNG de 96 pixels para a Pesquisa Google, um apple-touch-icon de 180 pixels para iPhones e iPads, e ícones de 192 e 512 pixels listados em um manifesto de web app para Android e web apps instalados, idealmente com versões mascaráveis. Este gerador cria todos eles em um único ZIP.
Como adiciono um favicon ao HTML do meu site?
Envie os arquivos do ZIP para a pasta raiz do seu site ou para a pasta definida na ferramenta. Em seguida, cole as tags da caixa HTML nesta página dentro do elemento head de cada página: links para favicon.ico, o PNG de 96 pixels, apple-touch-icon.png e site.webmanifest, além de uma meta tag theme-color. As mesmas tags estão em favicon-tags.html no ZIP.
Posso criar um favicon a partir de um emoji?
Sim. Escolha Emoji e digite ou cole um emoji. A ferramenta o desenha centralizado em todos os tamanhos, sobre um fundo transparente ou colorido. Ela usa a fonte de emoji do seu dispositivo, então ele aparece como na sua tela, e os ícones baixados mantêm essa aparência em qualquer dispositivo.
Minha imagem enviada é processada de forma privada nesta ferramenta?
Sim. Sua imagem é lida e desenhada no seu navegador, e os ícones e o ZIP também são criados ali. Nada é enviado para um servidor, então um logotipo ainda não público permanece no seu dispositivo.
Qual é a limitação do gerador de favicon?
Ele cria um único design para todos os tamanhos, portanto não adiciona artes separadas para 16 pixels, ícones de modo escuro ou favicons animados. Emojis e as fontes Serif, Monospace e System usam as fontes do seu dispositivo, então podem parecer diferentes em outro computador; a fonte Sans serif desenha letras latinas da mesma forma em qualquer lugar. Uma imagem de origem pequena fica suave em 180 e 512 pixels, então comece com uma imagem de 512 pixels ou um SVG.
Ainda preciso de um arquivo favicon.ico?
Ainda é a escolha mais segura. Os navegadores solicitam /favicon.ico quando uma página não tem tags de ícone, e alguns navegadores mais antigos, leitores de feed e outras ferramentas leem apenas esse arquivo. O favicon.ico desta ferramenta contém imagens de 16, 32 e 48 pixels em um único arquivo, garantindo nitidez em telas normais e de alta densidade.
O que é um ícone mascarável?
Um ícone mascarável é um ícone de aplicativo para launchers do Android que recortam ícones em círculos, quadrados arredondados ou outras formas. Seu plano de fundo preenche todo o quadrado e o logotipo fica dentro da zona segura, um círculo centralizado com diâmetro de 80% do ícone. As pré-visualizações nesta página mostram a zona segura e duas máscaras comuns.