Ingen opplasting, 100% lokalt, ingen konto

Favicon-generator

Last opp logoen eller ikonet ditt og last ned alle standard favicon-størrelser som PNG. Inkluderer Apple Touch Icon og PWA-ikoner. Ingenting forlater enheten din.

Slik fungerer Favicon-generator

Favicon-generator tar et bilde du gir og endrer størrelsen til standardfavicon-dimensjoner ved hjelp av Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch-ikon), 192x192 (Android Chrome) og 512x512 (PWA-manifest). Alle seks størrelsene genereres i nettleseren din, sammen med en favicon.ico i flere størrelser som samler 16x16-, 32x32- og 48x48-bildene i én eldre filtype. Kildebildet ditt forlater aldri enheten din.

Et komplett favicon-sett dekker hele spekteret av nettleserfaneikoner, bokmerker, skjermsnarvei og PWA-startskjermer. Bruk av et høyoppløselig kildebilde (minst 512x512 piksler) gir nedskaleringsalgoritmen mest detaljer å arbeide med. HTML-link-taggene du trenger for å referere til hver generert fil vises i et utdrag du kan kopiere direkte inn i sidens head-element.

Skrevet av Bastien Sulyan

Slik bruker du Favicon-generator, steg for steg

  1. Slipp kildebildet ditt på opplastingsområdet. Bruk et kvadratisk bilde på 512 px eller større for best resultat.
  2. Forhåndsvis de seks genererte størrelsene i resultatpanelet.
  3. Last ned de seks PNG-filene og favicon.ico fra resultatpanelet.
  4. Kopier HTML-utdraget som viser link-taggene for alle størrelser.
  5. Plasser PNG-filene ved nettstedsroten og lim inn link-taggene i sidens head.

Vanlige bruksområder

  • En utvikler setter opp et nytt nettsted og trenger alle favicon-størrelser generert fra merkelogoen uten et designverktøyabonnement.
  • En PWA-forfatter genererer 192x192- og 512x512-ikonene som kreves i webappmanifestet for installasjon på startskjermen.
  • En blogger oppdaterer nettstedets identitet og erstatter standard-favicon med et tilpasset ikon bygget fra logoen.
  • En frilanser produserer raskt det komplette favicon-settet for et klientprosjekt uten å vente på installasjon av frakoblet designprogramvare.

Ofte stilte spørsmål

Hvilke bildeformater kan jeg bruke som kilde?

Ethvert format nettleseren kan dekode fungerer som inngang: JPEG, PNG, WebP, GIF og SVG. For SVG-kilder rasteriserer nettleseren vektoren til et Canvas før endring av størrelse, slik at utdata-PNG-ene er rasterbilder uansett.

Hvorfor er favicon-et mitt uklart i nettleserfanen?

Størrelsene 16x16 og 32x32 er svært små. Hvis kildebildet inneholder fine detaljer eller tynne linjer, vil de ikke overleve nedskaleringsalgoritmene. Et enkelt, tydelig design med klare former fungerer mye bedre i små størrelser enn en kompleks illustrasjon.

Genererer verktøyet ICO-filer?

Ja. I tillegg til de seks PNG-filene setter verktøyet sammen en favicon.ico som samler 16x16-, 32x32- og 48x48-bildene i én fil, som er det eldre Windows-nettlesere og enkelte krypere fortsatt leter etter ved nettstedsroten. Moderne nettlesere er fornøyd med PNG-lenkene, så å publisere begge koster ingenting og lar hver klient velge selv.

Behandles kildebildet på en server?

Nei. Canvas drawImage-kallene som produserer hver størrelse kjøres i nettleserfanen din. Kildebildet leses fra din lokale disk, og de seks PNG-utdataene opprettes i minnet og tilbys som nedlastinger. Ingen fildata passerer gjennom en server.

Hvilken størrelse bør jeg bruke for Apple touch-ikonet?

iOS og iPadOS bruker 180x180 piksler PNG referert av apple-touch-icon link-taggen. Denne størrelsen brukes når en bruker legger til nettstedet ditt på startskjermen på en Apple-enhet. Verktøyet genererer denne filen sammen med de andre størrelsene.

Kan jeg bruke et rektangulært bilde som kilde?

Ja, men utdata vil bli letterboxed eller pillarboxed for å passe inn i det kvadratiske Canvas. For best resultat, start med et kvadratisk bilde eller beskjær kildebildet til et kvadrat før du bruker verktøyet.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle bildeverktøy