How to add a favicon on a menu app

Scriptcase 8 Discussion
#1

Hi,
I’ve tried with


?>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<?php

in the onApplicationInit and onLoad events, but it places the <link tag after the <body> element, so doesn’t work. Is there any way to place it to be before the generated <body> tag?
Many thanks,

Dani

#2

I have javascript in my onApplicationInit Event that changes the application icon:
$(document).ready(function(){
$(‘head’).append(’<link rel=“shortcut icon” href="…/_lib/img/grp__NM__img__NM__stlogo50.jpg">’);
$(‘head’).append(’<link rel=“icon” href="…/_lib/img/grp__NM__img__NM__stlogo50.jpg">’);
});

#3

Jojojo! That’s good, but it’s a little ugly not? ;). If it’s the only way, I will need to apply this.

#4

Yeah its quick and dirty :slight_smile: but the only way I found, I have also been struggling to get bootstrap etc links in the main head when the page loads, not much help out there.

#5

What was the problem when trying to add bootstrap? Maybe I could be of some help…

#6

Nah Don’t worry it was related to bootstrap’s js requiring jquery 1.9 :slight_smile:

#7

OK :slight_smile:

… (forum requires more than 10 chars lol)

#8

Hi everyone,
I know this thread is quite old, but it still gets a lot of views, so I wanted to share an updated solution that works in Scriptcase 9.12 with the new responsive menu. (Not SC native, for now)

The goal is to dynamically load a favicon from the database (stored as a LONGBLOB) without writing to disk or managing file paths. This is especially useful if you’re working in multi-company or white-label systems and want each client to see their own branding.

  • Pure PHP and JavaScript
  • No external libraries
  • No need to store physical image files
  • Works with base64-encoded PNG icons (max 1MB)
  • Fully compatible with Scriptcase 9.12 and its new responsive menu system

Here’s my solution, based on @leonvz answer, including how I resized the image to 32x32 and injected it into the page header dynamically (onLoad Event):

    <?php
// Load company data from the database
$sql_empresa = "SELECT nombre, logo_empresa, logo_empresa_xs FROM tbl_empresa";
sc_lookup(ds, $sql_empresa);

// Extract fields from the result
$company_name = {ds[0][0]};
$logo_blob     = {ds[0][1]};
$compact_blob  = {ds[0][2]};

// Store company name in global variable
[nombre_empresa] = $company_name;

// Convert the main logo to base64 if available
if (!empty($logo_blob)) {
    $logo_base64 = base64_encode($logo_blob);
    [logo_empresa] = 'data:image/png;base64,' . $logo_base64;
} else {
    [logo_empresa] = ''; // Optional fallback image
}

// Convert the compact logo to base64 and resize to 32x32 (favicon size)
if (!empty($compact_blob)) {
    // Create image resource from blob
    $image = imagecreatefromstring($compact_blob);

    if ($image !== false) {
        // Create a 32x32 canvas for the resized image
        $resized = imagecreatetruecolor(32, 32);

        // Preserve PNG transparency
        imagealphablending($resized, false);
        imagesavealpha($resized, true);

        // Resize original image into the 32x32 canvas
        imagecopyresampled($resized, $image, 0, 0, 0, 0, 32, 32, imagesx($image), imagesy($image));

        // Capture the resized image into a buffer
        ob_start();
        imagepng($resized);
        $resized_blob = ob_get_clean();

        // Encode the resized image to base64
        $favicon_base64 = base64_encode($resized_blob);

        // Store both the original and the resized version in global variables
        [logo_compacto]   = 'data:image/png;base64,' . base64_encode($compact_blob);
        [favicon_base64]  = 'data:image/png;base64,' . $favicon_base64;

        // Free memory
        imagedestroy($image);
        imagedestroy($resized);
    } else {
        [logo_compacto] = '';
        [favicon_base64] = '';
    }
} else {
    [logo_compacto] = '';
    [favicon_base64] = '';
}

// Optionally: limit BLOB size in your SQL or validation to max 1MB

// Use PHP variable to inject the base64 favicon dynamically into the HTML head
$favicon = [favicon_base64];

echo '
<script type="text/javascript">
/**
 * Wait for jQuery to be fully loaded before executing the DOM manipulation.
 * Scriptcase loads jQuery asynchronously, so we poll until it is available.
 */
(function waitForJQuery() {
    if (typeof window.$ === "undefined") {
        setTimeout(waitForJQuery, 50);
    } else {
        $(function() {
            var faviconData = "' . $favicon . '";
            if (faviconData) {
                // Remove any existing favicon tags
                $("link[rel*=\'icon\']").remove();

                // Inject the new favicon with base64 PNG
                $("head").append("<link rel=\'shortcut icon\' type=\'image/png\' href=\'" + faviconData + "\'>");
            }
        });
    }
})();
</script>
';
?>
[SOLVED] how to change scriptcase favicon in SC8
Browser Tab Icon
#9

It works like a charm!
Thx!