01 02 03 04 05 06 07
Sie sind hier: Startseite > Template fhs-basic-all Version 2.4 eu > Anpassen des Templates an eigenes Design > Favicon Generator. For real
Saarland English
A

Favicon Generator. For Real

Da es bedauerlicherweise keine einheitliche Art und Weise für alle möglichen Web-Clients gibt, ein Favicon zu definieren, ist man gezwungen eine ganze Reihe verschiedener Icons zu erzeugen und diese mit unterschiedlichen HTML-Codes in der Webseite zu definieren. Zum Glück hat Frank Seidel in seinem Template, das hier als Grundlage dient, eine URL eines Onlinedienstes (ist tatsächlich auch noch kostenlos) eingefügt, der einem diese ganzen Arbeiten abnimmt.

Unter der Adresse https://realfavicongenerator.net/ ist der Dienst zu finden.

Favicon Generator

Gestartet wird der Prozess mit einem Klick auf ' Select your Favicon Image '.

Dazu sollte man eine Grafik vorbereitet haben: "Senden Sie ein Bild (PNG, JPG, SVG ...), mindestens 70x70.
Ihr Bild sollte 260 x 260 oder größer sein, um optimale Ergebnisse zu erzielen."

Das größte Icon, das dabei erzeugt werden wird, hat 512 * 512 Pixel. Es ist also am besten, wenn die Vorlage mindestens 512 * 512 Pixel hat. Nachdem also die Bilddatei hochgeladen wurde, sind eine ganze Reihe Einstellungen vorzunehmen. Wenn das Ergebnis beim ersten Durchgang nicht optimal ist, einfach von vorne Anfangen.

Es gibt eine ganze Reihe von Einstellmöglichkeiten. Die Screenshots geben einen Überblick. Es lohn sich in Ruhe alles durchzulesen und evtl. auszuprobieren. Wer nicht die große Geduld aufbringt, kann es auch mit den Voreinstellungen versuchen.

Favicon_Generator_Einstellungen3e Favicon_Generator_Einstellungen4e Favicon_Generator_Einstellungen1e

Google-Übersetzung ins Deutsche (das Programm / die Website ist nur in englisch)

 

Favicon_Generator_Einstellungen3d Favicon_Generator_Einstellungen4d Favicon_Generator_Einstellungen1d

 

Zum Schluss gibt es noch dieses Eingabefeld.
Die mir sinnvoll erscheinenden Einstellungen habe ich im nachfolgenden Text als ausgewählt dargestellt:

Favicon Generator Optionen

Wichtig ist diese Angabe des Pfades zu dem Ordner der Favicons eigentlich nicht mehr, da in der Datei favicon.php die Pfade dynamisch erzeugt werden. Wichtig ist lediglich, dass die hier erzeugten Dateien (Bilder, *.xml und *.webmanifest) in den Ordner kopiert werden, in dem die Favicons abgelegt werden sollen!
Das ist laut Template-Vorgabe (siehe unten) : /templates/name-des-templates/images/favicon.

Version/Refresh: Wenn ein Browser ein Favicon zum ersten Mal lädt, neigt er dazu, es im Cache zu speichern und nie wieder zu laden. Wenn Ihre Website nicht neu ist und Sie Ihr Favicon aktualisieren wollen, kann das ein Problem sein: Ihre treuen Besucher werden die Änderung nicht bemerken. Ein Workaround ist, eine Version als Abfrageparameter an die Favicon-URLs anzuhängen. 
Dies ist eine neue Website, die noch niemand besucht hat. Es gibt also kein "altes" Favicon und kein Caching-Problem. 
Die Website ist bereits in Produktion und viele Leute haben sie bereits besucht. Ich möchte, dass wiederkehrende Besucher mein neues Favicon sehen, nicht das alte. 

Compression: Hier kann man zwischen 6 Stufen der Grafik-Kompression auswählen.

Scaling algorithm: Hier kann man zwischen 6 Methoden der Abwärtsskalierung für die kleinen Icons auswählen.

App name: Beim Hinzufügen eines Links zum Startbildschirm kann der Benutzer eine Beschriftung wählen. Standardmäßig ist dies der Titel der mit Lesezeichen versehenen Seite, was normalerweise in Ordnung ist. Bei iOS und Windows 8 können Sie diesen Standardwert jedoch außer Kraft setzen. 
Kein App-Name, lassen Sie den Browser standardmäßig den Seitentitel anbieten. 
Spezifischer App-Name, überschreibt den Seitentitel. My Site           

Additional Files
 README.md generieren, die die Anweisungen zur Paketinstallation zusammenfasst. Verwenden Sie diese Option, um das Favicon-Paket autark zu machen.

 Generieren Sie html_code.html, die die HTML-Auszeichnungen der Symbole enthält. Diese Datei kann wie gewohnt in HTML-Dokumente eingefügt werden.

Wenn alles geklappt hat, erhält man ein Archiv, in dem alle notwendigen Dateien enthalten sind.
Wegen der Modularisierung des Templates gilt natürlich die Anleitung in der README.md nicht mehr wortwörtlich! Nehmen Sie für die Einbindung der Favicons auf keinen Fall Änderungen an der Template-Datei vor!

In der Datei favicon.php sind lediglich an drei Stellen die Farbwerte gemäß den Werten anzupassen, die von diesem Tool ausgegeben werden:

favicon.php

<?php // *** IMPORTANT !!! Replace this part with your own data !!! (start) *** ;?>
<?php // *** for new icons, manifest ... use: https://realfavicongenerator.net/ *** ;?>
<?php // *** am besten den absoluten Pfad durch die Pfadangabe per Variable ersetzen: ;?>
<?php // *** z.B.: "/templates/fhs-basic-all2_3/images/" durch <?=$pth['folder']['templateimages']? > *** ;?>
<link rel="apple-touch-icon" sizes="180x180" href="<?=$pth['folder']['templateimages']?>favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?=$pth['folder']['templateimages']?>favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?=$pth['folder']['templateimages']?>favicon/favicon-16x16.png">
<link rel="manifest" href="<?=$pth['folder']['templateimages']?>favicon/site.webmanifest">
<link rel="mask-icon" href="<?=$pth['folder']['templateimages']?>favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="<?=$pth['folder']['templateimages']?>favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="<?=$pth['folder']['templateimages']?>favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<?php // *** replace this part with your own data !!! (end) *** ;?>

Demzufolge liegen also alle Icons im Ordner /templates/name-des-templates/images/favicon:

Favicons im Ordner


Bildquellen

Slideshowbilder von http://cmsimple.lembach-kr.de/
Logo von http://cmsimple.lembach-kr.de/

 


| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap