Español
Crea favicons desde una imagen, texto o emoji — todos los tamaños y el HTML para pegar.
Última actualización
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
Un *favicon* es el pequeño icono que aparece en las pestañas del navegador, en los marcadores, en el historial y en la pantalla de inicio de iOS / Android cuando alguien guarda tu sitio. Es algo pequeño con un impacto sorprendentemente grande en cómo se siente un proyecto: enviar un favicon de verdad es la diferencia entre un cuadrado de marcador de posición y un producto acabado.
Los navegadores modernos piden el favicon en varios tamaños y formatos. Los iconos de pestañas y marcadores quieren un PNG de 16×16 o 32×32. Safari en iOS quiere un apple-touch-icon.png de 180×180. Añadir a Pantalla de Inicio en Android pide 192×192 y 512×512 dentro de un web manifest. Los navegadores antiguos y algunas integraciones aún esperan un favicon.ico multi-resolución. Recortar todos a mano, uno a uno, es mucho trabajo repetitivo — un generador de favicon lo hace de un clic.
Este generador funciona enteramente en tu navegador. La imagen que subes se decodifica en un <canvas> localmente, cada tamaño de salida se renderiza al lado, y todo el paquete (PNGs, ICO, web manifest, README y fragmento HTML) se empaqueta en un .zip sin subir nada.
favicon.ico es un formato contenedor que puede empaquetar varios tamaños (16, 32, 48) para que los clientes antiguos siempre encuentren lo que necesitan.apple-touch-icon.png y entradas en un manifest.webmanifest) — ambas deberían estar presentes.Usa **Texto** para un monograma de 1-3 caracteres, **Emoji** para un icono de un solo glifo o **Imagen** para soltar un PNG, JPEG o SVG. El modo Imagen es el mejor punto de partida si ya tienes un logo.
Elige un color de fondo (y un color de texto para los monogramas). Selecciona **Cuadrado**, **Redondeado** o **Círculo** — los cuadrados redondeados coinciden con cómo recorta iOS los iconos de la pantalla de inicio, así que se sienten nativos.
El nombre del sitio pasa a ser la meta tag application-name y el short_name del manifest.webmanifest del PWA. Usa el nombre de marca que los usuarios verían en un marcador del navegador.
Desplázate por la fila de previsualización para confirmar que el icono sigue leyéndose bien a 16px y 32px (donde viven las pestañas). Si el diseño pierde legibilidad a ese tamaño, simplifica la fuente — menos caracteres o un recorte más cerrado.
Haz clic en **Descargar paquete de favicon (.zip)** para obtener todos los archivos de salida a la vez. Coloca los archivos en la raíz de tu sitio y luego pega el fragmento HTML en tu <head> — listo.
Cada descarga contiene los archivos siguientes. El fragmento HTML los conecta — si solo necesitas un subconjunto, quédate con los que coincidan con las plataformas que soportes.
| Archivo | Tamaño | Usado por | Notas |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Pestañas del navegador (fallback legado) | Contenedor ICO multi-resolución — todos los navegadores siguen pidiendo esta URL. |
favicon-16x16.png | 16×16 | Icono de pestaña del navegador | Se usa en pantallas de alta densidad vía <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Pestaña del navegador + marcadores | El icono principal de pestaña en pantallas retina. |
favicon-48x48.png | 48×48 | Tile de sitio en Windows, barra de tareas | También se empaqueta dentro de favicon.ico para clientes legados. |
apple-touch-icon.png | 180×180 | Añadir a Pantalla de Inicio de Safari en iOS | iOS usa una captura de pantalla como fallback si falta — envíalo siempre. |
android-chrome-192x192.png | 192×192 | Pantalla de inicio de Android | Referenciado desde el manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Prompt de instalación de PWA + splash | Obligatorio para PWAs instalables. |
site.webmanifest | — | Metadatos de instalación de PWA | Lista iconos, nombre y color de tema. Se enlaza vía <link rel="manifest">. |
Escribe 1-3 letras (p. ej. **Co**, **C** o **JS**), elige un color de marca y selecciona **Redondeado** para una silueta amigable con iOS.
Los monogramas son los más legibles a 16px porque no hay detalle que perder. Usa una letra en mayúscula negrita o un par de dos letras bien apretado, y mantén el contraste alto entre el color del texto y el del fondo.
Elige un emoji que case con el rollo del proyecto — 🚀 para un lanzamiento, 🧪 para un experimento, 📚 para documentación. Pon un fondo neutro.
Los favicons con emoji dan un toque amable a sitios personales, hackathons y proyectos paralelos. Recuerda que el mismo emoji se ve distinto en macOS (Apple) y Windows (Segoe) — una vez exportado, el paquete congela el aspecto de macOS / Linux / Chrome que ves en la previsualización.
Suelta un PNG o SVG de tu logo, sube el deslizador de **Padding** para que la grafía no toque los bordes y activa **Rellenar el color de fondo** si tu logo tiene bordes transparentes.
Las entradas SVG se renderizan nítidas a cualquier tamaño. Los PNG también funcionan, pero se ven borrosos por encima de su resolución nativa — parte de un origen de al menos 512×512.
apple-touch-icon.png. iOS recurrirá a una captura de pantalla — que normalmente queda fatal — si no se declara ningún Apple touch icon.<link rel="icon" href="/images/favicon.ico">. Funciona, pero los navegadores siguen probando /favicon.ico en la raíz del sitio. O dejas también una copia en la raíz, o asumes los 404 en tu log de acceso.favicon.ico multi-resolución (16/32/48), un PNG de 32×32, un apple-touch-icon.png de 180×180 para iOS y PNGs de 192×192 y 512×512 declarados en un site.webmanifest para Android y PWAs instalables. El paquete que descarga esta herramienta los contiene todos.<link rel="icon" type="image/png">. Todos soportan también la URL legada /favicon.ico. Los favicons SVG son compatibles con los navegadores modernos y permiten que un solo archivo escale nítido a cualquier tamaño — son geniales si tu logo ya es vectorial, pero Safari en iOS sigue necesitando el fallback en PNG.Cmd/Ctrl + Shift + R), borra los datos del sitio en las DevTools o añade un query string a la URL del favicon (/favicon.ico?v=2). Si tienes un CDN delante de tu sitio, normalmente también necesita una purga./apple-touch-icon.png. El paquete lo incluye.<canvas>, y todas las salidas (PNGs, ICO, ZIP, manifest) se producen localmente. Nada sale de tu máquina.