Ethvert seriøst prosjekt trenger en tydelig favicon i nettleserfanen, et Apple touch-ikon for iOS og appikoner for Android og PWA. Dette verktøyet hjelper deg med å generere dem fra ett bilde: last opp en kvadratisk logo, velg størrelser, last ned PNG-filene og kopier HTML-snippeten til nettstedet ditt.
Hvorfor favicon og appikoner betyr noe
- Favicon — det lille ikonet i nettleserfanen og bokmerkene. Uten det ser fanen generisk ut og merkevaren din blir mindre gjenkjennelig.
- Apple touch-ikon — brukes når brukeren legger nettstedet ditt på hjemskjermen på iPhone og iPad. Riktig størrelse (f.eks. 180×180) gir et skarpt ikon.
- PWA-/Android-ikoner — nødvendig for «Legg til på hjemskjermen» og installasjon. Typiske størrelser: 192×192 og 512×512.
Ét kvadratisk kildebilde kan dekke alt. Generatoren kjører helt i nettleseren; logoen din forlater aldri enheten din.
Anbefalt kildebilde
Bruk et kvadratisk bilde (PNG eller SVG) på minst 512×512 piksler. Høyere oppløsning er greit; verktøyet skalerer ned. Unngå for små eller tøyde bilder slik at ikonene forblir skarpe på skjermer med høy pikseltetthet.
Rask start med verktøyet
- Last opp — Klikk på «Velg fil» og velg logoen din (PNG eller SVG, kvadratisk, 512×512 eller større).
- Bakgrunn — Velg bakgrunnsfarge hvis logoen har transparens; den brukes også som
theme-colori snippeten. - Størrelser — Kryss av for størrelsene du trenger (favicon 16/32, Apple 180, PWA 192/512 osv.).
- Last ned — Klikk på en forhåndsvisning for å laste ned den størrelsen som PNG, eller «Last ned alt som ZIP» for å få alt på en gang.
- Snippet — Kopier HTML-blokken og lim den inn i nettstedets
<head>. Last opp PNG-filene til serveren (f.eks./assets/icons/) og juster stiene i snippeten om nødvendig.
Hvor filene skal ligge
En vanlig oppsett:
- Legg favicon- og ikon-PNG-filene i en mappe som
/assets/icons/eller i root. - Oppdater snippeten slik at
hrefpeker til disse stiene (f.eks./assets/icons/favicon-32x32.png). - Legg til
site.webmanifestfor PWA med de samme stiene til 192×192- og 512×512-ikonene.
Oppsummering
Favicon- og appikon-generatoren lar deg gå fra én logo til alle nødvendige størrelser og en ferdig snippet for <head>. Bruk et kvadratisk bilde i god oppløsning, last ned PNG-filene og sett inn snippeten i prosjektet ditt.