Upload a logo, or design an icon from letters or an emoji with your colours. Download a ZIP with every size browsers and phones expect, plus the HTML to paste into your <head>.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#2E8B57">
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on. If you'd rather have it built than fiddle with CSS, talk to us.
Browsers use a 16/32px favicon in tabs, iPhones use a 180px apple-touch-icon on the home screen, and Android and PWAs use 192px and 512px icons from the web manifest. The ZIP includes all of them, plus a multi-size favicon.ico for older browsers and Windows.
A detailed logo turns to mush at favicon size. Use a simplified mark, one or two letters, or an emoji on a solid background — high contrast and bold shapes read best.
📖 Read the full guide: Favicon Sizes Guide: Which Icons Your Website Actually Needs
Design 1200×630 social share images for links on LinkedIn, X, WhatsApp and Facebook.
Resize images by pixels or percentage, with presets for social media and passport photos.
Paste SVG code, preview it, and download as an SVG file or PNG at up to 4× scale.
Upload them to the root of your website (so /favicon.ico works) and paste the provided <link> tags into your page's <head>. In Next.js, place them in the public/ folder.
Browsers cache favicons aggressively. Hard-refresh, open the site in a private window, or add ?v=2 to the favicon URLs.