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- Icono 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- Configuración 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 el color de la barra de navegación en dispositivos móviles Android.
Cómo probar si funcionó
- Abre el sitio en el navegador y verifica que el favicon aparece en la pestaña
- Añade el sitio a favoritos y verifica que el icono aparece
- En dispositivos móviles, añade a la pantalla de inicio y verifica el icono
- Usa el DevTools (F12) → Application → Manifest para verificar la configuración PWA
- Limpia la caché del navegador (Ctrl+F5) si no aparece inmediatamente
Consejos avanzados
En WordPress, coloca los archivos en la raíz de la instalación (donde está el wp-config.php).
Añade el código HTML al archivo header.php de tu tema, dentro de la etiqueta <head>, o usa un plugin como "Insert Headers and Footers".
Si el sitio está en ejemplo.com/mi-sitio/, ajusta las rutas:
<link rel="icon" href="/meu-site/favicon.ico">Los navegadores hacen caché agresiva de favicons. Si no aparece:
- Chrome/Edge: Ctrl + F5 (fuerza actualización)
- Firefox: Ctrl + Shift + R
- Safari: Cmd + Option + R
- O usa el modo privado/incógnito para probar