Use a simple, square icon that still reads at tiny sizes, publish it from your portfolio home page with a <link rel="icon"> element, and keep the image URL stable. For Google Search, the icon must be at least 8×8 pixels (Google recommends larger than 48×48), while browser and website-builder requirements can differ. Making an icon eligible does not guarantee that Google will display it.
What a portfolio favicon should be
A favicon is the small visual identifier shown in browser tabs and in places such as bookmarks and website lists. For a portfolio, it should reinforce your personal or studio brand without depending on tiny text that becomes unreadable.
Design checklist
- Use a square canvas and one recognizable symbol, monogram, or mark.
- Prefer strong contrast and simple shapes; test at 16×16 pixels.
- Keep important artwork away from the edge so browser masking or platform cropping does not cut it off.
- Use the same visual language as your logo, but simplify the logo if its full wordmark is too detailed.
- Export a clean raster image for broad compatibility. SVG can retain quality at larger sizes in web-app manifest contexts, but that does not mean every favicon consumer accepts SVG.
How large should a favicon be?
There is no single universal size because browser tabs, a site builder, a web-app manifest, and Google Search are different destinations.
| Use case | Guidance | Qualification |
|---|---|---|
| Google Search | At least 8×8 pixels; Google recommends an image larger than 48×48 pixels. | These are Google Search eligibility and appearance recommendations, not a promise of display. |
| Shopify store setup | Shopify describes 16×16 or 32×32 pixels as ideal. | Use this for Shopify’s setup, not as a universal browser rule. |
| Wix | Raster favicon dimensions must be multiples of 48 pixels; SVG is exempt from that raster rule. | This is Wix-specific upload guidance. |
| Browser and bookmarks | Small sizes are commonly rendered, so inspect your artwork at 16×16 and 32×32. | Exact behavior varies by browser and operating system. |
For a hand-coded portfolio, a 48×48 or 64×64 PNG gives Google a comfortably large source while remaining easy to serve. You can also provide an ICO containing multiple resolutions when an older or platform-specific client requires it. Follow your host’s documented file-type and dimension rules first.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Choose PNG, ICO, JPEG, GIF, or SVG carefully
Google lists BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF as supported favicon formats for Search. PNG is usually the straightforward choice for a portfolio because it supports transparency and is easy to generate. ICO is useful when you need a multi-resolution icon file. JPEG has no transparency and is less forgiving of sharp, small artwork. GIF is appropriate only when you intentionally need its supported format and behavior.
MDN documents SVG icons for web-app manifests because vectors remain sharp when displayed larger. Treat that as manifest guidance, not proof that every browser tab, crawler, or builder accepts an SVG favicon in every configuration.
Install a favicon on a hand-coded portfolio
- Create a square image, for example
favicon.png, and upload it to a stable public path such as/assets/favicon.png. - In the
<head>of the portfolio’s home page, add:<link rel="icon" href="/assets/favicon.png" type="image/png"> - Deploy the file and verify that visiting
https://your-domain.example/assets/favicon.pngreturns the image rather than an HTML error page. - Open the home page in a private browser window, then hard-refresh. Browsers cache favicons aggressively, so test in a second browser or clear the site’s cache if an old icon persists.
- Use the same stable URL unless you deliberately replace the artwork. A redirect, intermittent response, or access restriction can prevent crawlers and browsers from retrieving it.
Google’s documented example uses a rel="icon" link in the home page head: Google Search Central’s favicon guidance. Both the home page and the icon must be crawlable. Do not block either with robots rules, authentication, or a firewall that rejects Googlebot.
Rank #2
Optional ICO and size declarations
If your host supplies an ICO file, you can declare it instead:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →<link rel="icon" href="/favicon.ico">You may provide additional icon links for different consumers, but keep the setup understandable and ensure every declared URL is valid. A manifest icon is separate from the basic favicon link; do not assume adding a manifest automatically fixes a missing browser-tab icon.
Adding a favicon in Shopify
Shopify’s favicon instructions describe 16×16 or 32×32 pixels as ideal for its setup. In the Shopify admin, open the theme customization area, find the theme settings for the favicon, upload the approved image, and save or publish the theme. The exact label can vary by theme version, so use the current Theme Editor path shown in Shopify Help Center. Shopify also notes that you can create your own icon or use a free generator; check the resulting file against the theme’s accepted formats before uploading.
Adding a favicon in Wix
Wix documents the process in Changing Your Favicon. Open your site’s dashboard and the site settings area for the favicon, upload the image, and publish. Wix says raster favicon dimensions must be multiples of 48 pixels, while SVG files are exempt from that raster requirement. That rule applies to Wix’s uploader; it is not a general Google or browser minimum.
Why your favicon is missing from Google Search
Google defines a Search favicon by hostname. A subdirectory such as example.com/portfolio/ cannot have a separate Search favicon from the rest of example.com; the hostname has one Search favicon associated with its home page.
Check these causes in order
- Wrong location: The
rel="icon"link is absent from the home page or points to a mistyped path. - Crawl blocking: Google cannot fetch the home page or image because of robots rules, login protection, network controls, or an error response.
- Unstable URL: The icon path changes, redirects unpredictably, or returns different content.
- Unsupported or invalid file: The server sends an incorrect response, a corrupted image, or a format your platform does not accept.
- Cache and processing delay: Search may continue showing an old result while Google recrawls and processes the new icon.
- Eligibility is not display: Google states that following its guidance does not guarantee that a favicon will appear in Search.
Use your browser’s developer tools or an HTTP client to confirm a successful image response, then inspect the rendered home-page HTML to ensure the link is present in the final document. Google’s current guidance, updated August 28, 2026, is the authoritative reference for Search requirements: Define a favicon for Search results.
Or skip the browser setup
If you need a reliable screenshot of the finished portfolio to check branding, documentation, or a review workflow, ScreenshotNeo captures a URL through one request. It accepts the consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the complete parameter reference in the ScreenshotNeo documentation. A direct capture looks like this:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-domain.example -o portfolio.webpScreenshotNeo’s Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Favicon troubleshooting
The tab still shows the old icon
Test in a private window or another browser, then clear the site’s cached data. Confirm that the new file is served at the exact URL in the link element and that a service worker or CDN is not returning an older asset.
The image URL displays a 404 or HTML page
Check capitalization, deployment output, and the server’s MIME and status headers. Upload the file to a public path and request that path directly.
Google shows no icon after a correct deployment
Recheck crawl access for both URLs and keep the URL stable. Google does not guarantee Search display, and recrawling can take time; avoid changing the path while waiting.
The icon looks blurry
Start from a larger square source, simplify fine detail, and inspect 16×16 and 32×32 previews. Do not enlarge a tiny, already-compressed image.
Free tools Windows power users keep installed
One-click scans. No signup required.
Practical launch checklist
- Square artwork is recognizable at 16×16.
- The chosen format and dimensions satisfy your host’s rules.
- The home page contains a valid
rel="icon"link. - The home page and icon return successful, publicly crawlable responses.
- The icon URL is stable and uses HTTPS on an HTTPS portfolio.
- You tested a fresh browser session and a direct image URL.
- You understand that Google Search eligibility is separate from guaranteed display.
Frequently Asked Questions
Can I use my full portfolio logo as a favicon?
Only if it remains legible at 16×16. Otherwise, create a simplified mark or monogram from the same brand.
Does a favicon need to be named favicon.ico?
No. Any stable public filename works when it is declared with a valid rel="icon" link; the familiar filename is merely a convention.
Can each portfolio project have its own Google favicon?
Not when projects are subdirectories of one hostname. Google associates one Search favicon with the hostname.
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.
