Adding a favicon
Description: How to add a favicon to your site or phpBB3 board.
In Categories: Styles
- Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.2/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
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:
Open:
Find:
Before Add:
Save and upload overall_header.html and purge the cache in phpBB's ACP.
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
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
Code: Select all
phpBB_root_directory/styles/(YOUR STYLE)/template/overall_header.html
Code: Select all
</head>
Code: Select all
<link rel="shortcut icon" href="https://example.com/any/directory/favicon.ico" />
(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
- Jul 05, 2020 - full revision by thecoalman
- Jul 18, 2014 - added note to purge the cache Noxwizard
- Jun 6, 2012- make XHTML valid _Vinny_
- Jun 01, 2012 - originally authored by Jaymie1989