...
Grafik | Dateityp | Größe | Anmerkungen | ||||||
|---|---|---|---|---|---|---|---|---|---|
Logo |
| keine Einschränkungen | Aktuelles Logo als Vektor-Grafik (vektorbasiertes | ||||||
monochromes Logo |
| keine Einschränkungen | Dieses Logo wird beispielsweise beim Sticky-Header verwendet. Das Logo muss nicht zwangsläufig monochrom sein, sondern sollte im Kontrast zum Sticky-Header stehen. Bitte als Vektor-Grafik (vektorbasiertes | ||||||
Favicon |
| 16×16 oder 32×32 | Das Favicon ist ein sehr kleines Symbol bzw. Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL bzw. im Tab angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. | ||||||
Apple Touch Icons |
| In den folgenden Auflösungen:
| Touch Icons werden von gängigen Smartphones und Tablets genutzt, um Lesezeichen auf dem Homescreen darzustellen. Zudem nutzen gängige Browser das Touch Icons auf der Startseite des Browsers, um die regelmäßig besuchten Seiten des Nutzers Benutzers bzw. der Benutzerin anzubieten. | ||||||
Icon |
| 192x192 | Icon für andere Systeme. | ||||||
Open Graph Logo |
| Best Practices siehe hier. | Das Open Graph Logo wird als Fallback verwendet, um auf Facebook geteilte Links zu Seiten zu bebildern, die über keine eigenen Bilder verfügen, wie beispielsweise die Startseite. Bei Beiträgen wird beispielsweise immer das erste Bild des Beitrags genutzt. | ||||||
AMP-Publisher-Logo |
| Höhe von 60px | Informationen und Hinweise zum AMP-Publisher-Logo finden sich hier. Das AMP-Publisher-Logo wird auch ohne aktiviertes AMP für die Schema-org-Auszeichnung benötigt. | ||||||
Segmentmarkierungen
|
| keine Einschränkungen | Um eine optimale Darstellung des Logos auf allen Endgeräten zu gewährleisten, bindet PEIQ die Grafiken ausschließlich als |
...
Enthält ein SVG eingebettete Grafiken, sind in der Datei Blöcke zu finden, die beispielsweise folgendermaßen aussehen:
...
| Code Block |
|---|
<image style="overflow:visible;enable-background:new;" xlink:href="logo.png"> |
| Note |
|---|
Enthält ein SVG eingebette eingebettete |
...
Datei → Exportieren → Exportieren als…
Dateityp: SVG (*.SVG) und Option Zeichenflächen verwenden
deaktivieren, wenn nur das Objekt selbst ohne Rand exportiert werden soll. Das ist üblicherweise die gewünschte Einstellung.
aktivieren, wenn die Zeichenfläche gewünscht ist, z. B. um einen Abstand um das eigentliche Element zu haben.
Stil: Inline-Format
Schrift: SVG
Bilder: Beibehalten
Objekt-IDs: Eindeutig (erstellt UUIDs)
Dezimalstellen: 2
Minifizieren: AN
Responsiv: AN
...
Optimierung von SVG-Dateien
...
| Info |
|---|
Ggf. ist es auch hier sinnvoll, die Klassen |
...
| Filter by label (Content by label) | ||||||
|---|---|---|---|---|---|---|
|
| Include Page | ||||
|---|---|---|---|---|
|