Configure a favicon in WoodMart

A favicon is the small square icon that browsers show in tabs, bookmarks and history lists, and that some devices use for home-screen shortcuts. WoodMart is a WordPress theme, so the favicon on a WoodMart store is usually set the same way as on any WordPress site: you upload a square image as the Site Icon. Configuring it takes a few minutes. Getting it to look sharp takes more work. A full logo rarely reads well at tab size, so you usually need a simplified mark refined on a pixel grid and exported as a raster image.

The short answer

In the WordPress dashboard, open Appearance, then Customize, then Site Identity, and use the Site Icon control to upload or choose an image. WordPress asks for a square image of at least 512 by 512 pixels and generates the smaller sizes it needs from that file. Publish the change, then check the result in a fresh browser session.

Some WoodMart releases have also offered a favicon field inside the theme's own settings panel. No confirmed documentation was available for this article about whether the current version still includes that field, where it sits, or how it interacts with the WordPress Site Icon. Check your installed version's theme settings and its documentation. Use only one method. If both are filled in, decide which one you want to control the icon and clear the other, so you don't end up with conflicting tags.

What WordPress actually stores: raster, not vector

Your logo may exist as vector artwork, but the Site Icon WordPress serves is a raster image, typically PNG. WordPress does not accept SVG uploads by default, and the Site Icon workflow is built around a square bitmap that gets cropped and resized. In practice, you keep a vector master for editing and upload a raster export made from it.

Before you rely on a supplied logo file, check what it contains. An SVG, AI, EPS or PDF extension does not prove the file holds editable vector paths. Many such files simply wrap an embedded raster image, and a raster preview can look identical to real vector artwork at normal zoom. Open the file in a vector editor and switch to an outline or wireframe view. Real paths show anchor points and outlines. An embedded image shows as a single rectangle. If the file is raster only, either redraw the mark as vectors or accept that the favicon will be limited by the quality of the source pixels.

Preparing a favicon from a vector logo

Starting materials

• A vector master of the logo with real, editable paths, not an embedded bitmap
• The brand's color values, plus a decision on whether the icon needs to work on both light and dark browser tabs
• Confirmation that you are allowed to adapt the artwork: being able to download a logo file is not the same as having permission to modify the mark, its typeface or the trademark it represents
• A vector editor that supports artboards set in pixels and pixel-grid snapping
• Administrator access to the WordPress site

Step 1: Choose what goes in the square

A horizontal logo with a wordmark becomes unreadable when shrunk into a small square. Use the brand's symbol, a monogram or a single initial instead. If no such element exists, any new or adapted mark should be approved by whoever owns the brand. Treat it as a reduced version of the logo, not a redesign done on the side.

Step 2: Set up small artboards on a pixel grid

Create square artboards at the sizes browsers commonly display, such as 16 by 16 and 32 by 32 pixels, plus one large artboard at 512 by 512 pixels for the WordPress upload. Turn on the pixel grid and snapping, and use whole-pixel units.

Step 3: Refine paths for the grid

Pixel-grid refinement means adjusting the vector shapes so their edges land on whole pixels at the target size. When an edge falls halfway across a pixel, it gets anti-aliased into a blurry gray band.

• Snap straight horizontal and vertical edges to whole-pixel boundaries
• Make strokes whole-pixel widths, and convert them to filled shapes before export so they scale predictably
• Remove hairlines, fine serifs, small counters and details that collapse into a smudge at small sizes
• Open up gaps between shapes so they stay visible after anti-aliasing
• Increase the weight of thin parts slightly instead of shrinking everything evenly
• Keep curves simple, and accept that the smallest version may need its own hand-adjusted shapes rather than a scaled copy of the larger one

Step 4: Settle text and color

If the mark includes letters, convert them to outlines in the favicon file. This removes any dependence on installed fonts and lets you adjust individual letterforms for the grid. Keep a separate copy with live text for future edits. Use a small number of flat, high-contrast colors. Gradients and subtle tints tend to disappear at tab size. A transparent background can work, but check that the mark stays visible against both light and dark browser themes. If it doesn't, put it on a solid shape.

Step 5: Export

Export the large artboard as a square PNG of at least 512 by 512 pixels for the WordPress Site Icon. Use transparency if your design relies on it. Keep the small-size artboards in your vector file as the reference for how the icon should render. WordPress resizes from the uploaded image, so the icon will look best at small sizes when the large export was already designed with grid-aligned, simplified shapes.

Step 6: Upload in WoodMart

• Go to Appearance, then Customize, then Site Identity
• Select the Site Icon control and upload the PNG
• Accept or adjust the crop so the mark sits centered with the margin you designed
• Publish the change
• If your WoodMart version also has a theme-level favicon field, make sure it is either empty or set to the same asset

Final inspection

• Open the site in a private or incognito window, since browsers cache favicons aggressively and a normal window may keep showing the old icon
• Clear any page-caching or optimization plugin, and any CDN cache, if the new icon does not appear
• View the icon in a browser tab at normal zoom and confirm the mark is recognizable, not a blur
• Check it against both a light and a dark browser theme
• View the page source and confirm there is a single coherent set of icon tags, not duplicates from the theme and WordPress pointing to different files
• Check a bookmark or home-screen shortcut on a mobile device if those uses matter to you

Evidence gaps

No version-specific WoodMart documentation, screenshots or release notes were available for this article. The WordPress Site Icon route described above is standard WordPress behavior. Anything about WoodMart's own favicon setting, including whether it exists in your version, what file types and sizes it accepts, and which setting wins if both are filled in, should be confirmed against the theme's current documentation or your installed theme settings before you depend on it.