WordPress favicon generator
WordPress can take one square picture under Site Identity, but a full set of icons gives crisper tabs and a proper home screen icon. Build the set here and copy the functions.php code that loads it. Nothing is uploaded: every file is made in your browser.
Live preview
Making your icons…
Source
Icon source
One to 3 characters, such as S or Ab.
rgb(255, 255, 255) · hsl(0, 0%, 100%)
Style
Background
rgb(33, 117, 155) · hsl(199, 65%, 37%)
Rounding applies to the browser and Android icons. The touch icon and the maskable icon are always full squares.
Device preview
Making your icons…
Your files
Your files appear here as soon as the icon is ready.
Site details and code
Shown when someone installs your site as an app. Up to 45 characters.
Used under the icon on a home screen. Up to 12 characters.
Where you will put the files on your site, such as / or /icons/.
Save this as site.webmanifest next to your icons.
{
"name": "My WordPress Site",
"short_name": "My Site",
"icons": [
{
"src": "/wp-content/uploads/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/wp-content/uploads/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/wp-content/uploads/favicon/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#21759b",
"background_color": "#21759b",
"display": "standalone"
}
Paste these lines inside the <head> of every page.
<link rel="icon" type="image/x-icon" sizes="48x48" href="/wp-content/uploads/favicon/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/favicon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/favicon/favicon-32x32.png"> <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/wp-content/uploads/favicon/apple-touch-icon.png"> <link rel="manifest" href="/wp-content/uploads/favicon/site.webmanifest"> <meta name="theme-color" content="#21759b">
Add this to your root layout (app/layout.tsx).
import type { Metadata, Viewport } from "next";
export const metadata: Metadata = {
icons: {
icon: [
{ url: "/wp-content/uploads/favicon/favicon.ico", sizes: "48x48", type: "image/x-icon" },
{ url: "/wp-content/uploads/favicon/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/wp-content/uploads/favicon/favicon-32x32.png", sizes: "32x32", type: "image/png" },
],
apple: [
{ url: "/wp-content/uploads/favicon/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
],
},
manifest: "/wp-content/uploads/favicon/site.webmanifest",
};
export const viewport: Viewport = {
themeColor: "#21759b",
};
Add this to your theme's functions.php, with the icon files in the folder you typed above.
add_action( 'wp_head', 'add_site_favicon_links', 5 );
remove_action( 'wp_head', 'wp_site_icon', 99 );
function add_site_favicon_links() {
?>
<link rel="icon" type="image/x-icon" sizes="48x48" href="<?php echo esc_url( home_url( '/wp-content/uploads/favicon/favicon.ico' ) ); ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo esc_url( home_url( '/wp-content/uploads/favicon/favicon-16x16.png' ) ); ?>">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo esc_url( home_url( '/wp-content/uploads/favicon/favicon-32x32.png' ) ); ?>">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="<?php echo esc_url( home_url( '/wp-content/uploads/favicon/apple-touch-icon.png' ) ); ?>">
<link rel="manifest" href="<?php echo esc_url( home_url( '/wp-content/uploads/favicon/site.webmanifest' ) ); ?>">
<meta name="theme-color" content="#21759b">
<?php
}
More favicon ideas
How it works
Choose where the icon comes from
Type one to three characters, pick an emoji, choose a simple shape, or drop in your own PNG, JPG, WebP or SVG. Nothing is uploaded; the picture stays in this tab.
Style it
Pick a flat colour or a soft gradient, round the corners, and set the padding. The browser tab icon, the phone home screen icon and the Android icon all update as you change a setting.
Check every file
Each file is listed with its size and what it is for, so you can see that the touch icon fills its whole square and the Android icon keeps your logo inside the safe circle.
Download and paste
Download the package as one ZIP, with a plain-language README and ready-made snippets, or take the files one by one. Upload the icons to the folder you typed under Site details, then paste the lines for your HTML, Next.js or WordPress head.
Questions about a WordPress favicon
How do I make a WordPress favicon?
The page opens with the letters "W"; change it, the colours, the rounding and the padding as you like, and every file updates at once. Then open Site details and code, choose WordPress and copy it. The code already uses the folder /wp-content/uploads/favicon/. Put the files on your server first, then add the code, and open one of the icon addresses in a new tab to confirm it loads.
Should I use Site Icon in the Customizer instead?
For a quick fix, yes: Appearance, Customize, Site Identity accepts one square image of at least 512 pixels. Use these files when you want exact icons, a manifest and full control.
Where do I put the files for a WordPress favicon?
The folder is set to /wp-content/uploads/favicon/. Upload the files there by FTP or your host's file manager, because the Media Library does not accept the manifest file.
Is anything uploaded when I make a WordPress favicon?
No. The icons for your WordPress favicon are drawn by your own browser from the settings you pick, so nothing is sent to a server, and the page keeps working offline once it has loaded.
More free tools
View all toolsAbout these tools
Small tools, made by Sifency
Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.