De una a tres letras se leen mejor a 16 px.
Se muestra debajo del ícono en los celulares y en el web manifest.
Cómo funciona
- Paso 1
Empieza con tu logo o tus letras
Suelta un logo, o escribe tus iniciales y elige los colores.
- Paso 2
Descarga los archivos
favicon.ico, el ícono Apple touch, los íconos Android y el web manifest.
- Paso 3
Agrega las etiquetas
Sube los archivos a la raíz de tu sitio y pega tres líneas en tu <head>.
Los tamaños de favicon, explicados
| Archivo | Tamaño | Dónde aparece |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Pestañas del navegador, marcadores, resultados de búsqueda de Google |
| apple-touch-icon.png | 180 × 180 px | Pantalla de inicio del iPhone y el iPad |
| icon-192.png, icon-512.png | 192 y 512 px | Pantalla de inicio de Android y apps web instaladas |
| site.webmanifest | - | Lista los íconos para celulares |
Consejos para un favicon que se destaque
- Piensa en pequeño. A 16 px solo sobrevive una letra o una forma llamativa; quita el eslogan y las líneas finas.
- Usa mucho contraste para que se lea en los temas claro y oscuro del navegador.
- Usa el color de tu marca para que tus clientes encuentren tu pestaña entre las demás.
- ¿Logo sobre un fondo recargado? Límpialo primero con el quitador de fondo blanco.
Preguntas frecuentes
El pequeño ícono que aparece en las pestañas del navegador, los marcadores, los resultados de búsqueda y la pantalla de inicio del celular. Un favicon claro hace que tu tienda sea fácil de encontrar entre las pestañas abiertas y transmite más confianza.
Un sitio moderno necesita favicon.ico (16, 32 y 48 px) para los navegadores, un apple-touch-icon.png de 180 px para iPhone, PNG de 192 y 512 px para Android y un site.webmanifest que los liste. Este generador los crea todos.
Sube los archivos a la raíz de tu sitio (junto a la página de inicio) y pega las tres etiquetas link en el <head> de cada página. Los creadores de sitios suelen tener una opción de favicon donde subes el PNG.
Mantenlo simple: una o dos letras o un símbolo llamativo de tu logo, con mucho contraste. Los detalles finos y las palabras largas desaparecen a 16 px.
No. Los íconos se dibujan en tu navegador, así que tu logo nunca sale de tu dispositivo, y no hay registro.
Los navegadores guardan los favicons en caché por mucho tiempo. Revisa que los archivos carguen en tusitio.com/favicon.ico, luego recarga con la caché borrada o abre el sitio en una ventana privada.
¿Te sirvió esta herramienta?
Compártela con tus lectores o alumnos. Copia este enlace en tu artículo, curso o página de recursos.
<a href="https://nanosite.ai/es/tools/favicon-generator">Generador de favicon</a> por NanoSiteMás herramientas gratis
- Redimensionar imagenAjusta una foto al tamaño exacto que piden Shopify, Amazon, Etsy o Instagram. Nunca sale de tu dispositivo.Abrir herramienta
- Compresor de imágenesHaz tus imágenes JPG, PNG y WebP hasta 80 % más livianas sin pérdida visible, para que tu tienda cargue más rápido.Abrir herramienta
- Quitar fondo blancoConvierte la foto de un producto sobre fondo blanco en un PNG transparente. Tu foto nunca sale de tu dispositivo.Abrir herramienta
¿Listo para vender? Crea tu tienda con IA
Describe tu tienda y NanoSite la crea, con productos, checkout y pagos incluidos. Empieza gratis.
Crear mi tienda gratis