Adding a favicon

Description: How to add a favicon to your site or phpBB3 board.

Author: nextgen 
Date: Sun Dec 12, 2021 9:18 am
Views: 84
Category: phpBB Styles Tutorial's

Link to article (bb-code [URL]): Copy

[url=]Adding a favicon[/url]

Direct link: Copy

The favicon.ico file is used to display a custom icon on browser tabs when someone is viewing your site, next to favorites and other places in browsers and devices. This article describes some of the steps you can take to implement it.

Creating a favicon.ico File

A favicon.ico file can contain multiple image dimensions and different devices/browsers support different image formats/sizes. We need to first create an image that can be used as a source to generate the favicon.ico file and other files. With your favorite image editor create a new image with a transparent background that has dimensions of at least 228px*228px. You can use an image without transparent background but the background will be part of the icon which may even preferable. Regardless of what dimension you use it should be square. Keep in mind while you are creating your icon that details will be lost for smaller sized icons such as the ones on browser tabs. Save the file as .png, with transparency if you used transparent background.

You next need to convert the .png file to .ico format and any others you may want to implement for specific browsers and devices. There is various online conversion tools to do this and we will cover the options in the directions below.

That's the basics, there are numerous articles available elsewhere that cover creating icons and logo type images in much more depth.

Basic Implementation

The simplest method is to use an online tool to convert your .png image to favicon.ico file. Upload the favicon.ico file to the root of your domain, it should be accessible at Note for this to work it has to be in the root and named favicon.ico. When a browser accesses any page on your site this is the default location and file name it will look for this file. This by itself will work in just about any browser without further work.

Method Using Meta Tags

If you wanted to store the file in a different directory or use a different icon for your forum than other pages on your site you can specify the path using meta tags between the document <head></head> tags.

Upload your favicon.ico file to any directory:

Code: Select all

Code: Select all

phpBB_root_directory/styles/(YOUR STYLE)/template/overall_header.html

Code: Select all

Before Add:

Code: Select all

<link rel="shortcut icon" href="" />
Save and upload overall_header.html and purge the cache in phpBB's ACP.

(YOUR STYLE) - Can be any style you have installed, the default style for phpBB is prosilver. if you have multiple styles you will need to apply to each style. - needs to be edited appropriately using your domain and protocol.
favicon.ico - can be named anything you want but must be a valid .ico file.

[Leave a comment]