Display Your Own Logo Before the Page Title
The Custom Logo Module allows you to display a custom logo before the title of your Webtrees website. Fully customizable in size, position and responsive for all devices.
Quick Start – Ready in 5 Minutes!
- Prepare logo: Have your logo file ready (.png, .jpg, .svg) (recommended: 45x45 pixels)
- Upload: Via FTP to
/modules_v4/custom-logo/resources/logos/ - Enable module: In Webtrees under "Control panel → Modules → All modules"
- Configure: Click on the gear icon ⚙️ and select your logo file
- Done! Your logo now appears before the page title
Flexible Formats
PNG, JPG, SVG, GIF
Responsive
Adapts automatically
Customizable
Size & position freely selectable
1 Download Module
Download the ZIP archive from the homepage and extract it.
2 Upload Files
Upload the complete custom-logo folder to the /modules_v4/ directory of your Webtrees installation.
webtrees/modules_v4/custom-logo/module.php
3 Create Logos Directory
Create the directory via FTP:
/modules_v4/custom-logo/resources/logos/Set permissions to 755 or 777
4 Enable Module
- Log in as administrator to Webtrees
- Go to Control panel → Modules → All modules
- Search for "Custom Logo"
- Enable the module by clicking the switch
1 Upload Logo
Upload your logo file via FTP to the directory:
/modules_v4/custom-logo/resources/logos/Supported formats: .png, .jpg, .jpeg, .svg, .gif
2 Open Settings
- Go to Control panel → Modules → All modules
- Click on the gear icon (⚙️) for the Custom Logo module
3 Configure Logo
| Setting | Recommendation | Description |
|---|---|---|
| Logo File | - | Select your uploaded file |
| Width | 40-60px | Default: 45px |
| Height | 40-60px | Default: 45px |
| Vertical Alignment | -8 to -10 | Negative values = move up Positive values = move down |
4 Save & Check
Click Save and visit your website to see the logo.
Logo Not Displaying
- Module is not enabled → Check under "Control panel → Modules"
- Logo file is in wrong directory → Must be in
/logos/ - File permissions incorrect → Should be readable (644)
- Browser cache → Reload with Ctrl+F5
Warning "Directory does not exist"
Solution: Create the directory via FTP:
/modules_v4/custom-logo/resources/logos/Logo is Too Large/Small
Solution: Adjust the width and height values in the module settings.
Logo is Not Centered
Solution: Adjust the "Vertical Alignment":
- Negative values (-8, -10) → Move logo up
- Positive values (2, 4) → Move logo down
New Logo File Doesn't Appear
- Is the file in the correct directory?
- Is the format supported? (.png, .jpg, .svg, .gif)
- Reload admin page (F5)
- Clear browser cache
Technical Details
- No database changes: All settings are stored in Webtrees preferences
- Responsive breakpoints:
- Desktop: Configured size
- Mobile (<768px): Max. 40px width/height
- Hover effect: Logo becomes slightly transparent on mouse-over (opacity: 0.8)
- Accessibility: ARIA labels present for screen readers
Supported Languages
The module is multilingual and supports:
System Requirements
| Webtrees: | Version 2.2.x or higher |
| PHP: | Version 8.1 or higher |
| Browser: | All modern browsers (Chrome, Firefox, Safari, Edge) |
License
This module is free software and is published under the GNU General Public License v3.0.
webtrees: online genealogy
Copyright (C) 2025 webtrees development team
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
The complete license can be found at: https://www.gnu.org/licenses/gpl-3.0.html