Favicon-HTML-generator
Genereer de <head>-tags die uw website nodig heeft voor het favicon, touch-icon en themakleuren.
Favicon-HTML-generator
Een favicon is meer dan één bestand: een browsertabblad wil een .ico-bestand, een thuisscherm van een smartphone wil een 180×180 apple-touch-icon, de vastgemaakte Safari-tabblad wil een eenkleurig SVG-masker, en een PWA-installatiedialoog leest de pictogrammen uit het manifest. Deze tool schrijft de exacte <link>- en <meta>-tags voor allemaal uit een basispad en een reeks pictogramformaten, zodat u één blok in <head> kopieert in plaats van het uit vijf verschillende specificaties samen te stellen.
Stel het basispad in op de locatie waar de pictogrambestanden terecht zullen komen – de hoofdmap of een submap zoals /icons/ – en elke href wordt tegen eraan gebouwd. Wissel ICO, PNG en SVG onafhankelijk in: PNG voegt ook het apple-touch-icon toe op de vaste grootte 180×180 die Apple verwacht, en SVG voegt een mask-icon toe waarvan de kleur uit uw light-theme-color komt (of dark, als u alleen dat hebt ingesteld). Elke light- en dark-theme-color wordt een afzonderlijke <meta name="theme-color">-tag met een prefers-color-scheme-query, zodat de browserchroomweergave in beide modi overeenkomt met de pagina. Een aparte schakelaar voegt de oudere msapplication-tags toe die sommige Windows-tegelscenario's nog steeds lezen.
Het veld "Formaten" accepteert kommagescheiden of regelgescheiden items – "16x16, 32x32, 192x192" – en een zogenaamd getal als "48" is een afkorting voor een vierkant pictogram; onherkenbare items worden verwijderd in plaats van geweigerd. Schakel de bestandschecklist in en de uitvoer eindigt met een opmerking met elk verwezen pad in volgorde – dat is de lijst die u daadwerkelijk moet uploaden.
Alles wordt in uw browser uitgevoerd: niets wat u typt, wordt ergens verzonden. Kopieer het resultaat in de <head> van uw pagina, download het als .txt-bestand, of stuur het naar de invoer van een ander tool om het verder aan te passen.