How to Add a Favicon in a PHP Website (Step-by-Step Technical Guide)
A favicon (short for favorite icon) is a small icon associated with a website. It appears in browser tabs, bookmarks, address bars, mobile home screens, and ...
A favicon (short for favorite icon) is a small icon associated with a website. It appears in browser tabs, bookmarks, address bars, mobile home screens, and search results. Even though it is a small element, it plays an important role in branding, usability, and professional website presentation.
For PHP websites, adding a favicon is straightforward, but modern browsers require multiple favicon formats and sizes to ensure compatibility across desktop browsers, mobile devices, and Progressive Web Apps (PWAs).
This article explains the complete technical process of adding favicons to a PHP website, including file preparation, directory structure, HTML implementation, and troubleshooting.
1. What is a Favicon and Why It Matters
A favicon is typically a 16×16 or 32×32 pixel icon, but modern implementations require multiple sizes for different devices.
Benefits of adding a favicon:
• Improves brand recognition
• Helps users identify tabs quickly
• Makes bookmarks look professional
• Improves website credibility
• Required for mobile web apps and PWA support
Without a favicon, browsers often show a default blank icon, which looks unprofessional.
2. Required Favicon Files for Modern Websites
A modern website typically includes the following favicon files:
| File Name | Purpose |
|---|---|
| favicon.ico | Legacy browser support |
| favicon-96x96.png | Standard browser favicon |
| apple-touch-icon.png | iOS home screen icon |
| web-app-manifest-192x192.png | Android icon |
| web-app-manifest-512x512.png | Large PWA icon |
| site.webmanifest | Metadata for Progressive Web Apps |
Example folder structure:
website-root
│
├── favicon.ico
├── favicon-96x96.png
├── apple-touch-icon.png
├── web-app-manifest-192x192.png
├── web-app-manifest-512x512.png
├── site.webmanifest
│
├── index.php
├── header.php
├── assets/
The favicon files should usually be placed in the root directory of the website.
3. Adding Favicon in PHP Website
In PHP websites, the favicon is added inside the HTML <head> section.
If your project uses a common header file (header.php), you should add the favicon code there so that it loads on every page.
Example favicon code:
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico"><!-- PNG favicons -->
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"><!-- Apple iOS icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><!-- Web App icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/web-app-manifest-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/web-app-manifest-512x512.png"><!-- Manifest file -->
<link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#ffffff">
This ensures compatibility with:
• Chrome
• Firefox
• Edge
• Safari
• Android devices
• iOS devices
4. Example PHP Website Structure with Header File
Most PHP websites use a shared header file to avoid repeating HTML code.
Example:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Website</title><link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest"></head>
<body>
Then include it in pages:
index.php
<?php include 'header.php'; ?><h1>Welcome to the website</h1>
</body>
</html>
This ensures the favicon loads across all PHP pages automatically.
5. Creating Favicon Files
Favicons can be created using tools like:
• Figma
• Photoshop
• Illustrator
• Canva
Or generated automatically using favicon generators such as:
• favicon.io
• realfavicongenerator.net
Upload your logo (512×512 PNG) and these tools will generate all required favicon files.
6. Common Problems and Fixes
Favicon Not Showing
Browsers heavily cache favicons.
Solution:
• Hard refresh browser
• Press Ctrl + F5
• Clear browser cache
• Test in Incognito mode
Wrong File Path
If favicon files are not in the root directory, update the path:
href="/assets/favicon/favicon.ico"
Incorrect MIME Type
Ensure correct type declaration:
type="image/png"
type="image/x-icon"
7. SEO and Branding Benefits
Although favicons are small, they influence:
• User trust
• Brand recall
• Bookmark recognition
• Mobile experience
Search engines also display favicons in mobile search results, making them important for SEO branding.
8. Best Practices for Favicons
✔ Use a simple design
✔ Keep icon clear at small sizes
✔ Use square format (1:1)
✔ Provide multiple sizes
✔ Store in root directory
Recommended base icon size:
512 × 512 pixels PNG
Conclusion
Adding a favicon to a PHP website is a simple but essential step that improves branding, usability, and professionalism. By placing favicon files in the website root and adding proper <link> tags inside the HTML <head> section, developers can ensure compatibility with modern browsers, mobile devices, and Progressive Web Apps.
Every professional website should include a properly configured favicon as part of its standard web development setup.
#WebDevelopment #PHPDevelopment #Favicon #WebsiteDesign #WebDesignTips #PHPProgramming #WebsiteBranding #FrontendDevelopment #HTMLHead #WebsiteOptimization #CodingTutorial #WebDevGuide #ProgrammingTips #DeveloperGuide #WebDevelopmentTutorial #WebsiteIdentity #BrowserIcons #CodingHelp #TechArticle #ProgrammingGuide #WebDeveloperLife #WebsiteSetup #PHPWebsite #HTMLCoding #WebDesignGuide #CodingResources #TechEducation #ProgrammingLearning #DeveloperTips #WebsiteImprovement #CodingKnowledge #ModernWebDevelopment #FrontendTips #DeveloperCommunity #WebsiteUX #CodingPractice #SoftwareDevelopment #DeveloperArticle #WebProgramming #InternetTechnology #CodingTutorials #PHPGuide #WebDesignLearning #DeveloperResources #WebsiteTools #ProgrammingSkills #WebCoding #CodingArticle #TechnicalWriting #SoftwareEngineering
Was this guide useful?
Your answer helps us keep BISONKB accurate and practical.