matpompili/favicon - Add favicons to you forum. Also supports mobile ones!

matpompili

Hi, that's a nice one 😃

Here's packagist and github.

Following the readme with all the informations:

flarum-favicon

flarum-favicon is a Flarum extension to add a favicon set to you forum.

Flarum is a free, open-source forum software built with PHP and Mithril.js.

Features

With flarum-favicon you can add a favicon pack, generated with RealFaviconGenerator.net, to your flarum forum.

It supports:
- The usual small favicon you see on the top of the browser tab, but also
- the Android, iOS and Windows Phone bookmarks, as well as
- Mac and Windows desktop bookmarks.

Install

The only way to get flarum-favicon is with composer: in your flarum folder run

  composer require matpompili/flarum-favicon

Then enable it you administration panel. Done!

Configuration

You need to get a favicon pack with RealFaviconGenerator.net, which is free and highly customizable. After you chose all the icons, compression, interpolation and so on, you will be able to download the favicon pack as a zip file.

Now you will need to extract that zip file to a folder inside you flarum home, e.g myFavicons.

Finally, in the admin panel, open flarum-favicon settings. You will need to put the name of the folder that's inside your flarum home folder. With reference to the previous example, it would be myFavicons.

And that's it!

A little bonus: your logo in the header!

To use the high-res favicons to customize the header of your flarum (aka add a logo and a logotype), you can add the following css from the admin panel:

/*
*Customize the logo and the logotype
*/

//Import the font for the logotype from Google Font. I chose Rancho, you can choose whatever you want!
@import url(https://fonts.googleapis.com/css?family=Rancho);

//Now let's set the font and size of the title. You have to play with the font-size to get the best result.
.Header-title {
  font-family: 'Rancho', cursive;
  font-size: 2em;
}

//Now let's add the logo as a background to the title link
.Header-title > a {
  //remove underline
  text-decoration: none;
  //leave some space to the logo
  padding-left: 40px;
  //direct link to your logo
  background: url('https://www.mydomain.org/favicons/android-chrome-192x192.png');
  //logo styling
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
}

Kakifrucht

Excuse my silly question, but where can I open flarum-favicon settings in the admin panel?

Edit: Nevermind, now it showed up. Works great!

matpompili

Added a little extra to customize your logo and logotype 😉

flame

@matpompili, I'm really thankful for the work you've been doing. Wonderful job mate!

JRay

Thanks so much for this. I noticed this in my header:

<meta name="apple-mobile-web-app-title" content="Rubber Duck Space">

I can't see if that is being set by your extension or the Favicon generator. But I'm pretty sure I don't want that title. LOL

Any idea?

matpompili

JRay Nope 🙂 That was something I needed to remove before the commit. Thanks for finding that out, going to remove it in the next release!

arjoni

@matpompili I want to add just one favicon.png file. Can i do that directly?

chrisg062689

I've been attempting to use this extension, but no Settings menu is appearing on the extensions panel, nor do any other fields show up on the other tabs.

Is there a way to manually add the path to the favicon zip somehow in the database?

santiagobiali

chrisg062689 yes, you can add the path in settings -> matpompili.favicon.folder
But every extension is behaving like this?
With debug on check the console log for errors

luceos

chrisg062689 did you try deleting the js files in the assets directory? Sometimes they can't be recompiled, this forces that process.

VIRUXE

santiagobiali I believe I had the same error. Just not sure it was in this extension but I'm sure it was one of yours.

chrisg062689

I attempted to delete all .js files within /flarum/assets, those files were removed, reloaded the page, and the .js files were recreated.

I still do not have any settings menu under the favicon extension.
I do have the uninstall menu option if I disable the extension, re-enabling it does not allow me to access the settings.

I do have the settings menu under other extensions and they appear to function.

Running flarum-favicon v1.0.0-beta.2

[UPDATE]
Attemped to uninstall the extension using composer, cleared the cache, reinstalled and I am still not getting any kind of configuration dropdown.

Csineneo

very strange, I got 404 error on https://domain.tld/tags when I turn it on.

DonaldLouch

So I installed the plugin and generated the logos via. Real Favicon Generator and extracted the zip file and then added it to the root, then added the file name in the settings. However, the favicons aren't showing up.

Did I do something wrong? Or does it take time, to refresh?

Kakifrucht

DonaldLouch Check the source of the forum and look in the header section, favicons should be added here. Verify that the paths are correct.

DonaldLouch

Kakifrucht:

I just needed to re-upload! It's working now!!!

Thanks!

wignu

Thankyou very much for this very nice little extension, works brilliantly especially for the logo and I even fixed up the favicon for another site I run ?

Weeboo

Awesome work perfect ?