ForHosting KIT · Websites auslesen & überwachen

HTML-Tags für Favicons und Apple Touch Icons erstellen

Dieser Generator wandelt eine Liste aus Symbolgrößen und öffentlichen Dateipfaden in einen geordneten Block von link-Elementen für den head einer Website um.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Für jede angegebene Ressource entsteht ein Favicon-Verweis; zusätzlich wird automatisch ein Apple Touch Icon eingebunden. Die Ausgabe ist deterministisch, Attributwerte werden sicher maskiert und das Ergebnis lässt sich direkt in Vorlagen, statische Websites, Content-Management-Systeme oder Anwendungslayouts übernehmen.

Erstellen Sie eine genaue Symbolübersicht

Beginnen Sie mit den Symboldateien, die Ihre Website bereits veröffentlicht. Fügen Sie für jede Ressource eine Zeile hinzu und tragen Sie die Pixelmaße im Format BREITExHÖHE sowie den öffentlichen Pfad oder die URL ein. Übliche Browser-Sets enthalten kleine quadratische Dateien für Tabs und Lesezeichen; ein größeres quadratisches Bild eignet sich, wenn ein Gerät die Website auf dem Startbildschirm speichert. Möglich sind websitebezogene Pfade wie /assets/icons/favicon-32.png und absolute URLs eines Asset-Hosts. Jede Größe darf nur einmal vorkommen, da zwei konkurrierende Dateien mit identischen Abmessungen die Auswahl mehrdeutig machen. Der Generator prüft alle Zeilen, bevor er Markup erzeugt. Leere Pfade, fehlerhafte Maße, doppelte Größen und nicht unterstützte Extremwerte werden dadurch als verständliche Eingabefehler gemeldet, statt defekte Tags zu erzeugen. Das Werkzeug liest weder das Dateisystem noch lädt es Bilder herunter; die Maße gelten daher als Ihre ausdrückliche Angabe. Prüfen Sie, ob jeder Pfad nach der Bereitstellung öffentlich erreichbar ist und ob die tatsächlichen Bildmaße mit Ihrer Eingabe übereinstimmen.

Verstehen Sie Auswahl und Reihenfolge der Tags

Für jedes angegebene Symbol enthält das Ergebnis ein link-Element mit rel gleich icon, einem normalisierten kleingeschriebenen sizes-Wert und einem maskierten href. Die Browser-Tags werden von der kleinsten zur größten Pixelfläche sortiert; deterministische Regeln lösen Gleichstände auf. Deshalb ergibt dieselbe logische Zusammenstellung stets dieselbe Ausgabe, selbst wenn die Zeilen in anderer Reihenfolge eintreffen. Das Apple Touch Icon wird separat gewählt. Eine quadratische Ressource mit genau 180x180 wird bevorzugt, da dieses Maß für Touch-Symbole weit verbreitet ist. Fehlt sie, wählt der Algorithmus das größte quadratische Symbol. Gibt es kein quadratisches Bild, dient die größte angegebene Ressource nach einer nachvollziehbaren Ersatzregel. Die gewählte Datei bleibt außerdem in der normalen Browser-Liste, und ein zusätzliches link-Element kennzeichnet sie mit rel gleich apple-touch-icon. Die Attributmaskierung schützt kaufmännische Und-Zeichen, Anführungszeichen und spitze Klammern in Pfaden, ohne das von HTML interpretierte Ziel zu ändern. Aus der Dateiendung wird kein MIME-Typ abgeleitet, sodass transformierte oder endungslose Routen keine falsche Deklaration erhalten.

Fügen Sie das Markup ein und prüfen Sie es

Kopieren Sie den zurückgegebenen html-Wert in den head der gemeinsamen Dokumentvorlage für alle öffentlichen Seiten. Bei einem Framework gehört er in das Wurzel-Layout oder die Metadatenvorlage, nicht wiederholt in einzelne Routen. Das Array tags enthält dieselben Zeilen als getrennte Zeichenketten, falls ein Build-Skript strukturierte Werte benötigt; icon_count und apple_touch_size vereinfachen automatisierte Kontrollen. Öffnen Sie nach der Bereitstellung den Quelltext der erzeugten Seite und prüfen Sie, ob die href-Werte vom endgültigen öffentlichen Ursprung aus erreichbar sind. Ein websitebezogener Pfad mit führendem Schrägstrich wird ab der Domainwurzel aufgelöst. Ohne Schrägstrich bezieht er sich auf den Ort des aktuellen Dokuments und kann sich in verschachtelten Routen anders verhalten. Leeren Sie beim Testen von Ersetzungen den Browser-Cache oder verwenden Sie ein privates Fenster, da Favicons besonders hartnäckig zwischengespeichert werden. Testen Sie bei Bedarf auch das Hinzufügen zum mobilen Startbildschirm. Das Werkzeug schreibt ausschließlich Verweise: Es erstellt keine Bilder, ändert kein Webmanifest, lädt keine Ressourcen hoch und bestätigt keinen ausgelieferten Inhaltstyp.

Anwendungsfälle

Den head einer statischen Website aufbauen

Wandeln Sie eine versionierte Liste von Symbolressourcen in einsetzbares Markup für ein gemeinsames HTML-Layout um.

Anwendungsvorlagen vereinheitlichen

Erzeugen Sie konsistent sortierte Favicon-Angaben für mehrere Websites mit unterschiedlichen Symbolpfaden.

Bereitstellungsmetadaten automatisieren

Übergeben Sie strukturierte Tags und die gewählte Touch-Größe an eine Build-Prüfung oder Veröffentlichungspipeline.

Häufige Fragen

Was geschieht, wenn ich keine Symbole übermittle?

Die Anfrage schlägt mit einem Fehler für ungültige Eingaben fehl, weil mindestens ein Symbolpfad und eine Größe erforderlich sind.

Wie wird das Apple Touch Icon ausgewählt?

Ein quadratisches Symbol mit 180x180 wird bevorzugt, sonst das größte quadratische Symbol. Ohne quadratische Bilder wird die größte angegebene Ressource gewählt.

Erstellt oder skaliert dieses Werkzeug Favicon-Dateien?

Nein. Es erzeugt nur HTML-Verweise auf Dateien, die Sie bereits erstellt und öffentlich bereitgestellt haben.

Kann ich absolute URLs verwenden?

Ja. Jeder Pfad darf eine absolute URL oder ein websitebezogener Pfad sein; unsichere Zeichen in HTML-Attributen werden maskiert.

Warum werden doppelte Größen abgelehnt?

Eine Angabe je Größe macht die Browser-Auswahl vorhersehbar und verhindert Konkurrenz zwischen zwei Ressourcen mit denselben Maßen.

Was kostet die API?

Die API kostet $0.002 je Anfrage. Die Browserversion steht auf dieser Seite kostenlos bereit.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/favicon-meta-generate

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/web/favicon-meta-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}'

const res = await fetch("https://api.kit.forhosting.com/web/favicon-meta-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "icons": [
      {
        "size": "16x16",
        "path": "/favicon-16x16.png"
      },
      {
        "size": "32x32",
        "path": "/favicon-32x32.png"
      },
      {
        "size": "180x180",
        "path": "/apple-touch-icon.png"
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/favicon-meta-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "icons": [
        {
            "size": "16x16",
            "path": "/favicon-16x16.png"
        },
        {
            "size": "32x32",
            "path": "/favicon-32x32.png"
        },
        {
            "size": "180x180",
            "path": "/apple-touch-icon.png"
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/favicon-meta-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/favicon-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "icons": [
    {
      "size": "16x16",
      "path": "/favicon-16x16.png"
    },
    {
      "size": "32x32",
      "path": "/favicon-32x32.png"
    },
    {
      "size": "180x180",
      "path": "/apple-touch-icon.png"
    }
  ]
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.favicon_meta_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →