Site Identity – Multiple files for various icon sizes?

  • I was super excited to the see Site Identity image option in the Customizer, but I was surprised that it only allows for one file upload.

    It’s been my standard practice (and widely recommended, best I can tell) to create a different file for the favicon than I would for the apple app icon, for instace, since a file that looks great at 512px doesn’t always look very good at 16px. And a file that looks great at 16px rarely looks ideal for larger sizes.

    Is there any way to make this happen? Or do I have to eschew the Customizer option entirely if I want multiple files for more carefully designed icons at each size?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Every tool will use the exact same icon just resized.

    If you want to use different images for each different size, you will need to do code it manually yourself

    https://iconhandbook.co.uk/reference/examples/favicons/

    @christinablust

    Apple icon is a bit special because of high resolution,
    but more and more I try to design my icons in Illustrator at large size transparent vector (e.g. 256×256 pixels png), until it works rather well at very small size (e.g. 20×20 / 32×32 pixels at smallest). But like you mention, it’s hard to make so much of size gap with same file.

    After, as it’s just impossible to make “one size fits all”, I sometimes need to make 2 versions (kinda hd for 256px & higher, and kinda small for, er.. smaller).

    You can also use CSS media queries to change icon file according to screen/device display size – just need a bit of CSS customization. We often do that in email design works, like this: if screen size is small or <400 pixels wide, we show icon-smartphone.png. (instead of normal icon for website on desktop).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Site Identity – Multiple files for various icon sizes?’ is closed to new replies.