Set a favicon in the Blocksy theme

The short answer

Blocksy is a WordPress theme, and a favicon on a Blocksy site is normally set through WordPress's built-in Site Icon feature rather than a separate theme-only setting. You open the Customizer, find the site identity controls, upload a square image, crop it if needed, and publish. WordPress then outputs the favicon and related app icon tags in the page head.

Blocksy reorganizes parts of the Customizer, and site identity options are commonly grouped with the header's Logo element instead of a standalone Site Identity panel. No Blocksy-specific documentation was supplied for this article, so treat the exact menu path as something to confirm in your installed version.

Steps in Blocksy

• 1. In the WordPress dashboard, go to Appearance, then Customize.
• 2. Look for the site identity options. In Blocksy these are typically reached by opening the header builder and selecting the Logo element. If a Site Identity panel is visible, use that instead.
• 3. Find the Site Icon control and choose Select or Change Site Icon.
• 4. Upload a square image or pick one from the Media Library, then crop to a square if WordPress prompts you.
• 5. Publish the Customizer changes.
• 6. Check the browser tab in a private window or after clearing the cache. Browsers often hold on to an old favicon after it has been replaced.

What file to upload, and where your vector logo fits

WordPress Site Icon expects a square image. Its own guidance recommends at least 512 by 512 pixels. It then generates smaller raster sizes for browser tabs and device home screens. In practice this means a raster file, usually PNG, not an SVG. Standard WordPress also blocks SVG uploads to the Media Library by default for security reasons.

Your vector logo is still the right starting point. Keep the SVG, AI, EPS or PDF as the master file and export a square PNG from it at 512 by 512 pixels or larger. Exporting from vector gives you clean edges at every size WordPress produces. Upscaling a small raster logo will not.

• Simplify for small sizes: a favicon is shown very small, so a full wordmark rarely reads well. A logomark, monogram or single initial usually works better.
• Compose for a square: place the mark on a square artboard with balanced padding before exporting, so the WordPress cropper does not cut into it.
• Check transparency: a transparent PNG background can look different on light and dark browser tabs, so preview both.
• Confirm the artwork is truly vector: a file ending in .svg or .eps can still contain an embedded raster image or a low-resolution preview. Open it in a vector editor and check for editable paths before relying on it for a crisp export.

Raster Site Icon vs. an SVG favicon

Approach | What it uses | Practical notes

WordPress Site Icon (standard route in Blocksy) | Square raster image, resized automatically by WordPress | No code needed; covers tab icons and app icons; image is raster

Manual SVG favicon | SVG file referenced with a link tag in the page head | Scales cleanly in browsers that support SVG favicons; needs a code snippet, child theme or plugin, plus SVG upload handling; keep a raster fallback

For most Blocksy sites, the Site Icon route is enough. An SVG favicon is an optional extra for site owners who want it and are comfortable editing head output. It does not replace the raster icons that devices use for home-screen shortcuts.

Rights to the logo

Being able to download a logo file is not the same as having permission to modify it, crop it into an icon, or use its fonts and trademarks. If the favicon is for your own brand, this is straightforward. If it is based on a client's or third party's logo, confirm the usage rights first.

Gaps in this guidance

No version-specific Blocksy documentation, screenshots or test results were supplied. Menu labels and the location of the Site Icon control may differ between Blocksy and WordPress versions. If the control is not where described, search the Customizer for Site Icon or check the theme's current documentation.