Favicon Image for Portfolio Website
Choose the right favicon image for your portfolio, install it correctly, and fix browser or Google Search display problems.
Use a simple, recognizable square icon that still reads at tiny sizes. Add it from your portfolio home page with a <link rel="icon"> element, keep the icon URL stable, and make both the page and image crawlable. For Google Search, the favicon must be at least 8×8 pixels; Google recommends an image larger than 48×48 pixels and supports BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF formats.
What makes a good portfolio favicon?
- Square canvas: Use a 1:1 image. Start with a source large enough to scale down cleanly.
- One clear shape: A monogram, symbol, or simplified mark is easier to recognize than a detailed illustration.
- Strong contrast: Check the icon on light and dark browser chrome.
- Safe margins: Leave a little space around the mark so it does not touch the edge after browser masking or scaling.
- Brand consistency: Reuse the same visual mark as your portfolio logo, but simplify it if the full logo becomes illegible at 16 pixels.
A favicon is used in browser tabs and bookmarks, while platform rules can differ for other surfaces. Treat browser display, a site builder’s upload requirements, and Google Search eligibility as separate targets.
Which favicon size and format should you use?
| Use case | Practical choice | What the source says |
|---|---|---|
| Browser tab and bookmarks | Provide a crisp square icon, commonly including 16×16 and 32×32 renditions or an ICO containing them. | Browser requirements vary by browser and implementation. |
| Google Search | Square, at least 8×8 pixels; a source larger than 48×48 is recommended. | Google Search Central lists these eligibility guidelines and supports BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF. |
| Shopify | 16×16 or 32×32 is described as ideal for its setup. | Shopify Help Center. |
| Wix | Raster dimensions must be multiples of 48 pixels; SVG is exempt from that raster rule. | Wix Help Center. |
| Web app manifest | Use appropriately sized manifest icons; SVG can retain quality at larger sizes. | MDN’s manifest icon reference. This does not mean every favicon surface accepts SVG. |
There is no single universal size rule for every browser, builder, and search surface. Follow your platform’s upload rules while keeping a square master image and a stable public URL.
How to create the image
- Open your portfolio logo or mark in an image editor.
- Remove fine detail that disappears below roughly 32 pixels.
- Place the mark on a square canvas with enough padding.
- Export a lossless PNG for a transparent or full-color icon, or an ICO if your workflow specifically requires it.
- Inspect the result at 16×16, 32×32, and a larger preview. If the silhouette is unclear at 16×16, simplify it again.
Keep the original editable artwork. You may need a light and dark variant if your mark loses contrast against browser chrome, but keep the URL and naming predictable.
Install a favicon in a hand-coded portfolio
Put the icon at a stable, publicly reachable path such as /favicon.png. Add the declaration inside the <head> of the home page:
<link rel="icon" href="/favicon.png" type="image/png">An ICO declaration is also common:
<link rel="icon" href="/favicon.ico" type="image/x-icon">Google’s documented example uses the same rel="icon" pattern. See the Google favicon guidance for crawler requirements.
Checklist before deployment
- The home page returns a successful response and contains the link element in its HTML head.
- The icon URL returns the intended image without authentication, a redirect loop, or an HTML error page.
robots.txt, firewall rules, and hosting headers do not block crawlers from either URL.- The icon URL is stable; do not change filenames on every build unless you also update the home page.
- The image has a square aspect ratio and remains legible when reduced.
Install it with a site builder
Use the builder’s branding or favicon setting rather than editing theme files when that option exists. Upload an image that meets that platform’s rules:
- Shopify: Shopify describes 16×16 or 32×32 pixels as ideal for its favicon setup. Follow its official instructions.
- Wix: Wix requires raster favicon dimensions to be multiples of 48 pixels, while SVG is exempt from that raster requirement. Follow its official instructions.
Builder dashboards may resize or re-encode the upload. Recheck the published page after saving, rather than assuming the editor preview matches production.
Verify the favicon in a browser and in Google
- Open the portfolio home page in a private window.
- Inspect the document head and confirm the
rel="icon"link points to the expected absolute URL. - Open the icon URL directly. Confirm it displays an image, not a 404 page or access-denied response.
- Test a fresh browser profile or hard reload. Browsers cache favicons more aggressively than ordinary page assets.
- Use the page’s deployed hostname, including HTTPS, because Google defines a Search favicon by hostname.
Google can show one favicon per site hostname. A subdirectory cannot have a separate Search favicon from the hostname’s home page. Even when the technical requirements are met, Google says Search display is not guaranteed.
Why your favicon is not showing
| Symptom | Likely cause | Fix |
|---|---|---|
| Nothing appears in the tab | Missing or malformed link element, wrong relative path, or an image response that is not valid. |
Inspect the head, open the icon URL directly, and correct the path or MIME type. |
| Old icon remains after replacement | Browser favicon cache. | Use a private window, clear site data, or test another browser. Keep the final URL stable once deployed. |
| Google does not show it | Crawler cannot access the page or icon, the icon is not square, or Google has not selected it. | Make both URLs crawlable, meet the 8×8 minimum, use a stable URL, and allow time for recrawling. Display is not guaranteed. |
| Only one section of the site has the wrong icon | The section uses a different hostname or a cached document. | Remember that Google’s favicon is selected per hostname; verify each document’s head and hostname. |
| Transparent icon looks invisible | The mark has insufficient contrast against the browser background. | Add a contrasting background or create a variant that remains readable in light and dark contexts. |
| Builder rejects the file | The upload violates that builder’s format or dimension rule. | Follow the builder documentation. Wix’s raster multiple-of-48 rule and Shopify’s 16×16 or 32×32 guidance are platform-specific. |
| Icon downloads as text or HTML | Hosting rewrite, authentication, CDN rule, or error page intercepted the image request. | Check the response headers and status, then exempt the icon path from rewrites or access controls. |
Performance, reliability, and accessibility considerations
- Keep the file small; a simple PNG or ICO adds negligible transfer cost and is requested early by browsers.
- Serve it over HTTPS from the same stable origin as the portfolio when possible.
- Use long-lived caching after the design is final. If you must replace the file at the same URL, understand that visitors may retain the previous icon until their cache expires.
- Do not rely on the favicon to communicate information required by screen-reader users. Provide the portfolio name in the document title and accessible text in the page content.
- Do not put private data in a favicon URL. It is a public asset that browsers, crawlers, and link previews may request.
Or skip the browser setup
If you need a rendered check of the published portfolio, ScreenshotNeo can capture the page with one request. Its capture flow accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
See the ScreenshotNeo API documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-portfolio.example -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-portfolio.example"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-portfolio.example' }); const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server so Claude, Cursor, and other MCP clients can take screenshots, plus controls for viewport, device presets, retina scale, waits, custom CSS and JavaScript, headers, cookies, geolocation, caching, signed links, PDFs, bulk capture, and more. One thousand screenshots are free each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Can I use my full portfolio logo as the favicon?
Only if it remains recognizable when reduced. A simplified mark or monogram usually works better than a detailed wordmark.
Is SVG always the best favicon format?
No. SVG can preserve quality in manifest icons, but favicon support differs by browser, platform, and search surface. Use the format your target platform documents and provide a broadly supported raster or ICO fallback when appropriate.
Does adding multiple icons guarantee Google will use one?
No. Google supports one favicon per hostname and does not guarantee that an eligible favicon will appear in Search.
Should every portfolio page declare the favicon?
Place the declaration in the shared document head so the home page and other pages resolve the same stable icon URL. Google’s Search eligibility is based on the home page for the hostname.
How long does a changed favicon take to appear?
Browsers may keep cached favicons, and Google must recrawl the page. Test with a private window and allow time for recrawling after confirming both URLs are crawlable.
