DevTools
Support us

Favicon Generator

Create professional favicons in seconds with text, emoji or image. Support for gradients and multiple fonts.

Settings
Maximum 4 characters for best display
80%
→ °
#5c94e5 → #8a77d7 (90°)
Preview
∞
Complete Favicon Installation Guide
What you receive in the package
  • favicon.ico - Ícone universal
  • favicon-16x16.png - Navegadores desktop
  • favicon-32x32.png - Retina display
  • favicon-48x48.png - Windows taskbar
  • favicon-192x192.png - Android Chrome
  • favicon-512x512.png - PWA
  • manifest.json - Configuração PWA
  • how-to-use.html - Guia detalhado
Where to place the files

Extract all files from the ZIP to the root of your site (public folder where index.html is):

seu-site/
├── index.html
├── favicon.ico          ← Novo
├── favicon-16x16.png    ← Novo
├── favicon-32x32.png    ← Novo
├── favicon-48x48.png    ← Novo
├── favicon-64x64.png    ← Novo
├── favicon-128x128.png  ← Novo
├── favicon-192x192.png  ← Novo
├── favicon-512x512.png  ← Novo
├── manifest.json        ← Novo
└── how-to-use.html      ← Novo (opcional)
Add the code to your HTML

Copy this code and paste it inside the <head> tag of your HTML:

<!-- Favicon Links -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="192x192" href="/favicon-192x192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1E88E5">
Note: If your site is in a subfolder, adjust the paths (e.g.: href="/my-folder/favicon.ico")
Understand the meta tags
favicon.ico

Classic format supported by all browsers, including old versions of Internet Explorer.

apple-touch-icon

Icon used when the site is added to the iPhone or iPad home screen.

manifest.json

Configuration file for Progressive Web Apps (PWA), allowing the site to be installed as an app.

theme-color

Define a cor da barra de navegação em dispositivos móveis Android.

Como testar se funcionou
  • Abra o site no navegador e verifique se o favicon aparece na aba
  • Adicione o site aos favoritos e verifique se o ícone aparece
  • Em dispositivos móveis, adicione à tela inicial e verifique o ícone
  • Use o DevTools (F12) → Application → Manifest para verificar a configuração PWA
  • Limpe o cache do navegador (Ctrl+F5) se não aparecer imediatamente
Dicas avançadas

No WordPress, coloque os arquivos na raiz da instalação (onde está o wp-config.php).

Adicione o código HTML no arquivo header.php do seu tema, dentro da tag <head>, ou use um plugin como "Insert Headers and Footers".

Se o site está em exemplo.com/meu-site/, ajuste os caminhos:

<link rel="icon" href="/meu-site/favicon.ico">

Navegadores fazem cache agressivo de favicons. Se não aparecer:

  • Chrome/Edge: Ctrl + F5 (força atualização)
  • Firefox: Ctrl + Shift + R
  • Safari: Cmd + Option + R
  • Ou use modo anónimo/privado para testar