SVG to ICO Not Working? Common Causes (Fonts, External Images, ViewBox)

SVG is one of the best source formats for generating ICO files. Because SVG is a vector format, it scales to any size without losing quality, which makes it ideal for producing the multiple size layers (16 through 256 pixels) that a good ICO file needs. In theory, you drop an SVG into Any2ICO and get a sharp, multi-size ICO file instantly.

In practice, SVG files can be tricky. The SVG specification is large and complex, and different tools create SVGs with different assumptions about how the file will be rendered. An SVG that looks perfect in Adobe Illustrator or Figma may render incorrectly, partially, or not at all when opened in a browser's Canvas API, which is the rendering engine that browser-based converters use. The result might be a blank icon, an icon with missing text, an icon at the wrong scale, or an icon with missing pieces.

The good news is that the issues are well-understood and the fixes are straightforward. This article covers the most common reasons SVG-to-ICO conversion fails or produces unexpected results, and provides a clear fix for each one. If you want the quickest path to success, start with the checklist in the next section.

Quick Checklist: Fix Your SVG Before Converting

Before diving into the detailed explanations, here is a quick checklist that resolves the majority of SVG-to-ICO problems. Run through these items first; if your issue is fixed, you do not need to read further.

1. Add or fix the viewBox attribute. Open your SVG in a text editor and check the root <svg> element. It should have a viewBox attribute like viewBox="0 0 100 100" that defines the coordinate system. If it is missing, add it with values that match your design's dimensions.

2. Convert all text to outlines (paths). Select all text elements in your vector editor and convert them to outlines or paths. In Illustrator, this is Type > Create Outlines. In Figma, right-click and select Flatten. In Inkscape, use Path > Object to Path. This eliminates font dependencies entirely.

3. Remove or embed external references. Search your SVG file for href, xlink:href, and url() references that point to external files (images, fonts, CSS). Either embed these resources directly in the SVG or remove them if they are not essential.

4. Replace external CSS with inline styles. If your SVG references an external stylesheet, copy the relevant CSS rules directly into a <style> block inside the SVG, or convert them to inline style attributes on each element.

5. Set explicit width and height. While not always required, adding width and height attributes to the root <svg> element helps the Canvas API determine the correct rendering size. Use values that match or exceed 256 pixels for best results.

Fonts and Text Rendering

Text is the single biggest source of SVG conversion problems. When an SVG contains <text> elements, the renderer needs access to the specified font to display the text correctly. In a design application like Illustrator or Figma, the font is installed on your computer, so everything looks right. But when the SVG is rendered in a browser's Canvas API for ICO conversion, the situation is very different.

The Canvas API can only use fonts that are available to the browser at render time. If your SVG specifies font-family: "Proxima Nova" and that font is not installed on the user's system or loaded via a web font, the browser substitutes a default font (usually a generic sans-serif or serif). This changes the appearance of the text: letter spacing shifts, characters may be wider or narrower, and the overall layout can break. In some cases, the text may not render at all if the SVG uses advanced font features or ligatures that the fallback font does not support.

The reliable fix is to convert all text to outlines (also called "converting to paths" or "flattening text"). This replaces each text character with a vector path that describes its exact shape. The resulting SVG no longer references any font because the letter shapes are drawn as geometric paths. The SVG file will be slightly larger, but it will render identically on any system, in any browser, and through any Canvas API, regardless of which fonts are installed.

In Illustrator: select all text, then go to Type > Create Outlines. In Figma: select text layers, right-click, and choose Flatten. In Inkscape: select text, then use Path > Object to Path. Always save the original editable SVG separately before converting to outlines, since outlined text can no longer be edited as text.

External Images and References

SVG files can reference external resources: images loaded via <image href="/logo.png">, fonts loaded via @font-face with a URL, CSS files linked via <?xml-stylesheet?>, and patterns or gradients that reference other SVG files. When the SVG is opened as a standalone file in a browser-based converter, these external references almost always fail to load.

The Canvas API renders the SVG in a sandboxed context where cross-origin requests are blocked for security reasons. An <image> element pointing to https://example.com/logo.png will not load because the browser blocks the cross-origin fetch. The result is a blank space where the image should appear. The same applies to externally hosted fonts, stylesheets, and any resource referenced by URL.

Even relative paths like href="/logo.png" will fail because the SVG is being processed in memory by the Canvas API, not served from a directory where relative paths can resolve. There is no file system context for the SVG to reference.

The fix is to embed all external resources directly in the SVG. For images, convert them to base64 data URIs: <image href="data:image/png;base64,iVBOR...">. For fonts, use a base64-encoded @font-face declaration inside a <style> block within the SVG (though converting text to outlines is usually simpler and more reliable). For CSS, copy all rules into an inline <style> element inside the <svg> tag.

ViewBox, Width, and Height Problems

The viewBox attribute defines the coordinate system of an SVG. It tells the renderer what portion of the infinite SVG canvas to display and how to scale the content. When viewBox is missing or incorrect, the results range from a blank output to an icon that shows only a corner of the design or renders at the wrong aspect ratio.

Missing viewBox: If the SVG has width and height but no viewBox, some renderers will infer the viewBox from the dimensions, but the Canvas API may not. The safest approach is to always include an explicit viewBox. If your SVG is designed at 100x100 units, add viewBox="0 0 100 100" to the root element.

viewBox does not match content: If the viewBox coordinates do not encompass all of the SVG's content, parts of the design will be clipped. For example, if your icon has elements that extend to x=120 but the viewBox only covers 0 to 100, the rightmost 20 units are invisible. Open the SVG in a text editor, examine the viewBox values, and adjust them to contain all visible elements.

Width/height set to 0 or very small values: Some SVG export tools set width and height to very small values like 1px or 0, relying on CSS to scale the SVG when displayed on a web page. When the Canvas API reads these dimensions, it may render the SVG at 1x1 pixel and then scale up, producing a completely blank or heavily blurred result. Set the width and height to at least 256 pixels to give the Canvas API a reasonable rendering size.

Percentage-based dimensions: An SVG with width="100%" height="100%" has no intrinsic size. The Canvas API needs absolute pixel values to create a rendering surface. Replace percentage dimensions with absolute values like width="512" height="512".