Ingen upload, 100% lokalt, ingen konto

Favicon-generator

Upload dit logo eller ikon og download alle standard favicon-størrelser som PNG. Inkluderer Apple Touch Icon og PWA-ikoner. Intet forlader din enhed.

Sådan virker Favicon-generator

Favicon-generator tager ethvert billede, du giver, og ændrer størrelsen til standardfavicon-dimensionerne ved hjælp af Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android Chrome) og 512x512 (PWA manifest). Alle seks størrelser genereres i din browser, sammen med et favicon.ico i flere størrelser, der samler 16x16-, 32x32- og 48x48-billederne i én enkelt ældre fil. Dit kildebillede forlader aldrig din enhed.

Et komplet favicon-sæt dækker hele spektret af browser-fane-ikoner, bogmærker, hjemmeskærms-genveje og PWA-startskærme. Brug af et højtopløst kildebillede (mindst 512x512 pixels) giver nedskalingsalgoritmen mest detalje at arbejde med. De HTML link-tags, du skal bruge til at referere til hver genereret fil, vises i et snippet, du kan kopiere direkte ind i sidens head-element.

Skrevet af Bastien Sulyan

Sådan bruger du Favicon-generator, trin for trin

  1. Slip dit kildebillede på upload-området. Brug et kvadratisk billede på 512 px eller større for bedste resultater.
  2. Forhåndsvis de seks genererede størrelser i resultatpanelet.
  3. Download hver af de seks PNG-filer og favicon.ico-filen fra resultatpanelet.
  4. Kopier HTML-snippeten, der viser link-tags til alle størrelser.
  5. Placer PNG-filerne ved dit websteds rod og indsæt link-tags i din sides head.

Almindelige anvendelser

  • En udvikler sætter et nyt websted op og har brug for alle favicon-størrelser genereret fra brandlogoet uden et designværktøjsabonnement.
  • En PWA-forfatter genererer 192x192 og 512x512 ikoner, der kræves i web-app-manifestet til hjemmeskærmsinstallation.
  • En blogger opdaterer sin side-identitet og erstatter standard-faviconet med et brugerdefineret ikon bygget fra deres logo.
  • En freelancer producerer hurtigt det fulde favicon-sæt til et kundeprojekt uden at vente på at installere offline-designsoftware.

Ofte stillede spørgsmål

Hvilke billedformater kan jeg bruge som kilde?

Ethvert format, browseren kan afkode, fungerer som input: JPEG, PNG, WebP, GIF og SVG. For SVG-kilder rasteriserer browseren vektoren til et Canvas inden ændring af størrelse, så output-PNG'er er rasterbilleder uanset.

Hvorfor er mit favicon sløret i browser-fanen?

Størrelserne 16x16 og 32x32 er meget små. Hvis kildebilledet indeholder fine detaljer eller tynde linjer, overlever de ikke nedskalering. Et simpelt, fremtrædende design med klare former fungerer meget bedre i små størrelser end en kompleks illustration.

Genererer værktøjet ICO-filer?

Ja. Ud over de seks PNG-filer samler værktøjet et favicon.ico, der indeholder 16x16-, 32x32- og 48x48-billederne i én fil, hvilket er det, ældre Windows-browsere og visse crawlere stadig leder efter ved webstedets rod. Moderne browsere er tilfredse med PNG-links, så det koster intet at udgive begge dele og lader hver klient vælge.

Behandles kildebilledet på en server?

Nej. Canvas drawImage-kaldene, der producerer hver størrelse, kører i din browser-fane. Kildebilledet læses fra din lokale disk, og de seks PNG-output oprettes i hukommelsen og tilbydes som downloads. Ingen fildata passerer gennem en server.

Hvilken størrelse skal jeg bruge til Apple touch icon?

iOS og iPadOS bruger 180x180 pixel PNG refereret af apple-touch-icon link-tagget. Denne størrelse bruges, når en bruger tilføjer dit websted til sin startskærm på en Apple-enhed. Værktøjet genererer denne fil sammen med de andre størrelser.

Kan jeg bruge et rektangulært billede som kilde?

Ja, men outputtet vil blive letter-boxed eller pillar-boxed for at passe til den kvadratiske canvas. For bedste resultater starter du med et kvadrat eller beskærer dit kildebillede til et kvadrat inden brug af værktøjet.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle billedværktøjer