Tabaix / workflow guide
Check colour contrast, favicon legibility, transparency, SVG changes and font fallbacks when preparing assets for a website.
Start with intended sizes and backgrounds
A brand image can look clear at 512 pixels and become unreadable at favicon size. Keep the vector or high-resolution original and produce separate delivery assets. Test on the actual light and dark backgrounds used by the website. A transparent edge that works on white may show an unwanted halo on a dark surface.
Make the smallest icon the hardest test
View a favicon at its intended small size instead of zooming in. Fine lettering and narrow strokes can disappear. The PNG favicon pack provides assets and a manifest starter; it is not a legacy ICO encoder. Check the files included in the download and update head links and manifest paths to their real deployed locations.
Check colour pairs in context
A contrast result applies to a chosen foreground and background. Gradients, transparency, images and hover states can change what users actually see. A calculated ratio is one input to an accessibility review, not a complete accessibility certification. Inspect controls, labels and focus states as well as the headline text.
Preserve transparency deliberately
Use an output format that supports the desired transparency and inspect the downloaded edges. Flattening artwork onto a chosen background is appropriate when the destination expects an opaque image. Changing a file extension does not perform a conversion. Compare an exported asset with the original before replacing it in the site.
Treat SVG sanitisation as a change
The strict sanitizer keeps only its allowed shapes and attributes. Complex filters, styles and linked images can be removed, so the result may look simpler. Inspect the source and render both versions before publishing. Sanitising a supplied SVG is useful in a defined workflow, but it should not be marketed as a guarantee that any arbitrary upload is safe for every application.
Test font fallbacks and the final page
The system-font pairing tool uses fonts available on the device. A chosen family may fall back elsewhere, especially for different scripts. Check real heading and body copy in the final layout, including Arabic text if you serve it. Review line height, wrapping and icon size on a narrow screen. Exported assets are a starting pack; the deployed page still needs a visual and accessibility review.
Tools for this workflow
Putting this workflow into practice
A workflow only saves time when it becomes a habit: keep an unchanged source, work on a copy, check the result where it will actually be used, and write down the settings that worked so the next batch takes minutes instead of guesswork. The Tabaix design tools used in this guide run in your browser, so the same steps work wherever you are — no uploads and no sign-up.
Does the tool upload my designs?
No. The design tools run in your browser; your files stay on your device.
Why does my asset look different on the live site?
Platforms crop, compress and theme assets in their own way. Check the placed result, not only the exported file.
Continue with the design tools, or browse all 100 free browser tools on Tabaix.
