Favicon in WordPress

The quick way (enough for most sites): Upload icon-512.png from your package as the site icon. Depending on your theme it's under Settings → General → Site Icon (since WordPress 6.5) or Appearance → Customize → Site Identity. WordPress creates the required sizes itself.

The full package (with favicon.ico, icon.svg and web app manifest):

  1. Upload the files via FTP to the root of your WordPress installation (where wp-config.php lives).

  2. Add the code to your child theme's functions.php:

    add_action('wp_head', function () { ?>
    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="theme-color" content="#ffffff">
    <?php }, 1);
    
  3. Remove the site icon: If an image is still set as Site Icon, remove it – otherwise WordPress prints its own icon tags as well.

Use a child theme, otherwise the code is gone after the next theme update.

← Back to the favicon generator