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)?

  • 1
    In general, browsers do a better job of resizing images optimised to the individual user’s settings than Illustrator/Photoshop on your machine could ever hope to do, so it’s usually a good idea to go for the maximum size you may need and have it downscale in the browser. That doesn’t mean a 10 MB, 10,000 x 15,000 px logo, of course—that would be silly; but if the actual size in pixels on a Retina screen ends up as, say, 363 x 712 px, upload at that size for all cases and let the user’s browser handle the downscaling. – Janus Bahs Jacquet Nov 15 '15 at 17:18
  • For responsive sizes you could export your logo as a .svg file – johnp Nov 16 '15 at 20:15

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: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.