How to Add a Favicon in WordPress

The quickest way to add a favicon in WordPress is the built-in Site Icon setting. Upload a square image there, save, and WordPress adds the icon tags to every page for you. You only need a manual code method if you want to serve your own files, such as an SVG favicon with a PNG fallback.

A favicon is the small icon browsers show in tabs, bookmarks and history lists. WordPress calls it the Site Icon and also uses it for app and home-screen shortcuts. A vector file stores a design as mathematical paths instead of pixels, so it can scale without blurring. SVG (Scalable Vector Graphics) is the common web format for vector artwork. Raster formats such as PNG are pixel grids. They look sharp only at the size they were exported for.

Method 1: Set the Site Icon in the WordPress dashboard

Where the setting appears depends on your theme type and WordPress version. Classic themes use the Customizer. Block themes use the Site Editor, and recent WordPress releases also list the option on the General Settings screen. If you don't see one location, check the others.

Classic themes: go to Appearance > Customize > Site Identity, then click Select site icon.
Block themes: open Appearance > Editor, select the Site Logo block in the header, and turn on the option to use the logo as the site icon. Alternatively, look for Site Icon under Settings > General.
Upload a square image or pick one from the Media Library. Crop it if WordPress prompts you.
Click Publish in the Customizer, or Save in the editor or settings screen.

The Site Icon screen states the minimum size it expects, and that guidance is a documented WordPress requirement. Use a square image at least that large, because WordPress generates its smaller icon sizes from your upload. A larger, clean source produces better downscaled versions than a small one.

Why your SVG logo may not upload as a Site Icon

By default, WordPress does not allow SVG uploads to the Media Library, so the Site Icon option effectively needs a raster image such as PNG. Export a square PNG from your vector logo file and upload that. Some plugins enable SVG uploads, but SVG files can contain scripts. Allow them only from trusted sources, and use a plugin that sanitizes the files. If you want the browser to receive an actual SVG favicon, use the manual method below.

Method 2: Add favicon code manually

The manual method gives you full control over which files are served. Place your icon files in a child theme folder so a parent theme update does not remove them. Then add the snippet below to the child theme's functions.php file or to a code-snippets plugin. This example serves an SVG favicon to browsers that support it, with a PNG fallback for the rest. Adjust the file names to match yours.

add_action( 'wp_head', function () {
    $dir = get_stylesheet_directory_uri();
    echo '<link rel="icon" href="' . esc_url( $dir . '/favicon.svg' ) . '" type="image/svg+xml">' . "\n";
    echo '<link rel="icon" href="' . esc_url( $dir . '/favicon.png' ) . '" type="image/png">' . "\n";
    echo '<link rel="apple-touch-icon" href="' . esc_url( $dir . '/apple-touch-icon.png' ) . '">' . "\n";
} );

Don't use both methods at once. If a Site Icon is set, WordPress already outputs its own icon tags, and duplicate tags make it unclear which icon a browser will pick. Remove the Site Icon before relying on the code, or keep the Site Icon and skip the code. Editing functions.php directly can break a site if the code has a syntax error, so keep a backup or test on a staging copy first.

Preparing logo artwork that works as a favicon

Favicons display very small, so a full logo with a wordmark usually becomes unreadable. A wordmark is the part of a logo that spells out the name in type. These are design recommendations, not WordPress requirements:

Use the simplest form of the mark: a symbol, monogram or single letter rather than the full lockup (the fixed arrangement of symbol and name).
Place it on a square artboard with a little padding so it is not clipped or cramped.
Remove fine strokes, small text and subtle gradients that disappear at tab size.
Convert type to outlines in the SVG so the letterforms don't depend on installed fonts.
Check contrast against both light and dark browser themes. A transparent background can make a dark mark vanish on a dark tab bar.
Export the PNG from the vector master instead of resizing an existing small raster file.

Two cautions about files. An .svg extension does not prove a file is clean vector artwork, because an SVG can embed a raster image inside it. Open the file in a vector editor and confirm it is made of paths. Having a logo file also does not mean you have permission to use it. Confirm your usage rights before publishing someone else's mark.

How to check that the favicon is working

Open your site in a private or incognito window. Browsers cache favicons aggressively, so a normal window may keep showing the old icon.
View the page source and search for rel="icon". Confirm the tags point to your files and appear only once per format.
Open each icon file path directly in the browser to make sure it loads and is not a missing-file error.
Clear any caching or optimization plugin cache, and your host or CDN cache if you use one, then reload.
Check the tab in both light and dark browser themes, and on a phone if home-screen icons matter to you.

Information gaps: this guide does not cover browser-by-browser SVG favicon support or exact icon dimensions, because no verified data on them was supplied. Treat the size shown on your WordPress Site Icon screen as the requirement, and confirm SVG behavior by testing in the browsers your audience uses.