Português
Crie favicons a partir de uma imagem, texto ou emoji — todos os tamanhos e o HTML para colar.
Última atualização
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
Um *favicon* é o ícone pequenininho que aparece nas abas do navegador, nos favoritos, no histórico e na tela inicial do iOS / Android quando alguém salva seu site. É uma coisinha que tem um impacto surpreendentemente grande na percepção de um projeto: entregar um favicon de verdade é a diferença entre um quadrado genérico e um produto finalizado.
Navegadores modernos pedem o favicon em vários tamanhos e formatos diferentes. Ícones de aba e favoritos querem um PNG de 16×16 ou 32×32. O Safari do iOS quer um apple-touch-icon.png de 180×180. O Adicionar à tela inicial do Android quer 192×192 e 512×512 dentro de um web manifest. Navegadores antigos e algumas integrações ainda esperam um favicon.ico multi-resolução. Cortar tudo isso na mão, um por um, é trabalho braçal — um gerador de favicon faz tudo num clique.
Este gerador roda inteiramente no seu navegador. A imagem que você envia é decodificada num <canvas> localmente, cada tamanho de saída é renderizado ali mesmo, e o pacote inteiro (PNGs, ICO, web manifest, README e trecho HTML) é empacotado num .zip sem nada ser enviado para fora.
favicon.ico é um formato contêiner que pode juntar vários tamanhos (16, 32, 48), para que clientes antigos sempre encontrem o que precisam.apple-touch-icon.png e entradas num manifest.webmanifest) — os dois devem estar presentes.Use **Texto** para um monograma de 1 a 3 caracteres, **Emoji** para um ícone de um único glifo ou **Imagem** para soltar um PNG, JPEG ou SVG. O modo Imagem é o melhor ponto de partida se você já tem uma logo.
Escolha uma cor de fundo (e uma cor de texto, no caso de monogramas). Selecione **Quadrado**, **Arredondado** ou **Círculo** — quadrados arredondados combinam com o jeito que o iOS recorta os ícones da tela inicial, então parecem nativos.
O nome do site vira a meta tag application-name e o short_name no manifest.webmanifest do PWA. Use o nome da marca que os usuários veriam num favorito do navegador.
Role a linha de pré-visualização para confirmar que o ícone ainda é legível em 16px e 32px (onde as abas ficam). Se o design perder a legibilidade nesse tamanho, simplifique a origem — menos caracteres ou um corte mais fechado.
Clique em **Baixar pacote de favicon (.zip)** para obter todos os arquivos de saída de uma vez. Coloque os arquivos na raiz do seu site, depois cole o trecho HTML no <head> — pronto.
Todo download contém os arquivos abaixo. O trecho de HTML faz as ligações — se você só precisa de um subconjunto, mantenha os que correspondem às plataformas que você suporta.
| Arquivo | Tamanho | Usado por | Observações |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Abas do navegador (fallback legado) | Contêiner ICO multi-resolução — todo navegador ainda pede essa URL. |
favicon-16x16.png | 16×16 | Ícone de aba do navegador | Usado em telas de alta densidade via <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Aba do navegador + favoritos | O ícone principal de aba em telas retina. |
favicon-48x48.png | 48×48 | Site tile do Windows, barra de tarefas | Empacotado dentro do favicon.ico também, para clientes legados. |
apple-touch-icon.png | 180×180 | Adicionar à tela inicial do Safari iOS | O iOS usa um screenshot como fallback se este faltar — sempre entregue. |
android-chrome-192x192.png | 192×192 | Tela inicial do Android | Referenciado a partir do manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Prompt de instalação de PWA + splash | Obrigatório para PWAs instaláveis. |
site.webmanifest | — | Metadados de instalação de PWA | Lista ícones, nome e cor de tema. Linkado via <link rel="manifest">. |
Digite de 1 a 3 letras (ex.: **Co**, **C** ou **JS**), escolha uma cor da marca e selecione **Arredondado** para uma silhueta amigável ao iOS.
Monogramas são os mais legíveis em 16px porque não tem detalhe nenhum para se perder. Use uma letra maiúscula em negrito ou um par compacto de duas letras, e mantenha um contraste alto entre texto e fundo.
Escolha um emoji que combine com a vibe do projeto — 🚀 para um lançamento, 🧪 para um experimento, 📚 para docs. Coloque um fundo neutro.
Favicons de emoji passam uma sensação amigável em sites pessoais, hackathons e projetos paralelos. Lembre que o mesmo emoji aparece diferente no macOS (Apple) e no Windows (Segoe) — depois de exportado, o pacote congela a aparência macOS / Linux / Chrome que você vê na pré-visualização.
Solte um PNG ou SVG da sua logo, aumente o slider de **Padding** para evitar que o desenho encoste nas bordas, e ative **Preencher a cor de fundo** se sua logo tem bordas transparentes.
Entradas em SVG renderizam nítidas em todo tamanho. Entradas em PNG também funcionam, mas ficam borradas acima da resolução nativa — comece a partir de uma origem de pelo menos 512×512.
apple-touch-icon.png. O iOS vai usar como fallback um screenshot da página — que geralmente fica horrível — se nenhum Apple touch icon for declarado.<link rel="icon" href="/images/favicon.ico">. Funciona, mas os navegadores ainda procuram /favicon.ico na raiz do site. Ou coloca uma cópia na raiz também, ou aceite os 404s nos logs.favicon.ico multi-resolução (16/32/48), um PNG 32×32, um apple-touch-icon.png 180×180 para iOS, e PNGs 192×192 e 512×512 declarados num site.webmanifest para Android e PWAs instaláveis. O pacote que esta ferramenta baixa tem todos eles.<link rel="icon" type="image/png">. Todos também suportam a URL legada /favicon.ico. Favicons em SVG são suportados nos navegadores modernos e deixam um único arquivo escalar perfeitamente em qualquer tamanho — ótimo se sua logo já é vetorial, mas o Safari do iOS ainda precisa do fallback em PNG.Cmd/Ctrl + Shift + R), limpe os dados do site no DevTools ou adicione uma query string na URL do favicon (/favicon.ico?v=2). Um CDN na frente do site geralmente também precisa de um purge./apple-touch-icon.png. O pacote já inclui.<canvas>, e cada saída (PNGs, ICO, ZIP, manifest) é produzida localmente. Nada sai da sua máquina.