[Tutorial] How to customize browser tab image, icon, favicon, app icon

Hello,

We will be using realfavicongenerator.net
note: I have no affiliation with that site. Its free, simple and works with no registration required. Also, it outputs favicons of various sizes and formats for a variety of browsers and mobile devices.

First you'll need an image to start with. Their recommendation is: Submit a picture (PNG, JPG, SVG...), at least 70x70. Your picture should be 260x260 or more for optimal results.

Once you have that image, upload it to the generator:

Once you upload the image you want to use as the favicon .ico, you'll need to enter an app name, and you can also customize settings as needed to fit your needs.

after that. Select the XHTML tab for the proper code. Download your favicon package, then extract that zip file to a folder so that you can transfer it to your website. Also, copy the code given. That code goes into Burning Board

Transfer the images to the burning board install on your server, into folder /wcf/images/

In Burning Board Admin Control Panel go to Appearance > Template > List Templates in the filter search for HeadInclude . Once you find that click the icon to copy that file so you can customized it.

remove the existing code from HeadInclude, then paste the code given from realfavicongenerator.net, this custom code will be in addition to the existing template code.

Then clear the cache:
ACP > System > Maintenance > Cache
then click the button to Clear Cache.
You may also have to clear your browser cache.

That's it. You should now have browser tab icons or favicons customized to your liking.

Quote from PJK

Why not just upload a new favicon to the wcf/images folder? I like using Dynamic Drive to create ico images http://tools.dynamicdrive.com/favicon/ .

That site you link is very basic and seems to create only one favicon.ico file. Which will look very pixelated when using that as the image for other places beside just the browser tabs favicon.

The site I was using created various sizes and formats for different browsers and devices. It's very simple, I just detailed the steps so that people who want a browser tab icon can do it from the way I outlined it in this thread.

check out their FAQ for a better explination.
https://realfavicongenerator.net/faq#.V8DkhZgrKUk

P.S. I'll be updating the original post in a couple hours. I missed a screenshot for the settings on the generator so that you can get even more favicons shown in their FAQ in this post