How you can rework logo to fit favicon of browser - 16x16px?

Question

Let's say, I have a logo of website, with size 120x50px. Favicon should be 16x16px to be supported by major browsers.How it is possible to rework some image, making it smaller nearly in 10 times, and save the basic look?

Answer 1

If you have a rectangular logo, you can either add space to the top and bottom to make it a square or you can crop part of the image. Best practice is the first option, so this answer will walk you how to do that. Once you have a square image, then you can make it the size you need for the Favicon.

If you don't have access to a paid tool such as Photoshop, I recommend the online Photopea editor, which is basically a free, online version of Photoshop (these instructions are basically the same for Photoshop if you do have it):

1. Go to https://www.photopea.com/
2. Open the image you need to resize (click Open from Computer)
3. Under the Image menu, select Canvas Size.
4. Change your 50px height to 120px and click Okay.
5. This will make your image a perfect 120x120 square.
6. Under the Image menu, select Image Size.
7. Change your width and height numbers to 16. (Note: some websites want multiple favicons of 512px, 48px, and 16px, so make sure you make it whatever is required by your site.)
8. Under File, select Export As. You can also skip steps 6 & 7 and just change the height and width when you export your image. (Note: If you're using Photoshop, this would be File > Save As.)
9. If your image has a transparent background and you want it to float, export it as a PNG. If it has a solid-color background, export it as a JPG. If you didn't change the size earlier, make it the size you need prior to exporting.
10. If you need to add a fill color for the extra space you added, you can add a background layer and fill that to the color you need before exporting. Let me know if you would like a walkthrough on how to do that.

I hope this helps!

Best,

Mindee