Turn your show artwork into a complete favicon set for your podcast site, transcript pages, and Substack mirror — without losing the cover's recognizability at 16×16.
Podcast cover art is engineered for one place: a 300×300 thumbnail in the Apple Podcasts or Spotify listing. That's where the name, the host portrait, and the wordmark have to read. The problem is that the same image, dropped into a browser tab at 16×16, becomes an unreadable smudge. And once you start spinning up a show site, a transcript subdomain, a newsletter mirror on Substack or Beehiiv, and a media-kit page for sponsors, each of those wants a favicon — and each one is the moment a listener decides whether your show looks like it's run by a real operation or a kid in a dorm room.
The fix is not to upload your 3000×3000 master and hope for the best. The fix is to derive a square mark from the cover: the single letter, symbol, or silhouette that makes the show recognizable, rebuilt clean so it stays legible from 16 pixels up to 512. The generator below does the resizing, the .ico packaging, the apple-touch-icon, and the manifest.json — but you have to feed it the right input.
You spent eighty bucks a month on production and a real microphone. Then your show site has a default WordPress globe or, worse, the green Buzzsprout square in the browser tab. Listeners who land on your site from a podcast app, a guest's tweet, or a search result form an opinion in the first half-second — and that half-second includes the tab icon. A proper favicon set is the cheapest production-value upgrade you can ship.
Most podcasters get more long-tail search traffic from their transcript and show-notes pages than from any other source. Each of those pages opens in a tab next to a dozen others, and the favicon is the only thing that tells the visitor "you're still on the same show site." If three transcript pages all show the same recognizable mark in the tab, the listener perceives the site as one consistent property. If the favicon is generic, every page reads as a separate, forgettable hit.
Mobile listeners who follow a show on Apple Podcasts often also pin the show site to their iPhone home screen — for newsletter signup, episode-specific Q&A, or supporter perks. iOS uses the 180×180 apple-touch-icon, not the 16×16 favicon, and if you don't ship one, iOS substitutes a low-res screenshot of your homepage. That looks bad next to actual app icons. A proper apple-touch-icon makes your show site feel app-like on the device people are using to listen.
A growing share of podcasters publish a companion newsletter on Substack or Beehiiv, often at shownname.substack.com or a custom subdomain. Both platforms accept a single favicon upload in publication settings. Use the 512×512 PNG from the bundle. Subscribers will see the same mark in the tab when they read the newsletter as they see when they're on the main show site — which compounds brand recall across two surfaces a listener might encounter you on.
Sponsors evaluating your show open your media kit in a browser tab, often alongside five other shows' media kits. A favicon-less or generic tab signals amateur; a recognizable, on-brand mark signals "this person ships." The same tab cue holds for the Stripe checkout page on your supporter tier — Stripe lets you upload a favicon for your branded checkout, and it shows up in the buyer's tab during the moment they're deciding whether to actually commit five dollars a month.
Strip the wordmark. The full show name almost never reads at 16×16. Drop it. The favicon's job is the symbol, not the name — the browser tab already has the page title text right next to it.
One element, one color. A single dominant element (a letter, a microphone silhouette, a geometric mark) in a single saturated color (warm orange, deep teal, magenta, mustard) reads at every size and survives both light and dark browser themes. Detailed gradients and host portraits die at 32×32.
Test against the dark tab. Roughly 40% of users browse with dark mode on, which means Chrome, Safari, and Firefox show your favicon against a near-black tab bar. A black-on-white mark vanishes there. Pick a color saturated enough to read on white and on near-black, or ship a separate dark-mode variant via the media attribute on your favicon link tags.
Keep the square clean. Podcast cover art often has bleed, drop shadows, and outer gradients. None of that survives downsizing. The favicon should be a tight, opaque square with the mark filling most of it — no padding, no inner border, no outer glow. The browser supplies the padding via the tab UI.
Match the cover, don't copy it. The favicon should make a listener who knows the show go "ah, that's the same one." It doesn't have to literally be a tiny copy of the cover. Pull the one most-distinctive element and rebuild it cleanly.
The generator outputs the same bundle regardless of stack — a folder of PNGs, an .ico, an SVG, a manifest.json, and an HTML snippet. Where it goes depends on your host:
public/ or static/ root. Paste the HTML snippet into your global <head> partial. Done.assets/ folder and reference in default.hbs.header.php.For the underlying spec on favicon sizes and link relations, see the WHATWG HTML Living Standard on rel=icon — it's the source of truth for what browsers actually do with each <link rel=icon> declaration. For the manifest.json fields that drive Android home-screen and PWA install prompts, the W3C Web App Manifest spec is the canonical reference. And for show-art design rules that constrain what makes sense as a favicon mark, Apple Podcasts' artwork requirements are the de-facto standard the broader podcast ecosystem has aligned around.
Technically yes, but it will look bad. Cover art is designed to read at 300×300 in Apple Podcasts, not 16×16 in a browser tab. The wordmark and portrait blur. Derive a simpler square mark from the cover and feed that to the generator.
16, 32, 48, 180 (apple-touch), 192, 512 (PWA), and a safari-pinned-tab.svg, plus a site.webmanifest. The generator outputs all of them.
Partly. Hosted platforms accept one square image (use the 512×512 from the bundle). The full apple-touch + manifest set only matters if you control a custom domain and template.
No. Generation runs entirely in your browser. Nothing leaves your device. Useful when you're prepping a season trailer and don't want unreleased artwork cached on a third-party CDN.
Use a derivative. Pick the single most distinctive element of your cover (a letter, a symbol, a silhouette) and rebuild it as a clean square. Same vibe, but optimized for sizes the cover was never designed for.
Not the podcast itself — Apple and Spotify don't index it. But your show site does get search traffic to transcript and episode pages, and a clean favicon next to your domain in search results measurably increases click-through compared to the default globe.