Bison Infosolutions Knowledgebase
Protect your Lenovo Server

How to Configure Favicons for PHP Websites (Main Domain & Subdomains) – Complete Technical Guide

This article provides a technical implementation guide for configuring favicons on PHP-based websites, including main domains and subdomains, ensuring proper display in:

  • Browser address bars

  • Tabs & bookmarks

  • Mobile home screen icons

  • Google Search results

The document is intended for:

  • IT professionals

  • System administrators

  • Web developers

  • Support engineers

Environment focus:

  • PHP websites

  • Shared hosting (Hostinger-compatible)

  • Apache / LiteSpeed servers


System / Feature Overview

What is a Favicon?

A favicon ("favorite icon") is a small website icon used by browsers and search engines for visual identification.

Favicons are consumed by:

ComponentUsage
BrowsersAddress bar, tabs, bookmarks
Operating SystemsDesktop shortcuts, pinned tiles
Mobile DevicesHome screen icons
Google SearchSite icon beside results


Technical Explanation

How Browsers Detect Favicons

Browsers locate favicons via:

  1. Explicit <link rel="icon"> tags

  2. Default /favicon.ico request

Example automatic request:

https://example.com/favicon.ico

If missing → browser shows generic icon.


How Google Detects Favicons

Google:

  • Crawls /favicon.ico

  • Reads <link rel="icon">

  • Requires minimum 48×48 resolution

  • May cache aggressively

Google treats subdomains as separate entities.


Architecture & Behavior

Domain TypeFavicon Handling
Main DomainIndependent favicon
SubdomainSeparate favicon OR inherited
CDN SitesRequires public access

Favicons are not inherited automatically unless explicitly referenced.


Use Cases & Environments

Favicons should be configured when:

  • Deploying new websites

  • Creating subdomains (knowledgebase, portal, CRM)

  • Fixing missing search result icons

  • Rebranding websites


Implementation Guide


Step 1 – Generate Favicon Assets

Use a generator:

https://realfavicongenerator.net

Recommended source image:

  • PNG format

  • Square ratio

  • 512×512 resolution

Generated files typically include:

favicon.ico
favicon-96x96.png
apple-touch-icon.png
site.webmanifest
web-app-manifest-192x192.png
web-app-manifest-512x512.png


Step 2 – Upload Favicon Files

Main Domain

Upload into root:

public_html/

Correct structure:

public_html/favicon.ico
public_html/favicon-96x96.png
public_html/apple-touch-icon.png
public_html/site.webmanifest


Subdomain

Upload into subdomain root:

public_html/subdomain_folder/

Example:

public_html/knowledgebase/favicon.ico


Step 3 – HTML Head Configuration

Insert inside <head>:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">


Centralized Favicon (Multi-site Best Practice)

Reference main domain favicon:

<link rel="icon" href="https://example.com/favicon.ico">

Benefits:

  • No duplication

  • Consistent branding


Verification Steps

Manual validation:

https://example.com/favicon.ico
https://sub.example.com/favicon.ico

Expected result → icon renders in browser.


Cache Invalidation

Favicons are heavily cached.

Perform:

  • Hard refresh → CTRL + F5

  • Incognito test

  • Clear browser cache


Google Reindexing Procedure

Use Google Search Console:

  1. URL Inspection

  2. Enter homepage URL

  3. Click Request Indexing

Note: Updates may take days to weeks.


Common Errors & Fixes


Error 1 – Favicon Not Visible

Root Causes

  • Incorrect folder location

  • Wrong filename

  • Cached browser

Fix

Verify file path:

/public_html/favicon.ico


Error 2 – 404 Favicon Requests

Diagnosis

Browser console → Network tab

Example:

GET /favicon.ico → 404

Fix

Upload file into root directory.


Error 3 – Works in Browser, Not Google

Causes

  • Google cache delay

  • Robots.txt blocking

  • Low-resolution icon

Fix

Ensure:

User-agent: *
Allow: /favicon.ico


Error 4 – Subdomain Missing Icon

Cause

Subdomain treated independently.

Fix

Upload favicon OR reference root favicon.


Security Considerations

Favicons present minimal risk but:

✔ Must be publicly accessible
✔ Avoid executable formats
✔ Use static image formats only

Recommended MIME types:

image/x-icon
image/png


Performance Considerations

Best practices:

✔ Keep favicon size small (<100KB)
✔ Prefer ICO + PNG formats
✔ Avoid oversized assets


Best Practices & Recommendations

✔ Always include /favicon.ico
✔ Use high-resolution source image
✔ Match filenames with HTML tags
✔ Validate via direct URL access
✔ Centralize favicon when branding identical
✔ Use Search Console for faster updates


Conclusion

Correct favicon configuration requires:

  • Proper asset generation

  • Correct server placement

  • Accurate <head> references

  • Cache awareness

Subdomains require explicit handling.

When implemented correctly, favicons improve:

  • Visual branding

  • User recognition

  • Search result appearance


#favicon #webdevelopment #php #hostinger #seo #technicalguide #systemadmin #webserver #apache #litespeed #websiteconfiguration #branding #webdesign #troubleshooting #googlesearchconsole #searchengine #html #weblogo #deployment #hosting #subdomain #knowledgebase #itpro #supportengineer #devops #websiteadmin #metadata #webarcitecture #performance #security #cache #browser #chrome #firefox #edge #safari #android #ios #manifest #webmanifest #debugging #validation #webenvironment #sharedhosting #technicalseo #siteicon #websiteicon #phpdevelopment #websupport #itadministrator


favicon fav icon website icon browser icon google search icon php favicon hostinger favicon favicon not showing favicon missing favicon configuration favicon setup favicon.ico apple-touch-icon webmanifest site.webmanifest subdomain favicon
Sponsored