How to convert SVG to ICO on iPhone
This is the correct way to make a favicon: start from the vector. An SVG is drawn fresh at the icon's exact size instead of being resampled from a bitmap that was made for some other size — and at 16 or 32 pixels, that difference is plainly visible.
The ICO size constraints
ICO is not a free-form image format, and Apple's ICO encoder — which Convexy uses — is stricter than the container itself. It accepts square images only, at exactly these pixel sizes:
16 · 24 · 32 · 48 · 64 · 72 · 128 · 256
Any other dimension — a non-square image, or a square at an unlisted size like 100 or 512 — is refused by the encoder, which fails rather than resizing on your behalf. Every image therefore has to be snapped onto that grid first.
What Convexy does with your SVG:
- It renders the SVG with WebKit — the engine Safari uses — so gradients, clipping paths and CSS styling inside the file behave the way they do in a browser.
- The result is fitted onto a square canvas at the largest permitted size, normally 256x256.
- The fit preserves the aspect ratio — the artwork is never stretched or cropped — and the leftover area is left transparent, not filled with white.
- Set a maximum dimension in Options and Convexy drops to the largest allowed size at or below your cap. Ask for 100 and you get 64, because that is the largest value on the grid that fits.
A wide logo makes a bad icon, and no converter can fix that. If your SVG is a horizontal wordmark, aspect-fitting it into a square leaves a thin strip of artwork surrounded by transparency. Technically correct; visually useless at 16px. Draw a square icon variant of your mark — usually just the symbol, without the words — and convert that. This is the single biggest determinant of whether your favicon looks professional.
Why vector is the right starting point
An SVG contains drawing instructions, not pixels. Rendered at 32px, the renderer computes the shapes fresh at 32px, so edges land cleanly on the pixel grid. Rendered at 256px, likewise. There is no resampling and no accumulated blur.
Converting from a PNG means downscaling a bitmap that was drawn for a different size, which softens edges — and at icon sizes, where you have only a handful of pixels to work with, softness reads as sloppiness. If the vector exists, use it. PNG to ICO is the fallback for when it does not.
Two things that break SVG rendering
- No width, height or viewBox. An SVG without any of these has no intrinsic size, so nothing tells the renderer how large to draw it. Convexy fails the conversion rather than guessing a size and silently giving you the wrong thing. Add a
viewBoxto the root element in a text editor and try again. - Text that relies on a font. If the SVG references a typeface by name and that font is not on the device, the renderer substitutes a different one — and your wordmark comes out in the wrong face. The standard fix, and one you should apply to any logo you distribute: convert text to outlines (paths) before exporting. The letters become shapes and render identically everywhere.
Transparency survives. SVGs are almost always drawn on a transparent background, and ICO supports an alpha channel, so it is carried straight through with nothing flattened onto white. Icons need this — they sit on dark taskbars, light browser tabs and coloured bookmark bars, none of which you control.
Where the ICO goes
For a website, upload the file to your site root as favicon.ico. Browsers request that path by default even when no link tag points at it, and some readers and bookmarking tools look nowhere else. Then declare PNG and SVG icons in your <link rel="icon"> tags for modern browsers, which prefer them. ICO is the compatibility floor; it is not the whole story in 2026.
All of this happens on your device — no upload, no account, no server. Convenient when the file is an unreleased logo or a client's brand asset that has no business on a stranger's server.
How to do it
-
Make sure the SVG is square-ish and self-contained
Use a square icon variant of your logo rather than a wide wordmark, and convert any text to outlines in your design tool so it does not depend on a font being installed.
-
Bring the SVG in
Tap Browse files and pick the .svg from Files or iCloud Drive, or share it into Convexy. SVGs do not appear in Photos.
-
Choose ICO
An SVG can be rendered to PNG, JPG, WebP, ICO or PDF. Tap ICO.
-
Leave the size alone for a 256px icon
By default you get the largest permitted size, 256x256. To force something smaller, set a maximum dimension in Options — Convexy snaps to the largest allowed value at or below it (16, 24, 32, 48, 64, 72, 128, 256).
-
Convert and save
Save the .ico to Files, then upload it to your website root as favicon.ico. Keep the SVG — it is your master, and you can re-render any size from it later.
Common questions
What size should I make my favicon?
256x256 — the largest ICO supports, and the default here. Browsers and Windows scale down from it as needed. Design for the small end though: whatever you draw has to survive being shrunk to 16px, so a simple, high-contrast mark beats a detailed illustration every time.
Why is SVG a better source for an icon than PNG?
Because a vector is rendered fresh at the target size, so the shapes land cleanly on the pixel grid. A PNG has to be resampled from whatever size it happened to be, which softens edges. At 16 or 32 pixels you have very few pixels to spare, and that softness is immediately visible as a fuzzy, amateurish icon.
What if my SVG isn't square?
It is scaled to fit — proportions preserved, never stretched or cropped — and centred on a transparent square canvas. A wide wordmark therefore becomes a thin strip of artwork with a lot of empty space around it. That is faithful to your file and wrong for an icon. Make a square variant of the mark and convert that instead.
Why did my SVG fail to convert?
Almost certainly because it has no width, height or viewBox attribute, which means it has no intrinsic size for the renderer to work from. Convexy fails rather than inventing a size. Open the file in any text editor and add a viewBox to the root svg element.
Why does the text in my icon look wrong?
The SVG references a font that is not installed, so the renderer substituted another one. This is how SVG text works everywhere, not a converter bug. Convert text to outlines or paths in your design tool before exporting — the letters become shapes and then render identically on any device.
Do I need an ICO at all, or can I just use an SVG favicon?
Modern browsers accept SVG and PNG favicons declared in link tags, and an SVG favicon is genuinely the nicest option — it scales perfectly and supports dark mode via CSS. But browsers still request /favicon.ico by default, and some tools look only there. The robust answer is to ship both: an ICO at the root as a fallback, and an SVG or PNG in your link tags.