Mobile app version of vmapp.org
Login or Join
Speyer780

: Sizes of images used as Logos on Websites This might sound off-topic, but really this is the closest related StackExchange site I could find. I'm developing a site based on the Porto theme.

@Speyer780

Posted in: #Images #Resolution #WebsiteDesign

This might sound off-topic, but really this is the closest related StackExchange site I could find.

I'm developing a site based on the Porto theme. The documentation is really nice, but this is left out. This is only minorly relevant.

I'm unsure of some things. There's a lot that's bugging me in: Theme->General->Logo, Icons.

What size should the uploaded logo be (I have it in vector format)? Should it be in a higher resolution or should it be in it's native resolution (the resolution in which it's going to be shown)? Should I just upload it in the largest available quality, and let it be downscaled (will this affect performance?)? How should my Apple Retina logo be different?

I have another question regarding site icons - favicons. What resolutions should my apple icons be? In a large resolution or in their native resolution?

What should my Apple iPhone Icon (recommended: 57px X 57px), Apple iPhone Retina Icon (recommended: 114px X 114px), Apple iPad Icon (recommended: 72px X 72px) and Apple iPad Retina Icon (recommended: 144px X 144px) image sizes be? Should I upload images in the recommended format or just upload a higher-quality one and let it get scaled down (will this affect performance)?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Speyer780

1 Comments

Sorted by latest first Latest Oldest Best

 

@Shelley591

For the favicon, I use Icon Slate to create an ico file. Inside that file are two versions, a 16px version, and a 32px version (2x). The browser then is smart enough to switch between the two, but it's still in one file, so you don't have to make extra markup.

As for the icons for iOS devices, I'd recommend reading these docs: developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme