Generador de favicon: crea favicon.ico, PNG e iconos Apple Touch
Crea en tu navegador favicon.ico, favicons PNG, un icono Apple Touch y un manifiesto web a partir de una imagen o un texto, con etiquetas HTML para copiar.
Suelta una imagen aquí o elige una
PNG, JPG, WebP, GIF (primer fotograma), BMP o SVG. Lo mejor es una imagen cuadrada de al menos 512 × 512 píxeles.
El texto se dibuja con las fuentes instaladas en este dispositivo, así que las letras y los emojis pueden verse distintos en otro ordenador o móvil. Los archivos PNG e ICO descargados conservan el aspecto que ves aquí.
Vista previa
Los de 16, 32 y 48 se muestran a su tamaño real; los iconos más grandes se muestran más pequeños. El patrón de cuadros indica las zonas transparentes.
En una pestaña del navegador
Una barra de pestañas simplificada con tema claro y oscuro. Comprueba que el icono se vea en ambos: un logotipo oscuro sobre fondo transparente puede desaparecer en una barra de pestañas oscura.
Archivos
Algunos dispositivos Apple muestran en negro las partes transparentes de un icono de la pantalla de inicio, así que apple-touch-icon.png se guarda sin transparencia: las zonas transparentes se rellenan con este color. El ajuste de forma no se le aplica, porque el iPhone y el iPad redondean ellos mismos las esquinas de los iconos de la pantalla de inicio.
Se usa en las etiquetas HTML y en el manifiesto. «/» es la carpeta raíz del sitio web.
Los ajustes de fondo, forma, margen interior y recorte no se aplican a favicon.svg.
Los navegadores pueden usar el color del tema para teñir la barra de direcciones o el título de la ventana. El color de fondo de la aplicación se muestra mientras se inicia una aplicación web instalada.
Elige una imagen o cambia a texto para empezar.
Contenido de site.webmanifest
Notas
- Sube los archivos a la carpeta raíz de tu sitio web (la carpeta que contiene la página de inicio), o indica otra carpeta arriba para que coincidan las rutas del HTML y del manifiesto.
- favicon.ico contiene imágenes de 16 × 16, 32 × 32 y 48 × 48 guardadas como datos PNG. Los navegadores actuales y Windows Vista o posterior pueden leerlo; algunos programas muy antiguos solo leen imágenes de icono sin comprimir.
- Los originales pequeños, como una imagen de 64 × 64, se amplían para los iconos más grandes y se ven borrosos. Si puedes, usa una imagen de al menos 512 × 512 píxeles o un archivo SVG.
- Los iconos de texto usan las fuentes instaladas en el dispositivo en el que los creas. Los archivos PNG e ICO conservan ese aspecto, pero volver a crear el icono en otro dispositivo puede dar un resultado distinto.
- Los archivos SVG los dibuja tu navegador. Las imágenes, fuentes o estilos que un archivo SVG carga desde otros archivos o sitios web no se cargan y pueden faltar en los iconos.
- Los navegadores guardan los favicons en la caché durante mucho tiempo. Después de sustituir un favicon, el antiguo puede seguir apareciendo durante un tiempo; puede ayudar una recarga forzada, una ventana privada o cambiar el nombre del archivo en el HTML.
- Las imágenes y el texto se procesan en tu navegador y no se suben a LeedyBox.
Cómo se usa
- Elige «Imagen» y selecciona o suelta tu logotipo, o elige «Texto o emoji» y escribe hasta tres caracteres.
- Ajusta el fondo, la forma y el margen interior, y revisa las vistas previas y la pestaña del navegador con el tema claro y el oscuro.
- Si quieres, introduce el nombre del sitio web, el nombre corto, el color del tema y la carpeta donde se guardarán los archivos.
- Pulsa «Crear archivos de favicon» y descarga los archivos de uno en uno o todos juntos como favicon-package.zip.
- Sube los archivos a tu sitio web y pega las etiquetas HTML copiadas en la sección head de tus páginas.
Preguntas frecuentes
¿Se suben mis imágenes a un servidor?
No. La imagen o el texto se dibujan y se convierten en tu navegador, y los archivos se crean en tu dispositivo. No se envía nada a LeedyBox. Al cargar la página solo se descarga la biblioteca ZIP, desde el propio leedybox.com.
¿Qué imágenes puedo usar y hay límites?
Archivos PNG, JPG, WebP, GIF (primer fotograma), BMP y SVG. Los archivos SVG pueden ocupar hasta 10 MB. Las fotos muy grandes (más de unos 50 megapíxeles) pueden fallar en móviles por la memoria que necesitan. Una imagen cuadrada de al menos 512 × 512 píxeles, o un archivo SVG, da los resultados más nítidos.
¿Por qué mi favicon se ve borroso o cuesta leerlo?
Un icono de 16 píxeles tiene muy poco espacio. Las formas sencillas, el contraste fuerte y una o dos letras funcionan mejor que los logotipos detallados o los textos largos. Las imágenes de origen pequeñas se amplían para los tamaños más grandes y se ven borrosas. Revisa las vistas previas y prueba con menos margen interior o con una versión más sencilla de tu logotipo.
¿Cuáles de estos archivos necesito?
favicon.ico y los archivos PNG de 16 y 32 píxeles los usan los navegadores de escritorio, y apple-touch-icon.png, el iPhone y el iPad. Los iconos de 192 y 512 píxeles y site.webmanifest se usan cuando el sitio se añade a una pantalla de inicio o se instala como aplicación web. Usarlos todos con las etiquetas HTML cubre los casos habituales.
¿Por qué apple-touch-icon.png no tiene transparencia?
Algunos dispositivos Apple muestran en negro las partes transparentes de un icono de la pantalla de inicio. Por eso la herramienta rellena las zonas transparentes con el color que elijas (blanco de forma predeterminada) y deja las esquinas cuadradas, porque el iPhone y el iPad las redondean.