Generador de favicon

Crear favicons a partir de una imagen online

Los sitios web necesitan varios tamaños de iconos para las pestañas del navegador, los marcadores, las pantallas de inicio de iOS y las aplicaciones web progresivas. Esta herramienta crea el conjunto completo a partir de una imagen fuente.

Cómo generar favicons

1. Sube una imagen PNG, JPG o WebP (idealmente cuadrada, al menos 512×512 px).
2. Haga clic en Generar favicons para crear todos los tamaños.
3. Descargue archivos individuales, tome el ZIP o copie el fragmento HTML en el encabezado de su sitio.

Qué hace el Generador de Favicon

Esta herramienta basada en navegador le ayuda a crear un conjunto de favicon a partir de una imagen sin instalar software de escritorio ni enviar el archivo seleccionado a un servidor de procesamiento de imágenes. Crea íconos PNG de 16 a 512 píxeles, un favicon.ico de varios tamaños, un ZIP y un fragmento HTML. El editor está intencionalmente enfocado: expone los controles necesarios para esta tarea y muestra el resultado antes de guardarlo.

Los controles disponibles cubren el recorte de origen, las vistas previas del tamaño generado, las descargas individuales y la descarga ZIP. Utilice el archivo original cuando sea posible, revise la vista previa con un nivel de ampliación adecuado y conserve intacto el archivo original después de la descarga. Una herramienta de navegador puede hacer que la edición solicitada sea cómoda, pero no puede recrear los detalles faltantes ni juzgar si una imagen es adecuada para cada destino.

Un flujo de trabajo confiable paso a paso

1. Elija una imagen de origen clara en uno de los formatos que se muestran en el campo de carga.
2. Espere a que aparezca la vista previa y confirme que la orientación, los colores y la transparencia tengan el aspecto esperado.
3. Ajuste el recorte de origen, las vistas previas del tamaño generado, las descargas individuales y la descarga ZIP. Realice un cambio significativo a la vez para que sea fácil comparar el resultado.
4. Inspeccione el texto pequeño, las caras, los bordes y las áreas transparentes antes de descargarlo.
5. Guarde el resultado con un nombre de archivo descriptivo y conserve el original por separado.

Si el destino especifica dimensiones en píxeles, peso del archivo o un formato particular, verifique esos requisitos de forma independiente. Editar la apariencia no satisface automáticamente un límite de tamaño, y convertir o comprimir posteriormente puede cambiar el resultado nuevamente.

Comprender los controles y el archivo descargado

El conjunto generado incluye tamaños de navegador común, Apple Touch y PWA. Una fuente cuadrada de al menos 512 × 512 píxeles normalmente proporciona el icono grande más limpio.

La vista previa en vivo está diseñada para mostrar el resultado visual deseado, mientras que el archivo descargado es el elemento que se debe inspeccionar antes de publicarlo. Las vistas previas del navegador se pueden escalar para ajustarse a la página, así que abra el archivo guardado al 100% cuando la nitidez, la alineación o las letras pequeñas sean importantes. Evite editar y guardar repetidamente un JPG con pérdida cuando todavía tenga el original disponible.

Usos prácticos

• Agregar un favicon a un nuevo sitio web.
• Preparar íconos de aplicaciones para un manifiesto web.
• Reemplazar un ícono obsoleto del navegador de baja resolución.

La misma operación puede ser parte de un flujo de trabajo más largo. Una secuencia típica consiste en recortar primero las áreas no deseadas, realizar el cambio creativo, cambiar el tamaño a las dimensiones finales en píxeles y comprimir solo al final. Esto evita perder tiempo de procesamiento en píxeles que luego se eliminarán y le permite juzgar la compresión en función de la imagen final real.

Calidad, precisión y limitaciones importantes

La generación cambia el tamaño de la misma obra de arte; no rediseña pequeños detalles. El texto fino y las líneas finas pueden desaparecer a los 16 píxeles, así que inspeccione la vista previa en tamaño real.

La calidad del resultado depende sobre todo del archivo original. Un original de alta resolución normalmente deja más espacio para recortar y cambiar el tamaño, mientras que una captura de pantalla pequeña o una descarga previamente comprimida puede contener desenfoque, halos o artefactos de bloques. Guardar un archivo nuevo no puede restaurar detalles que no existen en el original. Cuando la precisión es importante, compare el archivo terminado uno al lado del otro con el original.

Procesamiento del navegador privado y rendimiento del dispositivo

La imagen seleccionada se procesa localmente mediante JavaScript y las API del lienzo del navegador. La operación de edición no requiere que el archivo se cargue en el servidor de Image Online Free. Esto es útil para imágenes personales y de trabajo comunes, pero aun así debes controlar dónde se almacenan las copias descargadas y quién puede acceder a tu dispositivo.

Las imágenes grandes requieren más memoria porque el navegador debe decodificar el archivo comprimido en píxeles. Una fotografía de una cámara moderna puede ocupar mucha más memoria de lo que sugiere el tamaño del archivo. Si una pestaña del teléfono se vuelve lenta, cierre las aplicaciones que no utilice, procese un archivo grande a la vez o cambie el tamaño de una copia antes de aplicar el efecto.

Errores comunes que se deben evitar

• Reemplazar la única copia del original con un resultado editado o comprimido.
• Juzgar la nitidez sólo a partir de una pequeña vista previa ajustada en lugar de abrir la descarga.
• Suponiendo que una edición visual también cumpla con las dimensiones de un sitio web o la regla de tamaño máximo de archivo.
• Ignorar la transparencia al moverse entre PNG, WebP y JPG.
• Aplicar varios guardados con pérdida cuando el flujo de trabajo completo podría comenzar nuevamente desde el original.

Continuar con la herramienta relacionada adecuada

Elija la siguiente operación según el requisito final. El cambio de tamaño cambia las dimensiones de los píxeles, el recorte elimina parte del marco, la compresión apunta al peso del archivo y la conversión cambia el formato del archivo. Son tareas separadas, incluso cuando un destino pide varias de ellas juntas.

Preguntas frecuentes

¿El archivo ICO contiene imágenes PNG reales?

Sí. favicon.ico está construido con datos PNG incrustados para 16×16, 32×32 y 48×48 píxeles, compatible con los navegadores modernos.

¿Dónde pego el fragmento HTML?

Agregue las etiquetas copiadas dentro de la sección de su HTML, ajustando las rutas si almacena íconos en una subcarpeta.

¿Se sube mi imagen?

No. La generación de íconos ocurre completamente en su navegador.