How to Add a Favicon to WordPress in 2026 (Without Plugins)
Learn the modern, lightweight method to add favicons, Apple Touch Icons, and manifest files to your WordPress theme in 2026 without using bloated plugins.
"Stop using plugins to add favicons in WordPress. They bloat your database and slow down TTFB. Instead, upload your icons to the root directory and add a few lines of code to your theme's functions.php file using the wp_head hook."
Up-to-date Feed
View AllIn the early days of WordPress, adding a favicon was a massive headache. Themes rarely supported it natively, and developers relied heavily on clunky plugins like "All in One Favicon" to get their logos to appear in the browser tab.
Fast forward to 2026, and those old plugins are still lingering in the WordPress ecosystem, dragging down site performance with unnecessary database queries and bloated PHP code.
If you are building a modern WordPress site, you do not need a plugin to add a favicon.
In this guide, we will walk you through the optimal, high-performance method to add favicons, Apple Touch Icons, and Android web app manifests to your WordPress site entirely via code.
Why You Should Avoid Favicon Plugins
Every plugin you install on WordPress carries a performance cost. A plugin dedicated solely to injecting a few lines of HTML into your <head> tag is a massive waste of resources.
- Database Bloat: Many plugins store base64 encoded strings of your images directly in the
wp_optionstable, slowing down every page load. - TTFB Impact: Executing the plugin's PHP logic adds milliseconds to your Time to First Byte (TTFB).
- Security Risks: Abandoned utility plugins are the #1 attack vector for WordPress vulnerabilities.
Method 1: The Native WordPress Customizer (Easiest)
Before writing any code, it is worth mentioning that WordPress Core has supported native favicons (referred to as "Site Icons") since version 4.3.
If you just need a basic setup:
- Go to your WordPress Dashboard.
- Navigate to Appearance > Customize.
- Click on Site Identity.
- Under "Site Icon", upload a square image (at least 512x512 pixels).
- Click Publish.
WordPress will automatically crop the image and generate the necessary sizes.
However, there is a catch. The native Customizer often fails to generate the specific modern sizes required by strict Progressive Web Apps (PWAs) or the precise apple-touch-icon resolutions preferred by iOS devices.
For total control, developers should use Method 2.
Method 2: The Developer Way (functions.php)
To guarantee your site looks perfect across Chrome, Safari, iOS, and Android, you should generate your own icon package and inject it manually.
Step 1: Generate Your Icon Package
First, design your logo in an SVG or high-resolution PNG format. Then, use a modern generator to create the required files:
favicon.ico(Legacy browsers)favicon-16x16.png&favicon-32x32.png(Modern desktop)apple-touch-icon.png(180x180 for iOS)android-chrome-192x192.png&android-chrome-512x512.png(Android/PWA)site.webmanifest(For PWA installation)
Step 2: Upload to the Root Directory
Using FTP or your hosting file manager, upload all these files directly to the root directory of your WordPress installation (the same folder that contains wp-config.php).
Placing them in the root is crucial because many bots and services hardcode requests to yoursite.com/favicon.ico.
Step 3: Inject the Code via wp_head
Now, open your active theme's functions.php file. We will use the wp_head action hook to safely inject the HTML link tags.
Add the following code:
function wtkpro_add_custom_favicons() {
// We add a version string ?v=1 for cache-busting
$version = '?v=1.0';
$site_url = get_site_url();
echo '<link rel="apple-touch-icon" sizes="180x180" href="' . $site_url . '/apple-touch-icon.png' . $version . '">';
echo '<link rel="icon" type="image/png" sizes="32x32" href="' . $site_url . '/favicon-32x32.png' . $version . '">';
echo '<link rel="icon" type="image/png" sizes="16x16" href="' . $site_url . '/favicon-16x16.png' . $version . '">';
echo '<link rel="manifest" href="' . $site_url . '/site.webmanifest">';
echo '<link rel="mask-icon" href="' . $site_url . '/safari-pinned-tab.svg" color="#5bbad5">';
echo '<meta name="msapplication-TileColor" content="#da532c">';
echo '<meta name="theme-color" content="#ffffff">';
}
add_action('wp_head', 'wtkpro_add_custom_favicons');
Why this is better:
- Cache Busting: Notice the
?v=1.0string. If you ever change your logo, simply change this to?v=1.1. Browsers will immediately fetch the new icon instead of serving the old cached version. - Zero Database Queries: This PHP function runs instantly without hitting your MySQL database.
- Full PWA Support: The inclusion of
site.webmanifestensures Android devices can prompt users to "Add to Home Screen."
Conclusion
By keeping your WordPress architecture lean and relying on the wp_head hook rather than third-party plugins, you guarantee a faster, more secure website.
(If you are also struggling with URL structures or caching issues, check out our tools for HTTP Header Inspection and Schema Generation to further optimize your WordPress technical SEO).
WebToolkit Pro — 150+ Free Tools
Developer tools, SEO utilities, converters and more — all free, all private, no sign-up.
wtkpro.site
Frequently Asked Questions
Q. Do I need a plugin to add a favicon to WordPress?
No. You should never use a plugin for favicons. Plugins add unnecessary database queries and bloated PHP logic. You can easily add a favicon via the WordPress Customizer (Site Identity) or by editing functions.php.
Q. What is the best favicon size for WordPress in 2026?
You need a 16x16 and 32x32 standard .ico or .png file for desktop browsers, a 180x180 .png for Apple Touch Icons (iOS), and a 192x192 / 512x512 .png for Android devices.
Q. Why isn't my WordPress favicon updating?
Favicons are aggressively cached by browsers. If you update your favicon but don't see the change, you must clear your browser cache, or better yet, use cache-busting by appending a version query string to the URL (e.g., favicon.ico?v=2).
Abu Sufyan
Lead Systems Architect & Performance Engineer
Abu Sufyan specializes in V8 execution benchmarking, React architecture, and enterprise-grade technical SEO.