Skip to main content
C
christophecuny
Inspiring
April 22, 2018
Answered

creating a square format from a rectangular logo

  • April 22, 2018
  • 1 reply
  • 6765 views

Hello Community,

This is a very basic question. I am an illustrator newbie. Please let me know if it is best posted elsewhere.

I need to design a series of Favicons for a site. As you know, Facicons are square, with sizes ranging from 16x16 and multiples thereof, in a bitmap format (I will use png) and a transparent background.

The logo I have is rectangular and vertical. I have traces it in AI. And I know how to export to png. But the problem is that what I need to exports to png is not just the rectangular logo, but also a transparent frame around it that is square, so that it can be used as a Favicon. And that's where I get really confused. I know how to change the dimensions of the logo (using the control panel for now) but obviously, that is not what I want. It is the canvas, I guess, that I want to turn into a square, but I get confused with artboards and I don't know what is exported and what isn't.

Bottom line. How to I create a square format with transparent background upon which the logo is centered so that the resulting export is a transparent square with the logo?

Thank you for taking pity on me and my puny AI skills...

Best regards

Chris

    This topic has been closed for replies.
    Correct answer Jacob Bugge

    Christophe,

    If you set your Artboard to 152x152 pixels and ensure that it is placed with whole/integer pixel X,Y values at its corners, and place the artwork centred, then your PNG24 will give you the desired full transparency (use Artboards).

    1 reply

    Monika Gause
    Community Expert
    Monika GauseCommunity Expert
    Community Expert
    April 22, 2018

    You probably will have to create a square version of the logo.

    When looking close you will notice that the vast majority of favicons differ from the companies' logos.

    C
    christophecunyAuthor
    Inspiring
    April 22, 2018

    Hi Monika,

    The reason they look different is not because they've been squashed. It's because to display a logo at such a small size, it has to be simplified or stylised. But there is no way the logo itself is distorted to be square.

    Let's reason this. I may end up doing it in PS if I can't work out how to do it in Illustrator. This is what I would do to create a 152x152 favicon. I would create a new document with dimensions 152x152. It will not have a background layer so will be transparent. I would place the logo on top of the transparent background. The logo being tall and thin, I would scale it so it's height is 152. And whatever its width then becomes, it doesn't matter. I centre the logo in the square document. I export as PNG. I get a 152x152 transparent square with my logo on top, absolutely not distorted or reshaped.

    But how to do this directly from Illustrator?

    Jacob Bugge
    Community Expert
    Jacob BuggeCommunity ExpertCorrect answer
    Community Expert
    April 22, 2018

    Christophe,

    If you set your Artboard to 152x152 pixels and ensure that it is placed with whole/integer pixel X,Y values at its corners, and place the artwork centred, then your PNG24 will give you the desired full transparency (use Artboards).

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices