figbell
Support
figbell

All articles

Guides

Creating an icon set, a favicon and web-ready SVG from a logo

How Bezira turns an SVG logo into 16–512 pixel PNG icons, a favicon.ico and optimised SVG. The export takes place on the device.

By Ahmet Samet Yüzlü

2 min read

A website or an application needs the same logo in many sizes: the tab icon, the home screen icon, the SVG on the page. Bezira produces all of them from a single export window; the work is done on this device.

Preparation

  1. Open the logo's SVG file with File › Open… (Ctrl/⌘ O). The file opens as it is; IDs, definitions and styles are preserved.
  2. Icons are produced as square PNGs. If the logo is not square, a square artboard can be created with Object › Add artboard; the window offers ready-made sizes such as App icon (512×512).

Icon set and favicon.ico

  1. Open the File › Export (Ctrl/⌘ ⇧ E) window.
  2. In the What section, choose Whole document, Each artboard separately or Selection only.
  3. In the Formats section, tick Icon set and choose the sizes you need: 16, 24, 32, 48, 64, 128, 256 and 512.
  4. Also select the favicon.ico button. The file contains the 16, 32 and 48 pixel sizes.
  5. Check the Output files list and press Export.

In Chrome, Edge and Opera, Choose folder writes the files directly to a folder. If no folder is chosen, or the browser cannot write to a folder, multiple files are downloaded as a single .zip.

Small SVG for the web

In the same window, when SVG is ticked and Optimized is chosen, unnecessary attributes, empty groups and excess decimals are removed. Options:

  • Keep layer names as id: for elements to be targeted with CSS or scripts.
  • Minify (single line): reduces the file to a single line.
  • Use currentColor for colors (icons): the icon takes on the text colour of the page.
  • Decimal precision: between 0 and 3 digits.

The window shows the size of the original SVG; optimisation does not change the appearance. To edit the document again later, use the Editable option: layers, groups and artboards are preserved.

Good to know

  • Adobe Illustrator (.ai), EPS and PDF files cannot be opened; the logo must come as SVG.
  • Converting text to paths and text on a path are not available.
  • Scripts, event attributes and external links in an opened file are removed for security; the number of removed items is reported.

Bezira opens right away in the browser.