Open-Source Webdesign

Ein eigenes Logo und FavIcon — bootScore hilft!

/ von Karsten Reincke | Kommentar schreiben

Ein Wordwolke in Form des Wortes WEB

Kei­ne Web­site ohne Logo — logo! Sie rich­tig in den Hea­der ein­zu­bau­en, ist oft eine Fri­cke­lei. Sicht­bar müs­sen Logos sein, aber nicht auf­dring­lich, gut plat­ziert. Trotz­dem dür­fen sie den Hea­der nicht auf­blä­hen oder ver­zer­ren. Hier haben die Boots­core-Ent­wick­ler uns viel Arbeit abge­nom­men! Wenn unser eige­nes Logo und FavIcon in etwa zu den vor­ge­se­he­nen Maßen pas­sen, brau­chen wir im Wesent­li­chen nur der bootS­core-Anlei­tung zu fol­gen:

[ de | en ]

Lösung

  • Erstel­le Dein eige­nes, nor­ma­les Logo, mög­lichst als SVG.
  • Erstel­le Dein eige­nes, klei­ne­res Logo, mög­lichst als SVG.
  • Kopie­re Dein nor­ma­les Logo nach bootscore-child/img/logo/logo.svg
  • Kopie­re Dein klei­ne­res Logo nach bootscore-child/img/logo/log-sm.svg
  • Fol­ge auch den Anwei­sun­gen zum Erzeu­gen der Favicons

Hintergrund

Ohne Bil­der kei­ne guten Arti­kel. Ohne Logos, kei­ne Wie­der­erkenn­bar­keit. Die Logos wer­den in der bootS­core-Datei header.php im nav-Bereich zusam­men mit dem Menü etc. in und mit einem Con­tai­ner ange­zeigt. Die dar­in ver­wen­de­ten img — Tags geben kei­ne Höhe oder Brei­te vor. So wer­den die Icons in den Dimen­sio­nen ange­zeigt, mit denen sie kon­zi­piert wor­den sind. Das gilt auch für SVG-Bil­der. Je höher also das erzeug­te Logo, des­to höher auch der NAV-Bereich. Je län­ger das Logo, des­to stär­ker wer­den die nach­fol­gen­den Ele­men­te nach rechts ver­scho­ben.

Das ist kein Nach­teil, son­dern eine schlan­ke Lösung. Denn Logos, die auf jeder Sei­te ange­zeigt wer­den, dür­fen gern klei­ner sein. Die Lese­rin wird sie der Häu­fig­keit wegen auch so wahr­neh­men. Ich jeden­falls habe akzep­ta­ble Erfah­run­gen mit fol­gen­den Wer­ten gemacht:

  • 132x27 pixel und 76x27 pixel (bootS­core logo.svg und logo-sm.svg)
  • 131x46 pixel und 48x56 pixel (logo fodina.de)
  • 102x57 pixel und 54x54 pixel (logos karsten-reincke.de)

Nach dem Erzeu­gen der Favicons sol­le die Use­rin — so die header.php-Docu — Wer­te in bestimm­ten Zei­len ändern. Die Zei­len­an­ga­ben bezie­hen sich auf die Datei header.php, wie sie initi­al von bootS­core mit­ge­lie­fert wird, nicht auf die gene­rier­ten Favicons: Von den Datei­en, die via real­fa­vicon­ge­ne­ra­tor erzeugt und her­un­ter­ge­la­den wer­den, soll nur in der Datei site.webmanifest bei den abso­lu­ten Pfa­den der vor­aus­ge­hen­de Slash ent­fernt wer­den.

Um den emp­foh­le­nen Favicon Check durch­zu­füh­ren, müs­sen die erzeug­ten Datei­en in ein (Vor-) Pro­duk­ti­ons­sys­tem ein­ge­spielt wer­den, damit der URL der Site unter https://realfavicongenerator.net/favicon_checker ver­wen­det wer­den kann. Zur Zeit1 merkt der Check Feh­ler an, die sich auf die Datei­en bezie­hen, die der real­fa­vicon­ge­ne­ra­tor selbst erzeugt hat. Na denn.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, ein­mal ange­fan­gen mit Ver­bes­se­run­gen der Bild­be­hand­lung, wer­den der Web-Desi­gne­rin auch die ver­wisch­ten ‘pri­mä­ren Bei­trags­gil­der’ auf­fal­len. Sie wird Lösun­gen aus­pro­bie­ren und ver­fei­nern. Und sie wird sie u.U. auch mit neu­en HTML‑5 Tech­ni­ken ange­hen. Denn damit wird eine aus­ge­fal­le­ne­re Bild­stra­te­gie samt inte­grier­ter Lizenz­er­fül­lung und das eige­ne Logo erst rich­tig sinn­voll. Wie auch immer: Bil­der brin­gen Far­be ins Lese­le­ben. Zuletzt soll­te all das also auch in ein eige­nes Farb­kon­zept ein­ge­bun­den sein. Zu die­ser The­ma­tik trägt auch die­ser Post etwas bei.

Im Übri­gen: Män­ner sind mit­ge­meint.

  1. Stand 03.03.23 [↩]
To top