Creating a Favicon in Figma?

Step 1: Set Up Your Figma File

Open Figma: Start by opening Figma and creating a new file.

Frame Setup: Create a frame that is 32×32 pixels, as this is the standard size for favicons. You can also create sizes (16×16, 48×48) if needed for various platforms.

• To create a frame, press `F` to select the frame tool, then click and drag or input the size directly in the properties panel.

Step 2: Design Your Icon

Keep It Simple: Since a favicon is very small, simplicity is key. Use basic shapes and minimal details.

Use Vector Shapes: Create your icon using vector shapes to ensure it scales well.

• Use the `Rectangle`, `Ellipse`, `Line`, and `Pen` tools to create your design.
• In this case make a Ellipse (press O) and dimensions (w=15, h=16).
  

  Create Eclipse

Step 3: Style Your Icon

Colors: Choose colors that are consistent with your brand. Ensure good contrast to make the icon stand out.

• Select your shapes/text and use the fill and stroke options in the properties panel to apply colors.
• Stroke fill color=2C8C44.

Outline: If your icon benefits from an outline, add a stroke to make it more distinct.

• Use the stroke settings in the properties panel to adjust the thickness and color.
• Make stroke in the shape with thickness = 3 .

Adjusting the shape: This will help in obtaining the desired shape.

• See the image attached and change the values as given in image.

Modifying the shape: To make the G of “w3wiki” logo.

Make a rectangle of w=12 and h=2 color=2C8C44 and adjust on the ellipse shape accordingly.

Select the whole shape and right click then select group selection.

Then press alt and drag frame of G created you will get the copy of the shape.

Then right click on the image and flip it horizontally.

Align both the shapes on white frame.

Step 4: Export Your Icon

Select the Frame: Click on the frame you created for your favicon.

Export Settings: Go to the export section in the properties panel and set the export format to PNG. Add multiple sizes if needed (e.g., 32×32, 48×48).

• Click the “+” icon in the export section to add different sizes.

Export the Favicon: Click the “Export” button and save your favicon to your computer.

Designing a favicon in Figma is a straightforward process that involves creating a small, recognizable icon that represents your website or brand.

We will be creating the following favicon using figma: