Añade íconos de app con IA: sin pasos manuales
La forma antigua: abrir un generador, subir una imagen, descargar un zip, descomprimirlo, copiar archivos a public/, pegar veinte etiquetas link a mano. La forma nueva: pídele a tu agente "añade un favicon" y aterriza en el repositorio, con el head ya parcheado, listo.
Cómo funciona todo el proceso
- 1
Tú pides
Una sola frase en Claude Code, Cursor o cualquier agente compatible con MCP. Sin recursos que preparar.
- 2
Lo genera
favicon.ico, todos los tamaños de PNG, apple-touch, íconos de Android, versiones claro/oscuro adaptables al tema y manifest.json.
- 3
Lo instala
Los archivos se escriben en tu directorio estático, las etiquetas <head> correctas se añaden a tu layout, nada que mover a mano.
Dos formas de conectarlo
Ambas son zero-config más allá de un ajuste único, y ambas escriben los archivos directamente en tu proyecto.
Opción A: la skill appicons
Código abierto, integrada en tu agente
- Le enseña al agente a convertir la intención en un conjunto de íconos e instalarlo.
- Solo hablas con él, sin formatos ni tamaños que elegir.
- Por debajo, resuelve lo que escribiste a una fuente, llama a la API de favicontools.com y descomprime el resultado en public/.
Opción B: el servidor MCP de Favicon Tools
Dos herramientas, añadidas al arsenal de tu agente
- search_inputs para descubrir las opciones, generate_iconset para producir el conjunto.
- Devuelve URLs de CDN para cada archivo, más un fragmento de head listo para pegar.
- Devuelve un conjunto completo por etapa de forma predeterminada (un ícono de producción limpio, más variantes de staging/dev con distintivo), para que el agente configure íconos por entorno en la misma llamada.
Hablando con la skill
"Add a fox favicon to this app."
"Generate app icons for this site from our logo at public/logo.svg."
"Give this project a proper favicon using the React logo."
"Make me a favicon from https://example.com/mark.png."Cuatro prompts que resuelven, todos, a un conjunto de íconos completo e instalado.
Añadiendo el servidor MCP
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}Una sola entrada, y el agente tiene ambas herramientas. El valor predeterminado por etapa hace que los íconos por entorno vuelvan en la misma llamada.
Lo describes en lenguaje sencillo
Nunca eliges formatos ni tamaños de ícono. Dices lo que quieres; el agente lo asigna a una fuente.
| Lo que dices | Lo que usa el agente |
|---|---|
| Un emoji o una vibra | Un nombre de Iconify como noto:fox o twemoji:rocket |
| Una marca / producto | simple-icons:stripe, logos:github-icon |
| Tu propio logo | La ruta del archivo, por ejemplo ./public/logo.svg |
| La URL de una imagen | La URL, rasterizada en el servidor |
Cómo se ve lo "terminado"
| Lo que llega | Detalle |
|---|---|
| Archivos de ícono | Todos en public/ (o app/ en Next.js). |
| Etiquetas de head | Un bloque <head> completo, o metadatos de layout, que los referencian. |
| manifest.json | Con el nombre real de tu app y la start_url. |
| favicon.ico antiguo | Eliminado, para que la caché no sirva el placeholder. |