How to Add a Favicon to Your WordPress Blog or Website (Guide)

WordPress / By / February 7, 2026
WordPress favicon setup step-by-step guide visual

A favicon (short for “favorite icon”) is the small icon that appears in browser tabs, bookmarks, mobile home screens, and browser history next to your site’s name. It’s one of the simplest branding elements — yet many sites still use the default WordPress “W” logo or no favicon at all. With mobile-first browsing, PWA support, and favicon sizes ranging from 16×16px to 512×512px, having a sharp, custom favicon is essential for professionalism, brand recognition, and user trust.

At Cope Business, we always ensure clients have optimized favicons during our technical SEO audit services — it’s a tiny detail that makes a big difference in perceived quality.

This beginner-friendly guide shows you three easy ways to add (or change) a favicon in WordPress — all without coding.

Why Add a Custom Favicon?

  • Brand Recognition — Instantly shows your logo in every tab/bookmark
  • Professional Look — Removes the default WordPress “W” icon
  • Mobile & PWA — Appears on home screens and app icons
  • Trust & Polish — Small details signal attention to quality
  • SEO & UX — Consistent branding improves user retention signals

Recommended Favicon Sizes & Formats

  • Standard — 32×32px (ICO or PNG)
  • High-resolution — 180×180px (Apple Touch Icon), 192×192px (Android), 512×512px (manifest)
  • Best Format — .ico (widely supported), .png (transparent), .svg (vector – modern browsers)

Create one 512×512 PNG — WordPress will generate all sizes automatically.

Method 1: Using the WordPress Customizer (Built-in – Easiest)

Works on most modern themes (Astra, GeneratePress, Kadence, Blocksy, etc.).

Steps

  1. Go to Appearance > Customize.
  2. Look for Site Identity (usually near the top).
  3. Scroll to Site Icon (or “Favicon / Site Icon”).
  4. Click Select Image → Upload your 512×512 PNG (or any square image ≥ 512px).
  5. WordPress auto-generates all required sizes (16×16, 32×32, 180×180, etc.).
  6. Click Publish.

Done! Clear your browser cache (Ctrl + F5) to see the new favicon in tabs.

Pros: Native, no plugins, automatic size generation.
Cons: Some older themes don’t support Site Icon (use Method 2 or 3).

Method 2: Using a Plugin (Best for Full Control & Older Themes)

Plugins give you more options, favicon preview, and compatibility.

Recommended Plugin: Favicon by RealFaviconGenerator (Free)

  1. Install Favicon by RealFaviconGenerator from Plugins > Add New.
  2. Go to Appearance > Favicon.
  3. Upload your master image (recommended: 260×260px minimum, square PNG).
  4. Click Generate favicon → Plugin creates all formats (ICO, PNG, Apple Touch, Android, manifest).
  5. Click Install favicon → All files are added automatically.
  6. Done — works on all browsers/devices.

Alternative Plugin: All in One Favicon (free) — simple upload, supports multiple formats.

Pros: Generates perfect multi-device favicons, easy preview.
Cons: Adds one small plugin.

Method 3: Manual Upload (For Advanced Users or Full Control)

No plugin needed — works on any theme.

Steps

  • Prepare files:
    • Create favicon.ico (32×32 or multi-size) using favicon.io or RealFaviconGenerator.net
    • Optional: apple-touch-icon.png (180×180), android-chrome-192×192.png, etc.
  • Upload files via FTP or hosting file manager to your theme root:
    • /wp-content/themes/your-theme/favicon.ico
    • Or better: /wp-content/uploads/01/favicon.ico
  • Add to header (via child theme or WPCode):
PHPfunction cope_add_favicon() { echo '<link rel="icon" type="image/x-icon" href="' . get_site_url() . '/favicon.ico">'; echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_site_url() . '/apple-touch-icon.png">'; } add_action('wp_head', 'cope_add_favicon');
  • Clear browser cache and test.

Pros: No plugin, full control.
Cons: Manual file management, no auto-generation.

Best Practices for Favicons

  • Use 512×512 PNG as master image — WordPress/plugins generate smaller sizes
  • Prefer .ico for maximum compatibility (older browsers)
  • Add apple-touch-icon and manifest.json for PWA/home screen support
  • Test everywhere: Chrome, Firefox, Safari, Edge, mobile home screens
  • Performance — Keep file sizes small (<100KB)
  • SEO — Consistent branding improves trust signals

Final Thoughts

Adding a custom favicon in WordPress is a quick branding upgrade that makes your site look polished and professional. Use the Site Identity option in the customizer for the easiest method, or Favicon by RealFaviconGenerator for perfect multi-device support — both take under 5 minutes.

A great favicon is a small detail that builds big trust.

Need help adding a favicon, optimizing images, or improving your site’s overall branding & performance? Contact Cope Business for a free technical SEO consultation — we’ll review your site and implement a professional, consistent look across every device.

Was this article helpful?
YesNo

Related Posts