How to add a favicon to your phpBB board?

15 May 2024, 17:45

Favicon, short for favorite icon, refers to a website icon. Moreover, you often see it in the tabs of your internet browser. It's a small thing, but it shows the character of your website or phpBB forum. In this post I will explain to you how you can add a favicon to your phpBB forum. But this works with almost the same logic on all kinds of websites.

Favicons are little creatures. I suggest you think about them a little differently. Imagine your phpBB board has an app, and you're looking at it in the applications menu of your phone. Does it have a black or white background? This is your website icon, think and characterize your favicon without a background.

For example, phpBB Group removes the white background of the application icon and uses the remaining shape as the favicon or adds a background to the favicon and uses it as the application icon.

: icon-v-favicon.jpg (112.95 KiB) Viewed 441 times

The classic way is to save your site icon in .ico format. You can convert it from various tools or export your image in .ico format in Photoshop or photopea.com. Even name it favicon.ico. But not necessarily, it can be in png format.

Once you have the favicon for your phpBB forum, upload it to the /images folder in phpBB root. Then open the template/overall_header.html file of your style and find the following section.

Code: Select all

</head>

Add it before:

Code: Select all

<link rel="shortcut icon" href="/images/favicon.ico">

If the favicon name and type are not favicon.ico, edit the code. Save the changes. Your site icon/favicon should now be visible.

If you're worried about not being able to preserve the code in style updates, or if you don't want to mess with template files, I've created an extension for you that adds this code to the style.


phpbbgroup-favicon.zip: (8.03 KiB) Downloaded 111 times

Upload and export to /ext folder in phpBB root, then enable it from ACP. If you need to edit the code, edit /ext/phpbbgroup/favicon/styles/prosilver/template/event/overall_header_stylesheets_after.html.

Best.