Peertube: Possibility to change the favicon

Created on 11 Sep 2018  路  7Comments  路  Source: Chocobozzz/PeerTube

  • What is the expected behaviour?
    A guide on how to edit the favicon or an easy way of editing it.

  • What do you see instead?
    The logo of PeerTube

The must would be to change the whole logo at once as in #1215

Low Type

Most helpful comment

Well, two answers

What I did (probably nor the best solution nor easiest solution)

I added this in the production.yaml:

instance:
  customizations:
    javascript: |
      document.head.querySelector('link[rel="icon"]').href = 'data:image/png;base64,<my base64 png>';
    css: |
      #peertube-title .icon-logo {
        width: 33px !important;
        background: url('data:image/png;base64,<my base64 png>') no-repeat !important;;
      }

Where <my base64 png> have to be replaced with the result of this command (on unix / linux system):

$ base64 -w 0 /path/to/file.png

It works but the drawback is:

  • well, hackyish;
  • not easy!
  • the favicon of Peertube appears in search engine results instead of your own one;

What I think is better (needs to be tested)

Try to replace this file: ./client/src/assets/images/favicon.png

Not tested, but I am quite sure it fixes all the drawbacks above.

Hope it can help!

All 7 comments

Ping @fflorent

Well, two answers

What I did (probably nor the best solution nor easiest solution)

I added this in the production.yaml:

instance:
  customizations:
    javascript: |
      document.head.querySelector('link[rel="icon"]').href = 'data:image/png;base64,<my base64 png>';
    css: |
      #peertube-title .icon-logo {
        width: 33px !important;
        background: url('data:image/png;base64,<my base64 png>') no-repeat !important;;
      }

Where <my base64 png> have to be replaced with the result of this command (on unix / linux system):

$ base64 -w 0 /path/to/file.png

It works but the drawback is:

  • well, hackyish;
  • not easy!
  • the favicon of Peertube appears in search engine results instead of your own one;

What I think is better (needs to be tested)

Try to replace this file: ./client/src/assets/images/favicon.png

Not tested, but I am quite sure it fixes all the drawbacks above.

Hope it can help!

Well I used what you think is better and tested it.

But well, there are many updates of peertube and we wish to update it everytime there is a new version.
So each time we'll need to replace the file ./client/src/assets/images/favicon.png/. That's also hackyish and it has to be repeted on every update of peertube. That's really really annoying.

Thanks @Chocobozzz for the label ;-)

it should be possible to check if a favicon exists, and if not, place the default peertube favicon there.
So if you install your instance, you don't have one, and once you start the server, this check happens.
If so after you update, this check runs again, but sees your custom replaced favicon and does nothing

isn't there a setup script? Would probably be the best place to ask an admin to give a custom favicon

Hello!

It would be good if the image is stored inside the data directory, or in base64 in BDD, but not on src directory.
Indeed for instances using docker, all the src directory is replaced when upgrading and/or simply restarting the instance, thus it's difficult to recopy each time the image inside the src/ directory :-)

Perhaps the functions used for avatar could be a good start for customize/resize/store the favicon?

Thanks!

Or maybe there should be an option to change site metadata in admin panel :thinking:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

milleniumbug picture milleniumbug  路  3Comments

ChameleonScales picture ChameleonScales  路  3Comments

kabo picture kabo  路  3Comments

XenonFiber picture XenonFiber  路  3Comments

JohnXLivingston picture JohnXLivingston  路  3Comments