Your website's favicon is one of those elements that most people never consciously think about—until it's missing. That tiny 16x16 pixel icon that appears in browser tabs, bookmarks, and PWA home screens plays a surprisingly important role in your site's branding and professionalism.
I recently built comprehensive favicon support into Jottings, and it made me realize just how much impact these small details have on how people perceive your site.
What's a Favicon, Really?
A favicon is the small icon that appears:
- In your browser tabs next to the page title
- In browser bookmarks and history
- On PWA home screens (iOS, Android)
- In your browser's address bar
- In search results (sometimes)
It's one of the first visual elements people see when they visit your site, making it a critical piece of your branding toolkit.
The word "favicon" is short for "favorite icon"—it dates back to the early days of the web when browsers started showing these icons next to bookmarks.
Why Multi-Size Favicons Matter
Here's where most people get it wrong: using a single favicon for all contexts doesn't work well. Different devices and platforms need different resolutions.
Modern favicon support requires 4 essential sizes:
- 32x32px - Standard browser tabs, bookmarks, and address bars (the most visible)
- 180x180px - Apple touch icon for iOS home screens (when someone saves your site as a PWA)
- 192x192px - Android Chrome and minimum PWA requirement
- 512x512px - High-resolution displays, splash screens, and future-proofing
The reason you need multiple sizes isn't just about screen resolution—it's about display context. A favicon in a browser tab (32px) needs to be simple and bold. A PWA icon on an iPhone home screen (180px) can have more detail.
Trying to scale a 32px icon up to 512px looks blurry. Scaling a 512px icon down to 32px loses all the important visual details. That's why proper favicon support includes client-side resizing to generate all the sizes you need from a single source image.
Favicons vs. Site Logos
These aren't the same thing, and it's worth understanding the difference:
Favicon: The small icon representing your site in browser chrome, bookmarks, and tabs. Should be simple, bold, and recognizable at tiny sizes.
Site Logo: The larger branding element that appears on your site itself—in headers, footers, or hero sections. Can be more complex and detailed.
Site Banner: The larger preview image used for social sharing (Open Graph images). Typically 1200×630px, used when your site is shared on Twitter, Facebook, Discord, etc.
The best brands maintain visual consistency across all three. Your favicon and logo should feel related—same color palette, same visual style—but optimized for their specific context.
Where Your Favicon Shows Up
Browser Tabs
When someone has multiple tabs open, your favicon is often the only identifying element they see. A well-designed favicon lets them spot your site instantly without reading text.
Bookmarks & History
When users browse their bookmarks or search history, they're scanning for icons. A distinctive favicon stands out in those lists.
PWA Home Screens
When someone adds your site to their home screen as a web app (PWA), your favicon becomes their app icon. This is huge for mobile users who visit regularly.
Search Results (Sometimes)
Some search engines show favicons next to results, though this varies. It's still worth optimizing for the possibility.
Address Bar & Tabs
Your favicon appears when the site is in the browser's address bar, giving users quick visual confirmation they're on the right site.
Designing a Favicon That Works
Here are my tips for creating favicons that actually work:
Keep It Simple
Your favicon will be displayed at 32x32px in most browsers. If it's too detailed, it becomes an unreadable blob. Think bold shapes, high contrast, and clear silhouettes.
Good favicon: A single letter, a simple geometric shape, or a minimalist icon. Bad favicon: A complex photograph, fine linework, or lots of thin strokes.
Use High Contrast
Small icons need high contrast to be readable. Avoid very similar colors or low-saturation designs. This becomes even more important when your favicon appears in a browser's dark theme.
Test at Small Sizes
Always preview your favicon at 32x32px before finalizing. What looks good at 512px might be completely unreadable at 32px.
Choose a Square Format
While favicons can technically be other shapes, square (1:1 aspect ratio) works best because:
- It fills both rounded and square app icon spaces
- It looks right in browser tabs and bookmarks
- It's the standard for PWA icons
Optimize for Both Light and Dark
Modern browsers and operating systems support both light and dark themes. Your favicon should be visible in both contexts. If you have a detailed design, consider using a solid color background.
Match Your Brand
Your favicon should feel related to your site's visual identity. Same color palette, similar style. It's part of your brand, even if most people never consciously think about it.
Setting Up Favicons in Jottings
In Jottings, favicon support is built in and automatic. Here's what happens when you upload a favicon:
- Upload: You provide a PNG or ICO file (max 2MB)
- Client-Side Resizing: Jottings automatically generates all four sizes (32, 180, 192, 512)
- Cloudflare R2 Upload: All variants are uploaded to R2 and cached on Cloudflare's CDN
- Site Generation: When your site builds, the favicon is included with cache-busting timestamps
- PWA Support: The 512x512 version is included in your site's web manifest for PWA installations
If you don't upload a custom favicon, your site uses a default emoji-based icon (the speech bubble). It works, but a custom favicon is much better for branding.
The beauty of this system is that you upload once, and the platform handles all the size variants and deployment details. You don't need to manually create four different favicon files.
The Psychology of Favicons
While it might seem like a tiny detail, favicons actually matter psychologically:
Trust: A professional-looking favicon signals that the site is well-maintained and legitimate. A missing favicon can make a site look abandoned or hastily thrown together.
Recognition: A distinctive favicon helps people remember your site. When someone has 20 tabs open, a distinctive icon helps them find yours faster.
Professionalism: The details matter. A site with a custom favicon, clear branding, and consistent design feel more polished and trustworthy.
Mobile Identity: For PWA users, your favicon becomes their app icon on their home screen. It's as important as any native app icon.
A Small Detail with Big Impact
Favicons are one of those elements where the effort is minimal but the impact is real. Spending 30 minutes on a custom favicon might seem trivial, but it's one of the first touchpoints people have with your brand.
The fact that most site owners never think about favicons is exactly why they matter—when yours is missing or generic, it stands out negatively. When it's thoughtfully designed, it reinforces your professionalism without anyone consciously noticing.
If you haven't added a custom favicon to your site yet, I'd recommend taking a few minutes to create one. It's a small detail that contributes to a bigger picture of care and attention.
Ready to add a favicon to your site? Upload one in your Jottings settings under the Branding section. The platform handles all the technical details—you just focus on designing something that represents your work.