Generador de Favicon
Crea favicons profesionales en segundos con texto, emoji o imagen. Soporte para gradientes y múltiples fuentes.
Configuración
Vista Previa
Lo que vas a recibir:
- favicon.ico - Formato universal para todos los navegadores
- 7 De 16x16px hasta 512x512px para todos los dispositivos
- manifest.json - Configuración para Progressive Web Apps (PWA)
- how-to-use.html - Guía completa de instalación y uso
Guía Completa de Instalación de los Favicons
Lo que recibes en el paquete
-
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
Dónde colocar los archivos
Extrae todos los archivos del ZIP a la raíz de tu sitio (carpeta pública donde está el index.html):
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)Añade el código en tu HTML
Copia este código y pégalo dentro de la etiqueta <head> de tu 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">href="/mi-carpeta/favicon.ico")
Entiende las meta tags
favicon.ico
Formato clásico compatible con todos los navegadores, incluyendo versiones antiguas de Internet Explorer.
apple-touch-icon
Icono usado cuando el sitio se añade a la pantalla de inicio del iPhone o iPad.
manifest.json
Archivo de configuración para Progressive Web Apps (PWA), permitiendo la instalación del sitio como 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