I can’t find the specs for the app icon size. Both PNG and SVG come out too large. I am down to 275px X 275px. Also, when I upload and SVG file the font changes and placement of an image in the icon moves slightly.
I created the image in Inkscape so I have several different SVG types to choose from. Anyone know which is best so that what I created actually shows up in my app?
Image 1 is what I created and want.
Image 2 is what show up on app opening page.
Image 3 is what displays in App Icon upload side bar.
Pixel size doesn’t count as much as the image size ratio does. Images are expanded or compressed to fit the container. In your case, I’d make sure you are using a 1:1 ratio, or a square…which looks to be the case.
As for the font on the image, that may be because you are using an SVG and it may be picking up the app’s font style. I’d recommend trying to create the image as a PNG.
I’m not sure what you mean by the image being two large, but you may need to pad some extra white spaces around the edges of the image, so that it will still fill the container, but the extra white side will make the image appear smaller in the container.
I’m not overly familiar with SVG files, but as I understand it, they are not exactly image files, but moreso a set of directions for the browser to draw the image on the fly and redraw based on the size needed, without any loss in quality. Since you have text characters as part of the image, it may be drawing those characters using whichever font is set in the app/browser/OS. Other graphics probably aren’t affected because they are not font/text based.
I’m not familiar with Inkscape, but I wonder if they have an option to convert text to a graphic or lock in the font, so the font you used to create the image sticks and isn’t affected when used in the app.
One last thing on the icon. I converted the font in the app icon to a path and made it small enough to look good in the app builder.
On my phone, a Galaxy S9 with the most recent OS update the icon for my app is still cut off on a few edges. How can I fix this? I have seen other Glideapp instances with the same issue.
You’ll have to design it with some extra white space around the edges to account for that trimming. If you did that already and the icon just isn’t updating on the device, then you’ll have to try uninstalling the app, clearing your browser cache and reinstall to see it the new icon shows up. If it’s just the device holding on to an old version of the icon, then your other users shouldn’t have a problem when they install it for the first time.
I can’t find the exact app icon specification as well and ended up having to experiment with a bunch of different dimensions, because even a square (I’ve triple-checked that it is indeed, a square) still shows up with some blue borders at the side when you save it to your homescreen, which is incredibly frustrating.
Here’s what I found worked:
Using 10 inches width x 11 inches height works perfectly - I.e there’s no background color showing at any sides. I guess you could try at lower dimensions, e.g. 4 inches width x 5 inches height and it should work, though I didn’t try it.
