logoredraws.com

Choose a favicon size for Divi

Divi uses the WordPress Site Icon for its favicon. Supply a square image of at least 512 × 512 pixels, exported from your vector logo and designed to read at tab size.

Published

Contents
  1. The short answer
  2. Why a 512-pixel square works
  3. Where to set it
  4. Vector logo in, raster favicon out
  5. Design for the smallest size, not the largest
  6. Check your rights to the artwork
  7. If the new icon does not appear

The short answer

In current Divi setups, the favicon is usually the standard WordPress Site Icon, set in the Customizer under Site Identity, rather than a Divi setting with its own dimensions. WordPress asks for a square image of at least 512 × 512 pixels, so that is the size to supply. WordPress then generates the smaller versions that browsers and devices request.

Evidence gap: no Divi-specific documentation was available for this article. Check where the favicon field sits in your installed version. Older Divi releases offered a favicon upload in the theme's own options panel. If your version still shows one, read the guidance next to that field before relying on the WordPress figure.

Why a 512-pixel square works

The Site Icon cropper requires a square, so a non-square logo will be trimmed or need padding. A 512-pixel source gives WordPress room to downscale into the sizes it outputs. In core WordPress these are typically 32 × 32 for browser tabs, 180 × 180 for the Apple touch icon, 192 × 192 for Android home screens and 270 × 270 for Windows tiles. Shrinking a larger image produces cleaner edges than enlarging a small one. A source larger than 512 pixels is accepted but gains little, because every output is smaller. To confirm what your site actually serves, view the page source and look for the icon tags in the head section.

Where to set it

  • In the WordPress dashboard, go to Appearance, then Customize, then Site Identity.
  • Under Site Icon, select or upload your square image.
  • Crop if prompted, keeping the mark centred with a little breathing room.
  • Publish the change, then check it in a fresh browser window.

Vector logo in, raster favicon out

The file you upload as a Site Icon is a raster image. By default, the WordPress media library does not accept SVG uploads, and the crop step works on bitmap images. Keep your vector master as the source file and export a PNG from it at 512 × 512 pixels. The master might be an SVG, AI, EPS or PDF file.

A vector file extension does not guarantee editable vector artwork. An SVG or PDF can simply wrap an embedded bitmap, and some files are only low-resolution previews. Open the file in a vector editor and switch to outline or wireframe view. Real paths show as editable shapes, while an embedded image shows as a single box. If the logo turns out to be raster, exporting it at 512 pixels will not add detail it never had.

Browsers can also use an SVG favicon declared directly in the page markup. That is separate from the Site Icon field. It needs a plugin or custom theme code, plus a raster fallback for browsers that lack support. Support varies by browser and version, so check current browser documentation before relying on it.

Design for the smallest size, not the largest

Most people will see your icon at roughly 16 to 32 pixels in a browser tab. Design for that size even though you upload 512. A full logo lockup with a wordmark rarely survives this reduction. A standalone symbol, monogram or initial usually reads better. Thin strokes, fine gaps and small text fill in or disappear, while bold shapes and strong contrast hold up.

  • Start from the simplest version of the mark, such as a symbol or monogram.
  • Create a square artboard and leave modest padding around the mark.
  • Thicken strokes and remove details that blur at small sizes.
  • Decide between a transparent background and a solid square. Transparent icons can disappear on dark or light tab bars.
  • Preview the artwork at 16 and 32 pixels before exporting.
  • Export a 512 × 512 PNG and keep the vector master for future edits.

Check your rights to the artwork

Being able to download a logo file does not mean you may modify it or use it as a site icon. If you are simplifying a client's or third party's mark, confirm that you have permission to adapt the artwork. Check that any fonts in it are licensed for that use, and that using the trademark is authorised.

If the new icon does not appear

Browsers cache favicons aggressively, so an old icon can linger after you publish a new one. Check in a private window or a different browser. Clear any caching plugin or server cache. Confirm in the page source that the icon tags point to the newly uploaded image.