Generated package

WordPress — Theme Advanced favicon package. Ready to install.

Download the correct WordPress — Theme Advanced favicon package, place every file in the right location, and follow the exact installation steps for this stack.

Stack-specific filesExact snippet locationsCopy-ready guide
CMS9 files

WordPress — Theme Advanced

Advanced WordPress mode for custom theme developers who want full light/dark favicon control.

ZIP: favico-wordpress-theme-modern-package.zip

Folder: favico-wordpress-theme-modern-favicon/

  1. 1
    Download your favicon package.
    Download favico-wordpress-theme-modern-package.zip for WordPress — Theme Advanced.
  2. 2
    Extract this package in your project.
    Extract it in your project root. The package contains:
    Package structure
    favico-wordpress-theme-modern-favicon/
├── wp-content/themes/your-child-theme/assets/favicons/favicon.ico
├── wp-content/themes/your-child-theme/assets/favicons/favicon.svg
├── wp-content/themes/your-child-theme/assets/favicons/favicon-dark.svg
├── wp-content/themes/your-child-theme/assets/favicons/favicon-96x96.png
├── wp-content/themes/your-child-theme/assets/favicons/favicon-dark-96x96.png
├── wp-content/themes/your-child-theme/assets/favicons/apple-touch-icon.png
├── wp-content/themes/your-child-theme/assets/favicons/site.webmanifest
├── wp-content/themes/your-child-theme/assets/favicons/web-app-manifest-192x192.png
└── wp-content/themes/your-child-theme/assets/favicons/web-app-manifest-512x512.png
  3. 3
    Copy the favicon files to the correct location.
    Copy the generated files to wp-content/themes/YOUR-CHILD-THEME/assets/favicons/.
    Generated fileCopy toStatusPurpose
    favicon.icowp-content/themes/your-child-theme/assets/favicons/favicon.icoOptionalOptional classic browser fallback file. Keep it when useful, but do not link it by default in modern light/dark favicon snippets.
    favicon.svgwp-content/themes/your-child-theme/assets/favicons/favicon.svgRequiredLight-mode SVG favicon for modern browsers.
    favicon-dark.svgwp-content/themes/your-child-theme/assets/favicons/favicon-dark.svgOptionalDark-mode SVG favicon used with prefers-color-scheme: dark.
    favicon-96x96.pngwp-content/themes/your-child-theme/assets/favicons/favicon-96x96.pngRequiredLight-mode PNG fallback favicon.
    favicon-dark-96x96.pngwp-content/themes/your-child-theme/assets/favicons/favicon-dark-96x96.pngOptionalDark-mode PNG fallback favicon.
    apple-touch-icon.pngwp-content/themes/your-child-theme/assets/favicons/apple-touch-icon.pngRequirediPhone/iPad home screen icon.
    site.webmanifestwp-content/themes/your-child-theme/assets/favicons/site.webmanifestRequiredWeb app manifest containing app metadata and PWA icon references.
    web-app-manifest-192x192.pngwp-content/themes/your-child-theme/assets/favicons/web-app-manifest-192x192.pngRequired192×192 Android/PWA icon referenced by the web app manifest.
    web-app-manifest-512x512.pngwp-content/themes/your-child-theme/assets/favicons/web-app-manifest-512x512.pngRequired512×512 Android/PWA icon referenced by the web app manifest.
  4. 4
    Add the config snippet in wp-content/themes/YOUR-CHILD-THEME/functions.php.
    wp-content/themes/YOUR-CHILD-THEME/functions.php
    add_action('wp_head', function () {
    $base = get_stylesheet_directory_uri() . '/assets/favicons';
    ?>
    <meta name="color-scheme" content="light dark">
    <link rel="icon" type="image/svg+xml" href="<?php echo esc_url($base . '/favicon.svg?v=10'); ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/svg+xml" href="<?php echo esc_url($base . '/favicon-dark.svg?v=10'); ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="96x96" href="<?php echo esc_url($base . '/favicon-96x96.png?v=10'); ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="96x96" href="<?php echo esc_url($base . '/favicon-dark-96x96.png?v=10'); ?>" media="(prefers-color-scheme: dark)">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo esc_url($base . '/apple-touch-icon.png?v=10'); ?>">
    <link rel="manifest" href="<?php echo esc_url($base . '/site.webmanifest?v=10'); ?>">
    <?php
});
  5. 5
    Why this setup works.
    • The child theme stores favicon assets safely across parent theme updates.
    • wp_head injects the generated links into the final document head.

  6. Support Favico Studio

    Satisfied with the result?

    If Favico Studio helped you create your favicon faster, you can support the creator and help keep this tool free, fast, and available for everyone.

    ♥Support the creator→
  7. 6
    Start your app and verify the favicon URLs.
    Run command
    Clear WordPress/CDN/browser cache and reload the site.
    Verify URLs
    /wp-content/themes/YOUR-CHILD-THEME/assets/favicons/favicon.svg
View page source and confirm favicon links inside <head>
  8. 7
    Common mistakes to avoid.

    Editing the parent theme

    Wrong: Put code in parent theme functions.php

    Correct: Use a child theme functions.php

    Parent theme updates can remove your custom favicon code.

    Missing wp_head()

    Wrong: Theme head without wp_head()

    Correct: Make sure wp_head() is present before </head>

    The hook cannot output favicon links if the theme never calls wp_head().

  9. 8
    Final checklist.
    ✓ Correct stack selected.
    ✓ Correct package downloaded and extracted.
    ✓ Files copied to the exact folder shown in this guide.
    ✓ Config snippet added only when this stack requires it.
    ✓ Head/favicon snippet added to the exact head location shown in this guide.
    ✓ No /public/ or /static/ URL is used unless the framework explicitly requires it.
    ✓ favicon.ico is kept as fallback only, not actively linked as the main favicon.
    ✓ favicon.svg loads directly.
    ✓ favicon-dark.svg loads directly.
    ✓ site.webmanifest loads directly.
    ✓ Manifest icon PNG files load directly.
    ✓ Browser cache cleared and Favico Studio checker passes.