How to Add a Favicon in WordPress

The short answer

In WordPress, the favicon is called the Site Icon. Upload a square image through the Site Icon setting and WordPress generates the smaller versions that browsers, phones and app shortcuts request. You only need a separate favicon.ico file, or a plugin, if you have a specific reason to bypass that built-in feature.

A favicon is the small image shown in browser tabs, bookmarks and history lists. In a vector logo workflow, the favicon is a rasterized derivative of the logo. Rasterizing means converting the mathematically defined paths of a vector file into a fixed grid of pixels. At very small sizes, that conversion is the main design problem. Uploading the file is the easy part.

Where the Site Icon setting lives

The location depends on whether your site uses a classic theme or a block theme. Menu labels can also differ slightly between WordPress versions and admin languages, so treat the paths below as typical rather than guaranteed.

• Classic themes: go to Appearance, then Customize, then Site Identity. Look for the Site Icon option.
• Block themes: open the Site Editor and select the Site Logo block. Its settings include an option to use the logo as the site icon. Depending on your WordPress version, a Site Icon field may also appear under Settings, then General.
• If you cannot find either option, your theme or a plugin may have replaced or hidden it. Check the theme's documentation before installing a separate favicon plugin.

Step-by-step: adding the icon

• 1. Prepare a square raster image exported from your vector logo artwork. PNG is the safest choice because it supports transparency and is accepted by the Media Library.
• 2. Open the Site Icon setting for your theme type, as described above.
• 3. Choose Select Site Icon, then upload the image or pick it from the Media Library.
• 4. If WordPress offers a crop step, confirm that the crop is square and that nothing important is cut off.
• 5. Save or publish the change.
• 6. Verify the result using the checks in the final section.

The WordPress interface states that site icons should be square and at least 512 by 512 pixels. That figure is the documented upload requirement. Any advice below about how to design the artwork inside that square is a design recommendation, not a WordPress rule.

Adding a favicon.ico file specifically

ICO is a container format that can hold several bitmap sizes in one file. Browsers have long checked for a file named favicon.ico in a site's root directory, and some older tools still expect one. The Site Icon feature is built around standard image uploads and cropping, so it is not designed for ICO files. Use a PNG there.

If you need a true favicon.ico as well, create it outside WordPress and upload it to the site's root directory using your host's file manager or an SFTP client. A physical file in that location is usually served directly when the root file is requested. Your configured Site Icon still controls the icon references that WordPress adds to page markup. Uploading files to the server root is outside the WordPress admin. Confirm that your hosting plan allows it and keep a backup of anything you replace.

Gap: the supplied material does not confirm how every WordPress version behaves when no Site Icon is set and no favicon.ico exists, or how particular hosts and caching layers handle the root file. Test on your own site rather than assuming.

Preparing logo artwork that works at favicon size

A full logo that reads well on a business card often turns into a blur at tab size. The goal is a version of the mark built for the pixel grid. The pixel grid is the fixed array of square pixels that the icon is finally displayed on. Shapes that align with that grid render crisply. Shapes that fall between pixels are anti-aliased, which means edge pixels are blended to partial tones. At tiny sizes, that blending looks soft or muddy.

• Use the symbol, not the wordmark. Long lettering rarely survives at small sizes. A monogram or a single initial is usually more legible.
• Work on a square artboard. Design inside the same aspect ratio WordPress will crop to, so the crop step does not cut into the mark.
• Leave deliberate padding. Some platforms display icons in circles or rounded squares, so keep critical detail away from the corners.
• Simplify paths. Remove thin strokes, fine gaps, small counters and gradients that cannot resolve at small sizes. Counters are the enclosed spaces in letters such as o or e.
• Snap key edges to whole pixels. Preview the artwork at the small sizes you care about, then nudge horizontal and vertical edges onto pixel boundaries so they render sharp. Many vector editors offer a pixel preview or snap-to-pixel mode for this.
• Consider a separate small-size master. A hand-tuned version for the smallest sizes often outperforms a straight downscale of the large file.
• Check contrast against light and dark browser themes. A transparent background is convenient, but a dark mark can disappear on a dark tab bar.

Export the final upload as a PNG at the required square size or larger. Keep the editable vector master separately. WordPress stores and resizes the raster upload, not your source paths.

Checking the source file before you start

A file extension alone does not tell you what is inside. A file labeled SVG, EPS or AI can contain embedded raster images, outlined text or locked elements. Open it and confirm that the mark is made of editable vector paths before relying on it for pixel-level refinement. The file format also does not establish permission to use the logo. If the logo belongs to a client or a third party, confirm that you have the right to adapt it into a favicon.

Verifying the result

• Open the site in a private or incognito window. Browsers cache favicons aggressively, so a normal tab may keep showing the old icon.
• Clear any WordPress caching plugin, server cache or CDN cache if the change does not appear.
• View the page source and look for icon link elements in the head section. Their presence confirms that WordPress is outputting the Site Icon.
• Check the icon in a browser tab, in a bookmark, and as a home-screen shortcut on a phone if that matters for your site.
• Compare the icon at actual size against neighboring tabs. If it looks soft or illegible, return to the artwork and refine it on the pixel grid rather than just re-uploading.

Gap: the supplied evidence does not cover how search engines choose or display favicons in results, or how long their caches take to update. Treat any changes in search results as outside what this guide can confirm.