Favicon-generator — ICO, PNG og Apple Touch Icon
Gjør ett bilde om til et komplett favicon-sett: favicon.ico, PNG-ikoner, et apple-touch-icon og en web app-manifest.
Apple-touch-icon er alltid ugjennomsiktig. Når appnavnet er tomt, bruker manifesten bildefilnavnet.
Forhåndsvisning
Filer i ZIP-en
Slik lager du et favicon
- Velg et kvadratisk bilde, helst minst 512 x 512 piksler, i PNG-, JPG-, WebP- eller SVG-format.
- Velg hvordan ikke-kvadratiske bilder skal tilpasses: contain fyller ut med bakgrunnsfargen, cover beskjærer fra midten.
- Sett bakgrunns- og temafargen, innvendig marg og om de små ikonene skal beholde gjennomsiktig bakgrunn.
- Skriv inn appnavnet og kortnavnet som web app-manifesten skal ha, og sjekk forhåndsvisningene direkte.
- Last ned ZIP-en med alle filene, eller hent favicon.ico og apple-touch-icon.png hver for seg, og kopier HTML-utdraget.
Når det er nyttig
- Gi et nytt nettsted et favicon uten å åpne et bilderedigeringsprogram.
- Erstatte et manglende eller uskarpt favicon som vises som et tomt sideikon i faner.
- Legge til et apple-touch-icon slik at et nettsted ser riktig ut når det lagres på iPhone-hjemmeskjermen.
- Klargjøre Android-ikoner og en manifest for en progressiv webapp.
- Gjøre en logo om til et ryddig ikonsett med jevn marg i alle størrelser.
Ofte stilte spørsmål
Hvilke størrelser lager generatoren?
Den skriver favicon.ico med 16, 32 og 48 pikslers bilder inni, separate favicon-16x16.png- og favicon-32x32.png-filer, et apple-touch-icon.png på 180 x 180, og Android-ikoner på 192 og 512 piksler.
Hvorfor er apple-touch-icon alltid ugjennomsiktig?
iOS viser ikke gjennomsiktighet i et hjemmeskjermikon, så en gjennomsiktig PNG ville fått en svart eller hvit blokk bak seg. Generatoren fyller den filen med bakgrunnsfargen din og lar de små favicon-størrelsene være gjennomsiktige hvis du vil.
Hva bør jeg legge i manifesten?
Bruk det fulle nettsteds- eller appnavnet og et kortnavn på rundt tolv tegn, fordi kortnavnet er det som vises under ikonet på en telefon. Temafargen farger nettleserlinjen, og bakgrunnsfargen fyller oppstartsskjermen.
Kan jeg bruke en SVG-logo?
Ja. SVG-en rasteriseres i 512 piksler bredde, og sideforholdet hentes fra bredde- og høydeattributtene eller fra viewBox, så en kvadratisk logo forblir kvadratisk.
Hvor skal filene ligge på serveren min?
Legg dem i nettstedets rot ved siden av index.html, slik at stiene i utdraget som /favicon.ico og /site.webmanifest fungerer. Hvis du har dem i en undermappe, redigerer du href-verdiene i utdraget slik at de stemmer.
Lastes bildet mitt opp noe sted?
Nei. Bildet dekodes og tegnes på et canvas inne i nettleseren din, og ZIP-en settes sammen i minnet, så ingenting sendes til en server.