Icon Workshop1Sube tu imagen
Empieza con un logotipo claro o un símbolo sencillo. Una imagen cuadrada da mejores resultados.
Una imagen. Cada pantalla.
Generador de favicons e iconos de aplicaciones
Pequeños iconos. Una impresión duradera.
Convierte tu imagen en favicons para sitios web, iconos de aplicaciones y un paquete de iconos listo para usar.
PNG ICO PWA
Crea tu paquete de iconos
Convierte tu imagen en favicons, iconos de aplicaciones y más.
- 1Subir
- 2Ajustar
- 3Descargar
Suelta tu imagen aquí
PNG, JPG o SVG · Hasta 5 MB
Tu imagen se procesa en tu navegador y nunca sale de tu dispositivo.
Ajusta tu icono
Ajusta el aspecto para cada pantalla.
Ver en contexto(sube una imagen para ver tu icono)
Pestaña del navegador
×
https://example.com
Pantalla de inicio de iOS
Tu icono aquí
PWA / Android
Tu icono aquí
Cómo crear un favicon en 3 pasos
De una imagen a un conjunto completo de iconos.
2Ajustar y previsualizar
Elige el ajuste, el fondo y el margen interior. Revisa el resultado en tamaños pequeños.
3Descargar y añadir a tu sitio
Exporta el paquete de iconos, sube los archivos y añade los enlaces de los iconos a tu HTML.
Un logotipo, listo para cada pantalla
Descubre dónde se usa cada archivo generado.
Favicon del sitio web
Mi sitio×16 × 1632 × 32Los iconos de 16 × 16 y 32 × 32 ayudan a reconocer tu sitio en las pestañas y los marcadores.
iPhone & iPad
Mi sitio180 × 180Usa un icono apple-touch de 180 × 180 cuando tu sitio se añada a la pantalla de inicio.
PWA & Android
Instalar aplicación192 × 192512 × 512Las imágenes de 192 × 192 y 512 × 512 son tamaños habituales en los manifiestos de aplicaciones web.
¿Qué hay en tu paquete de iconos?
Un conjunto de iconos listo para usar en todas las plataformas.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestManifiesto de aplicación web
Añadir iconos a tu sitio web
Coloca estos enlaces en el <head> de tu HTML.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Preguntas frecuentes
¿Qué es un favicon?
Una imagen pequeña que representa tu sitio en las pestañas y los marcadores del navegador.
¿Qué formato de imagen debo usar?
PNG es una buena opción para logotipos transparentes. También puedes usar JPG, WebP y archivos SVG seguros.
¿Puedo usar una imagen no cuadrada?
Sí. Elige Ajustar, Recortar o Estirar para crear un icono cuadrado.
¿Por qué se incluyen varios tamaños de iconos?
Los navegadores y las pantallas de inicio usan tamaños distintos. Los iconos pequeños se ven nítidos en las pestañas; los grandes sirven para accesos directos de aplicaciones.