figbell

Todos los artículos

Guías

Crear un conjunto de iconos, un favicon y SVG para la web a partir de un logotipo

Cómo Bezira genera, a partir de un logotipo SVG, iconos PNG de 16 a 512 píxeles, un favicon.ico y SVG optimizado. La exportación se hace en el dispositivo.

Un sitio web o una aplicación necesita el mismo logotipo en muchos tamaños: el icono de la pestaña, el icono de la pantalla de inicio, el SVG de la página. Bezira los genera desde una sola ventana de exportación; el proceso se realiza en este dispositivo.

Preparación

  1. Abra el archivo SVG del logotipo con Archivo › Abrir… (Ctrl/⌘ O). El archivo se abre tal como es; se conservan los identificadores, las definiciones y los estilos.
  2. Los iconos se generan como PNG cuadrados. Si el logotipo no es cuadrado, puede crearse una mesa de trabajo cuadrada con Objeto › Añadir mesa de trabajo; la ventana ofrece tamaños predefinidos como Icono de aplicación (512×512).

Conjunto de iconos y favicon.ico

  1. Abra la ventana Archivo › Exportar (Ctrl/⌘ ⇧ E).
  2. En la sección Qué, elija Todo el documento, Cada mesa de trabajo por separado o Solo la selección.
  3. En la sección Formatos, marque Conjunto de iconos y elija los tamaños que necesite: 16, 24, 32, 48, 64, 128, 256 y 512.
  4. Seleccione también el botón favicon.ico. El archivo contiene los tamaños de 16, 32 y 48 píxeles.
  5. Revise la lista Archivos resultantes y pulse Exportar.

En Chrome, Edge y Opera, Elegir carpeta escribe los archivos directamente en una carpeta. Si no se elige ninguna carpeta o el navegador no puede escribir en ella, los distintos archivos se descargan en un único .zip.

SVG ligero para la web

En la misma ventana, al marcar SVG y elegir Optimizado, se eliminan los atributos innecesarios, los grupos vacíos y los decimales sobrantes. Opciones:

  • Conservar los nombres de capa como id: para elementos a los que se apuntará con CSS o scripts.
  • Minimizar (una línea): reduce el archivo a una sola línea.
  • Usar currentColor para los colores (iconos): el icono adopta el color del texto de la página.
  • Precisión decimal: entre 0 y 3 dígitos.

La ventana muestra el tamaño del SVG original; la optimización no cambia el aspecto. Para volver a editar el documento más adelante se usa la opción Editable: se conservan las capas, los grupos y las mesas de trabajo.

Conviene saber

  • No se abren archivos de Adobe Illustrator (.ai), EPS ni PDF; el logotipo debe estar en SVG.
  • No es posible convertir texto en trazados ni escribir texto sobre un trazado.
  • Los scripts, los atributos de eventos y los enlaces externos de un archivo abierto se eliminan por seguridad; se indica cuántos elementos se han eliminado.

Bezira se abre al instante en el navegador.