Grátis · Sem cadastro · Roda no seu servidor

Gere Favicons Perfeitos a Partir de Qualquer Imagem

Transforme suas imagens em favicons profissionais com suporte para SVG, PNG, JPG e todos os principais formatos. Baixe um pacote completo de favicons com todos os tamanhos necessários para exibição impecável em todos os dispositivos e navegadores.

Rápido como um raio· Suporte a SVG· Vários formatos

Começar a converter

Envie sua imagem

Arraste e solte uma imagem ou clique para procurar. Nós geramos todos os tamanhos de favicon que você precisa.

Solte sua imagem aqui

ou clique para procurar arquivos

Escolher arquivo

PNGJPGGIFWEBPBMPSVGICO≤10MB

Gerando seu pacote de favicons…

Desculpe, não foi possível processar este arquivo. Use um PNG, JPG, GIF, WebP, BMP ou SVG quadrado com menos de 10 MB.

Seu pacote de favicons está pronto

ZIP com ICO, PNG, ícone Apple touch, ícones Android e manifesto web.

Baixar pacote de favicons

Gerador de Favicon a Partir de Texto

Transforme letras ou um texto curto em um favicon limpo. Digite suas iniciais, escolha cores e um formato, pré-visualize ao vivo e baixe o pacote completo de ícones.

Gerador de Favicon a Partir de Emoji

Transforme qualquer emoji em um favicon. Escolha um emoji, selecione um formato e uma cor de fundo, pré-visualize ao vivo e baixe o pacote completo de ícones.

Editor de favicons em pixels

Desenhe seu próprio favicon pixel a pixel em uma grade de 16×16 a 64×64. Lápis, borracha e balde de tinta com desfazer/refazer, e exporte um pacote completo ICO, PNG e Apple/Android.

Baixador de Favicons

Insira a URL de qualquer site para obter e baixar seu favicon nos formatos PNG e ICO.

Verificador de Favicons

Insira a URL de qualquer site para auditar instantaneamente sua configuração de favicons — favicon.ico, ícone Apple touch, favicon SVG e manifesto web. Obtenha uma pontuação de saúde em segundos.

Tudo que Você Precisa para Favicons Perfeitos

Um gerador de favicons profissional com todas as ferramentas e formatos necessários para criar ícones nítidos que funcionam em qualquer lugar.

Rápido como um raio

Processe imagens em segundos com um mecanismo de conversão otimizado. Sem esperas, sem atrasos.

Suporte a SVG

Suporte total para arquivos SVG com otimização e dimensionamento limpos para resultados perfeitos.

Todos os dispositivos

Gere favicons para desktop, celulares, tablets e PWAs com todos os tamanhos necessários.

Pacote completo

Baixe tudo: ICO, arquivos PNG, ícones Apple touch e um manifesto web.

Vários formatos

Suporte para PNG, JPG, GIF, WebP, BMP e SVG — converta a partir de qualquer formato popular.

Pronto para usar

Obtenha trechos de código HTML e instruções de instalação para implementação imediata.

Multi-navegador

Compatibilidade impecável com Chrome, Firefox, Safari, Edge e todos os navegadores modernos.

Alta qualidade

O processamento avançado de imagens mantém os favicons nítidos e claros em qualquer tamanho.

Profissional

Gere o pacote de favicons padrão do setor usado pelos principais sites do mundo.

Formatos suportados

Tamanhos de favicon

100%

Compatível com navegadores

Tempo de processamento

Guia de Instalação Fácil

Siga estes passos simples para adicionar seus novos favicons ao seu site.

Baixe o Pacote de Favicons

Use o gerador acima para criar e baixar seu pacote completo de favicons como um arquivo ZIP.

Extraia os Arquivos

Extraia tudo do ZIP para a pasta raiz do seu site (a mesma pasta do index.html).

Adicione o Código HTML

Copie o código HTML abaixo e cole dentro da seção <head> das suas páginas.

Teste Seus Favicons

Publique seu site e confirme se o favicon aparece nas abas do navegador, nos favoritos e no celular.

Código de Integração para o Seu Framework

Escolha sua stack e copie o código pronto para colar. Os arquivos ficam na raiz do site (ou em app/ para o Next.js App Router).

index.html

<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">

// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <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" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}

// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})

// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.

// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <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/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>

Para onde vão os arquivos? Coloque favicon.ico, icon.png e apple-icon.png diretamente na pasta app/. O Next.js os detecta automaticamente — sem necessidade de tags link manuais.

site.webmanifest

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Arquivos Incluídos

Seu pacote de favicons contém os seguintes arquivos.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

Dicas profissionais

Mantenha todos os arquivos de favicon na raiz do seu site para a melhor compatibilidade.
Faça um hard-refresh (ou limpe o cache) após atualizar os favicons para ver a mudança na hora.
Teste seu favicon em vários dispositivos e navegadores para garantir que ele seja renderizado corretamente.

Perguntas Frequentes

Respostas para perguntas comuns sobre geração e implementação de favicons.

Quais formatos de imagem são suportados?

Você pode enviar arquivos PNG, JPG, GIF, WebP, BMP ou SVG. Para o resultado mais nítido, comece com uma imagem quadrada de pelo menos 512×512 pixels. Arquivos de até 10 MB são aceitos.

Qual deve ser o tamanho da imagem original?

Uma imagem de origem quadrada de 512×512 ou maior é o ideal. O gerador a reduz com qualidade, então uma fonte grande e nítida produz os melhores ícones pequenos.

Vocês suportam favicons SVG?

Sim. Os arquivos SVG são mantidos como um favicon.svg vetorial para renderização nítida em navegadores modernos e também são rasterizados em todos os tamanhos PNG e ICO para navegadores mais antigos.

Quais tamanhos de favicon são gerados?

O pacote inclui PNG de 16×16 e 32×32, um favicon.ico multirresolução, um ícone Apple touch de 180×180 e ícones Android/PWA de 192×192 e 512×512, além de um manifesto web.

Como adiciono o favicon ao meu site?

Extraia o ZIP para a raiz do seu site e cole o trecho HTML fornecido no <head> das suas páginas. Instruções completas e códigos por framework são mostrados acima.