Favicon and app icon generator
Make every icon your site needs from a letter, an emoji, a shape or your own image. Your picture never leaves 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(79, 70, 229) · hsl(243, 75%, 59%)
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 Website",
"short_name": "Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#4f46e5",
"background_color": "#4f46e5",
"display": "standalone"
}
Paste these lines inside the <head> of every page.
<link rel="icon" type="image/x-icon" sizes="48x48" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#4f46e5">
Add this to your root layout (app/layout.tsx).
import type { Metadata, Viewport } from "next";
export const metadata: Metadata = {
icons: {
icon: [
{ url: "/favicon.ico", sizes: "48x48", type: "image/x-icon" },
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
],
apple: [
{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
],
},
manifest: "/site.webmanifest",
};
export const viewport: Viewport = {
themeColor: "#4f46e5",
};
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( '/favicon.ico' ) ); ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo esc_url( home_url( '/favicon-16x16.png' ) ); ?>">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo esc_url( home_url( '/favicon-32x32.png' ) ); ?>">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="<?php echo esc_url( home_url( '/apple-touch-icon.png' ) ); ?>">
<link rel="manifest" href="<?php echo esc_url( home_url( '/site.webmanifest' ) ); ?>">
<meta name="theme-color" content="#4f46e5">
<?php
}
Favicon ideas
Each page below opens the tool with a starting icon and the code tab that suit the job, and answers the questions people ask about it.
- WordPress favicon generatorWordPress code included
- Next.js favicon and metadataNext.js code included
- Shopify favicon makerHTML code included
- Favicon for a plain HTML websiteHTML code included
- PWA icons and web app manifestManifest code included
- Favicon maker for a blogHTML code included
- Favicon for a portfolio websiteHTML code included
- App icon and favicon for a SaaS productNext.js code included
- Emoji favicon generatorHTML code included
- Letter favicon generatorHTML code included
- Turn a logo into a faviconHTML code included
- PNG to ICO converterHTML code included
- Apple touch icon generatorHTML code included
- Android maskable icon generatorManifest code included
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 favicons and app icons
Is my image uploaded anywhere?
No. Your browser reads the file, draws every icon size and builds the ICO itself. Nothing is sent to a server, and the page works without an account.
Which files do I get?
A favicon.ico with 16, 32 and 48 pixel images, PNG icons at 16, 32, 180, 192 and 512 pixels, a maskable 512 pixel icon for Android, a site.webmanifest, and a favicon.svg when your icon is a shape or an SVG you added. The ZIP also holds a README.txt and three code snippets: plain HTML, Next.js and WordPress.
Why does the touch icon have square corners?
iPhones and iPads round the corners themselves and fill any transparent area with black. The touch icon is therefore drawn as a full, opaque square, and your corner rounding only applies to the other icons.
What is a maskable icon?
Android crops home screen icons to a shape of its own choosing, such as a circle or a squircle. A maskable icon fills the whole square with your background and keeps the logo inside a safe circle covering the middle 80 percent, so nothing important is cut off.
Why is the text in my SVG missing?
Text depends on fonts, and fonts do not travel inside an icon file. Convert the text to outlines in your design tool, export the SVG again and add it here. The letter and emoji sources draw their text for you and are saved as PNG.
Can I use an emoji as an icon?
Yes. The emoji is drawn with the emoji font of your own device, so it looks like what you see on your system. The downloaded PNG files keep that look on every device, whichever system opens them.
Do I still need a favicon.ico?
It is the safest choice for older browsers, feed readers and some tools that always ask for /favicon.ico. Modern browsers also use the PNG or SVG file, and the snippets on this page list all of them.
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.