Et skikkelig favicon-sett er mer enn én fil: nettlesere vil ha en .ico med flere størrelser, iOS vil ha en 180 px apple-touch-icon, Android vil ha 192 og 512 px PNG-er pluss et webmanifest. Dette verktøyet gjengir alle sammen fra ett enkelt bilde og pakker dem i én ZIP, sammen med de nøyaktige HTML-taggene du limer inn i <head>.
Forhåndsvisningen viser ikonet ditt i faktiske 16, 32 og 48 px, så du kan sjekke at det er gjenkjennelig i bitte små størrelser før du ruller det ut.
Slik bruker du verktøyet
- Legg til logoen dinKvadratiske bilder fungerer best; andre midtbeskjæres.
- Sjekk de små størrelsene16 px-forhåndsvisningen er det de fleste faktisk ser i en fane.
- Last ned ZIP-enfavicon.ico, seks PNG-er, site.webmanifest og en html-snippet.txt klar til å limes inn.
Ett bilde inn, et komplett favicon-sett ut
Slipp inn én enkelt logo eller ett ikon, så bygger denne generatoren hele settet et moderne nettsted trenger: en favicon.ico i flere størrelser som bunter 16-, 32- og 48-pikslers versjoner, frittstående PNG-er i 16, 32, 48, 180 for Apple touch-ikonet, og 192 og 512 for Android- og PWA-installasjoner, pluss en site.webmanifest. Alt kommer ned som én ZIP så du kan slippe det rett inn i prosjektroten.
Du får også en klar-til-å-lime HTML-head-snutt med de riktige link- og meta-taggene allerede koblet opp. Kopier den inn i malen din, last opp filene, og faviconet dukker opp i nettleserfaner, bokmerker og hjemskjermsnarveier uten at du håndskriver noe markering.
Skarpe ikoner i hver størrelse
Favicons er nådeløst små, så generatoren viser forhåndsvisninger i sann størrelse på 16, 32 og 48 piksler — nøyaktig slik en nettleserfane vil vise dem. Dermed fanger du opp en logo som blir grøt på 16px før du sender den fra deg. Hvis kildebildet ditt ikke er kvadratisk, senterbeskjærer verktøyet det slik at ikonet holder seg balansert i stedet for sammenklemt.
Hele prosessen kjører i nettleseren fra originalbildet ditt, som betyr at du kan generere favicon-PNG-er og en ICO fra en høyoppløselig logo uten opplasting eller konto.
Hva folk bruker det til
Lansere et nytt nettsted — Generer favicon.ico og hver PNG-størrelse i én omgang så faner og bokmerker ser ferdige ut fra dag én.
Legge til et PWA-installasjonsikon — Eksporter 192- og 512-PNG-ene pluss en site.webmanifest så appen din installeres med et skikkelig hjemskjermikon.
Apple touch-ikon — Produser 180x180 apple-touch-icon så iOS-bokmerker og hjemskjermer viser en skarp flis.
Rebrande et eksisterende nettsted — Kjør én ny logo gjennom generatoren og bytt ut hele ikonsettet på én gang.
Kundeleveranse — Lever én ZIP med ico, PNG-er, manifest og head-snutten så utvikleren bare slipper den inn.
Sjekke lesbarhet i liten størrelse — Bruk 16px-forhåndsvisningen i sann størrelse for å bekrefte at en detaljert logo fortsatt leses som et ikon.
Ikke-kvadratisk logo — Mat inn et bredt ordmerke og la senterbeskjæringen gjøre det om til et balansert kvadratisk favicon.
Statisk nettsted eller rammeverksprosjekt — Kopier de genererte head-taggene inn i Next-, Astro- eller ren HTML-malen din og publiser.
Hvorfor IMG.DIY
Komplett sett
ICO + 16/32/48/180/192/512 PNG-er + manifest.
HTML til å lime inn
De nøyaktige link-taggene følger med som tekstfil.
Forhåndsvisning i sann størrelse
Se ikonet i faktiske 16/32/48 px først.
Privat
Logoen din forlater aldri nettleseren.