PC Slower Than It Used to Be?
Outbyte PC Repair · freeA free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.
Run a Free PC Scan →ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
The original SitePoint article “88 Outstanding Favicons and 6 Resources to Help You Create Your Own” was published in 2009 and lists examples from brands including Amazon, BMW, Facebook, Mozilla, Twitter, YouTube, Target, and Yelp. It remains valuable as a historical inspiration gallery—but its original creation resources reflect an older Photoshop-and-ICO workflow.
This updated guide explains what those examples reveal about small-scale identity, which current file formats to use, how to create a favicon, and how to install and troubleshoot it on a modern website.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Logo Design. Global Brands | $23.30 | Buy on Amazon |
| 2 |
|
Principles of Logo Design: A Practical Guide to Creating Effective Signs, Symbols, and Icons | $22.30 | Buy on Amazon |
| 3 |
|
Logo, revised edition | $22.04 | Buy on Amazon |
| 4 |
|
Logo Design (Bibliotheca Universalis) (Multilingual Edition) | $13.99 | Buy on Amazon |
What is a favicon?
A favicon is the small icon associated with a website or web application. Depending on the browser, device, and surface, it may appear in a browser tab, bookmark, history list, address-bar control, mobile home-screen shortcut, installed web app, or search interface.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →There is no single file that appears identically everywhere. A modern site usually provides several related assets for different platforms.
#1 Best Overall
Why favicons matter
- Faster recognition: a distinctive mark helps users find the right tab among many open tabs.
- Better scanning: bookmarks and browser history are easier to navigate when each site has a recognizable icon.
- Brand consistency: the favicon extends a visual identity into a very small space.
- Perceived completeness: a missing or generic icon can make an otherwise finished site feel neglected.
A favicon is a minor brand touchpoint, not a standalone conversion or ranking tactic. It may appear in some search surfaces when technical requirements are met, but it does not guarantee higher rankings or traffic. See Google’s favicon guidance for search-specific requirements.
What the 88 examples teach us
The original gallery presents a broad collection rather than a disclosed ranking. Its value is greater when the examples are viewed as design patterns instead of as a list of brands that are necessarily still current. Companies may have redesigned their identities, changed domains, or disappeared since 2009.
Lettermarks and monograms
A single initial can work when the letterform is distinctive and the surrounding shape is strong. This is often more effective than shrinking a full wordmark into a 16-pixel square. Use a letter only when it is clearly associated with the brand; a generic “A” or “B” is easy to confuse with other sites.
Standalone symbols
Simple symbols are among the most durable favicon ideas. An abstract shape, object, or pictogram can remain recognizable without text. The strongest marks usually have a clear silhouette, limited detail, and enough contrast to survive reduction.
Mascots and characters
Illustrated faces and mascots can be memorable, but they need aggressive simplification. At favicon size, a recognizable outline, eye pair, hat, or color arrangement may work better than a detailed character drawing.
Product and service cues
Some icons communicate what a site does through a compact object or category reference. This can help a new business, publication, portfolio, or painting website, but literal imagery should still be distinctive rather than a generic brush, camera, cart, or document.
Rank #2
Geometric and color-led marks
Blocks, circles, stripes, and bold color combinations are reliable at small sizes. A strong color field can make an icon easy to locate, provided it remains legible in both light and dark browser themes.
Free tools Windows power users keep installed
One-click scans. No signup required.
Cropped or simplified brand marks
A favicon does not need to reproduce the complete logo. It can use the emblem, corner, initial, or silhouette that users already associate with the larger identity. This is often the best solution for a logo containing a long name or fine lettering.
Inspirational examples versus reusable assets
The brands in the historical gallery are references, not artwork libraries. Do not copy a third-party logo or redistribute it as your own favicon. Create an original mark or use artwork for which you have the necessary rights.
What makes a good favicon?
- Start with one strong idea. Reduce the design to a symbol, initial, shape, or silhouette.
- Design for the smallest display. Inspect the artwork at 16×16 and 32×32 pixels, not only on a large artboard.
- Use high contrast. Fine outlines, subtle gradients, and low-contrast colors often disappear.
- Limit visual elements. Tiny text and multiple competing details make icons muddy.
- Allow safe padding. Keep the artwork away from the edges so circular or rounded masks do not clip it.
- Test light and dark backgrounds. A white mark on a light browser theme—or a dark mark on a dark theme—may vanish.
- Make it distinct. Avoid designs that resemble generic browser controls or competitors.
- Build a system, not a single export. Keep vector source artwork so you can create clean raster sizes later.
Favicon sizes and formats
| Asset | Typical use | Advice |
|---|---|---|
| SVG | Modern browser favicon | Use a simple, self-contained vector with a valid viewBox. |
| 16×16 PNG or ICO representation | Small browser and legacy surfaces | Useful for compatibility, though not sufficient for every platform. |
| 32×32 PNG | Browser tabs and bookmarks | A practical raster fallback. |
| ICO | Legacy fallback and /favicon.ico discovery |
It may contain multiple sizes; it is still worth supporting. |
| 180×180 PNG | Apple touch icon | Use a dedicated, high-resolution square asset. |
| 192×192 PNG | Web-app manifest icon | Commonly supplied for installable web apps. |
| 512×512 PNG | Large manifest or installation surface | Export from vector artwork rather than enlarging a small raster. |
MDN’s <link> documentation and the HTML Living Standard are the appropriate references for current declarations.
SVG
SVG scales cleanly, can be small, and may support light/dark variants through CSS media queries. Keep it uncomplicated: avoid scripts, animation, external resources, unnecessary filters, and dependencies on external stylesheets.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →PNG
PNG is predictable and broadly useful for raster fallbacks, touch icons, and manifest icons. Export separate sizes from the vector source; do not rely on a browser to reduce one oversized image perfectly.
Rank #3
ICO
ICO is not mandatory for every modern deployment, but a root-level /favicon.ico remains useful because browsers, crawlers, templates, and older integrations may request it automatically.
Animated formats
Animated favicons are an experimental edge case. Support is inconsistent, motion can be distracting, and they are rarely a good default for a professional site.
How to design your own favicon
If you already have a logo
- Choose the simplest recognizable component: an emblem, initial, monogram, or silhouette.
- Remove words and details that will not survive reduction.
- Create a square artboard and test the mark on light and dark backgrounds.
- Make optical adjustments for small sizes. A mathematically thin stroke may need to be thickened.
- Export SVG plus dedicated PNG sizes.
- Inspect the result at 16×16, 32×32, 180×180, 192×192, and 512×512.
If you do not have a logo
- Choose a letter, geometric symbol, object, or compact mascot.
- Sketch several substantially different silhouettes.
- Reject concepts that depend on fine detail or tiny words.
- Test monochrome and two-color versions.
- Select the mark that remains recognizable at the smallest size.
- Rebuild the chosen design as clean vector artwork before exporting.
Modern HTML implementation
Place the files at predictable public paths, for example:
/favicon.svg
/favicon-32.png
/favicon.ico
/apple-touch-icon.png
/site.webmanifest
/icons/icon-192.png
/icons/icon-512.pngAdd the relevant declarations in the document’s <head>:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="any">The ICO line is optional for a modern-only project, but useful as a conventional fallback. Paths must match the deployed files exactly, including capitalization.
A basic site.webmanifest might contain:
{
"name": "Example Site",
"short_name": "Example",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone"
}A manifest alone does not make a site installable. HTTPS, a valid manifest, service-worker behavior, and browser-specific requirements may also apply.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Six current resource options
- Favicon.io: a quick option for text, emoji, or uploaded-image favicons. Best for prototypes, blogs, and simple projects—not precise brand work.
- RealFaviconGenerator: useful when you want a broader package of browser, mobile, and platform assets with implementation markup.
- Canva: beginner-friendly for creating basic source artwork as well as exporting graphics. It is less suitable for rigorous vector production.
- Adobe Express: convenient for template-based logo and graphic creation, particularly for users already using Adobe services.
- Adobe Illustrator: appropriate for professional vector construction, precise export, and a reusable identity system.
- Affinity by Canva: a professional vector-oriented alternative. Check the current product lineup and compatibility needs before choosing it.
For custom identity work, an independent designer or agency may be more appropriate. Require vector source files, SVG/PNG/ICO deliverables, light- and dark-background tests, and clear commercial usage terms. Vendor pricing and plan details change, so confirm them directly before purchase.
Testing checklist
- Open the site in Chromium-based browsers, Firefox, and Safari.
- Test Safari on macOS and iOS if mobile Apple users matter.
- Use a private window and a fresh browser profile.
- Check light and dark system themes.
- Test bookmarks, mobile home-screen shortcuts, and installed-web-app surfaces where relevant.
- Test the root domain and important subdirectories.
- Open every icon URL directly and confirm it returns the expected file.
- Check developer tools for 404 errors, redirect loops, MIME-type errors, and authentication barriers.
- Validate the SVG and confirm it has explicit fills and a correct
viewBox. - Check that CDN, reverse-proxy, and HTTPS settings do not rewrite or block the files.
Common problems and fixes
The favicon does not update
Browser, CDN, service-worker, and bookmark caches can preserve an old icon. Inspect the HTML, open the icon URL directly, test in a private window, and purge relevant caches. If necessary, rename the file—such as favicon-v2.svg—and update the reference.
It works locally but not in production
Check case-sensitive filenames, absolute versus relative paths, subdirectory base URLs, HTTPS, authentication, reverse-proxy rewrites, content-security policies, and CDN transformations.
The SVG is blank
Common causes include white artwork on a light background, an invalid viewBox, external dependencies, unsupported effects, or clipping during export. Use a simple self-contained SVG with explicit dimensions and fills.
The icon looks blurry
This usually means a small raster was enlarged, a large image was poorly downsampled, or thin strokes and fine detail were left unchanged. Export each raster size from vector artwork and inspect it at its actual dimensions.
Google shows an old or missing icon
Search engines crawl and refresh favicons on their own schedules, and display depends on requirements beyond the page’s HTML. Do not expect an immediate update; consult Google’s current documentation.
Maintenance and legal notes
Keep the original vector artwork and document which files serve which platforms. Re-test after a redesign, domain migration, framework change, CDN change, or switch to a dark-first interface. Version filenames when cache invalidation is important.
The historical gallery’s brand marks belong to their respective owners. Use them for visual study only unless you have permission to reproduce them. A favicon should reinforce your own identity rather than imitate another company’s trademark.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
