LinkBack URL
About LinkBacks
[How to] Weiche animated / static Favicon
Ich möchte euch auf ganz einfache Weise zeigen wie man ein Favicon bzw. ein animiertes Favicon in Joomla einbinden kann. Dazu benötigen wir ersteinmal folgende Dateien:
- ein Bild oder ein fertiges ICON als png / gif / oder Jpeg Datei
- die Index.php eures Templates /templates/templatename/index.php
- und 3 Minuten Zeit
So als erstes müssen wir ein favicon erstellen, hierzu gibt es entweder die Möglichkeit selbst ein ICON mittels einer Grafiksoftware zu erstellen oder ein Icon mittels eines Generators anhand eines Bildes zu erstellen.
Um das ganze so einfach wie Möglich zu gestalten, nehmen wir einmal variante 2.
Besucht folgende Seite: HTML-Kit Favicon Generator
Und ladet dort euer Bild hoch, das Ihr zuvor auf dem Desktop oder einer Quelle eurer Wahl gespeichert habt. Setzt nun noch einen Haken vor den Punkt animated Favicon und drückt auf generate Favicon.
Nun habt Ihr die Möglichkeit das ganze zu speichern, speichert die .zip Datei vorerst mal auf eurem Desktop und entpackt den Inhalt auch gleich.
Jetzt öffnet Ihr euer FTP Programm und ladet 2 Dateien in folgenden Ordner: /images/ eures Joomla Verzeichnisses auf eurem Webspace. Die erste Datei ist die:
favicon.ico - das statische favicon
und das favicon.gif - das animierte, das sich ebenfalls im zip Ordner unter extra befindet
Nun habt Ihr bereits das statische ICON als Anzeige auf eurer Webseite, wir möchten aber, das in Browsern die das animierte ICON unterstützen, die animierte Version angezeigt wird und bei allen anderen eben das einfache ICON.
Hierzu öffnet eure Index.php eures Templates, das Ihr momentan verwendet und schaut euch die ersten paar Zeilen etwas genauer an:
Der rot markierte Satz gibt in dem Fall an wo der Browser das favicon findet und welches er zu verwenden hat. In den Browsern die ein animiertes Favicon unterstützen, reicht es derzeit aus, einfach einen 2ten Befehl anzufügen, denn der Pfad zum animierten wird bevorzugt behandelt.<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<**** **********="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
Fügt folgenden Tag unter den Bestehenden php Tag eurer Index.php:
Nach getaner arbeit sollte euer Kopfbereich nun wie folg aussehen:<?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.gif\" />" ; ?>
Und voi la, habt Ihr auf einfachste Weise ein favicon erstellt in animierter und statischer Version und eine kleine Weiche in euer Template eingebaut (auch wenns nicht wirklich eine Weiche ist, na nennen wirs mal "Pseudoweiche")PHP-Code:<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<**** **********="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.gif\" />" ; ?>
</head>
Viel spaß damit
Zitieren
Zitat von Mike(FFM)
Lesezeichen