Vectors are nice, but you do get all sorts of line weight issues. Plus details that should “go away” at smaller sizes end up being sub pixel speckles that just add color tints, but nothing useful.
To do it well enough you would want vectors with hints, for example “stop rendering below size X”. However figuring out what X is would be a manual process. So the easiest way to do something like that is likely use a vector drawing program, use layers for things, and manually test at various sizes. When you find a layer is adding distracting non-detail as opposed to useful detail you disable it.
You could either take notes and then use come up with a custom “emoji hinting format” for the vectors…or you could just render at each step. Or I guess a middle ground would be to output a different set of vectors, one per size range. The easiest would be just to render at each step.
It might also be the smallest (vector descriptions are only really smaller if each vector covers a lot of pixels), and it may or may not be the fastest (a “small” bitmap copy is very fast).
(I personally like vectors, and would hope that the best way is vectors plus hints of some sort)
