This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Adding a favicon

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

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.3/kb/article/adding-a-favicon/]Knowledge Base - Adding a favicon[/url]

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 example.com/favicon.ico. 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

example.com/any/directory/favicon.ico
Open:

Code: Select all

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

Code: Select all

</head>
Before Add:

Code: Select all

<link rel="shortcut icon" href="https://example.com/any/directory/favicon.ico" />
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.
https://example.com - 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.


Multiple Icons

Most online tools will produce multiple icons using different sizes and formats for different browsers and devices, most notably phones. Ideally these files should be placed in the root of the domain. The multiple lines of HTML they provide can be applied using the directions above, just make sure the paths to the files are correct