Tu nueva app parece inacabada sin un favicon
Entregaste la funcionalidad, conectaste la base de datos, desplegaste en una URL real, y la pestaña del navegador todavía muestra una hoja de papel en blanco. Es un cuadradito de 16×16, y le dice en voz baja a cada visitante que el producto no está terminado.
Por qué siempre pasa
Los favicons son el último 1% que nadie agenda. Hacer el scaffold de un proyecto te da un ícono placeholder gratis, así que la advertencia nunca salta, y el placeholder llega hasta producción.
Armar un conjunto adecuado a mano es genuinamente molesto: exportar una docena de tamaños, generar un ICO, escribir un manifest a mano, pegar veinte etiquetas link. Así que se aplaza para "después", y el después nunca llega.
Por qué una pestaña en blanco te cuesta caro
El ícono de la pestaña es tu marca en su tamaño más pequeño. Cuando alguien tiene 30 pestañas abiertas, el favicon es la única forma de reencontrar la tuya. Uno en blanco es invisible.
Es también la señal de credibilidad más barata que existe. Un ícono nítido se lee como "un producto de verdad"; uno en blanco se lee como "un prototipo de fin de semana", incluso cuando el código por debajo es excelente.
El cuadrado que todos ven de verdad
Las señales de un ícono que falta
Si cualquiera de estas es cierta en tu sitio en vivo, los visitantes están viendo una app inacabada:
Un ícono de página-con-la-esquina-doblada en blanco parado en la pestaña del navegador.
El valor predeterminado del framework (el logo de Next.js, de Vite o de Create React App) llegando a producción.
Una captura de pantalla pixelada y estirada que alguien metió en public/favicon.ico solo para que la advertencia desapareciera.
Íconos que no coinciden: una cosa en la pestaña, otra en la pantalla de inicio de iOS, nada en el aviso de instalación del PWA.
Soluciónalo en un solo paso
El problema entero desaparece en el momento en que dejas de tratar los íconos como una tarea manual. El flujo es corto:
- 1
Elige una fuente
Un emoji, una marca, el archivo de tu logo o la URL de una imagen.
- 2
Genera el conjunto completo
favicon.ico, todos los tamaños de PNG, apple-touch-icon, íconos de Android y manifest.json.
- 3
Instálalo
Coloca los archivos en public/ y las etiquetas link en tu <head> (o en app/layout.tsx).
- 4
Verifícalo
Comprueba que se renderiza en la pestaña, en el móvil y en el aviso de instalación antes de darlo por terminado.
A mano, o por agente
A mano
La razón por la que se aplaza
- Exportar una docena de tamaños.
- Generar un ICO.
- Escribir un manifest a mano.
- Pegar veinte etiquetas link.
Deja que tu agente de código lo haga
Start hereClaude Code, Cursor o cualquier agente compatible con MCP
- Nunca abres un generador de favicon.
- Los íconos se crean e instalan directo en el repositorio: archivos escritos, <head> parcheado.
- Todo a partir de un único prompt como "añade un favicon de zorro a esta app".