Ett riktigt favicon-paket är mer än en fil: webbläsare vill ha en .ico i flera storlekar, iOS vill ha en 180 px apple-touch-icon, Android vill ha PNG i 192 och 512 px plus ett webbmanifest. Det här verktyget renderar allihop från en enda bild och packar dem i en ZIP, tillsammans med de exakta HTML-taggarna att klistra in i din <head>.
Förhandsvisningen visar din ikon i verkliga 16, 32 och 48 px så att du kan kontrollera att den förblir igenkännbar i pyttesmå storlekar innan du sjösätter den.
Så här gör du
- Lägg till din logotypKvadratiska bilder fungerar bäst; andra beskärs centrerat.
- Kontrollera de små storlekarna16 px-förhandsvisningen är vad de flesta användare faktiskt ser i en flik.
- Ladda ner ZIP-filenfavicon.ico, sex PNG-filer, site.webmanifest och en html-snippet.txt redo att klistras in.
En bild in, en komplett favicon-uppsättning ut
Släpp in en enda logotyp eller ikon så bygger den här generatorn hela uppsättningen en modern webbplats behöver: en favicon.ico med flera storlekar som samlar 16-, 32- och 48-pixelversioner, fristående PNG:er i 16, 32, 48, 180 för Apple touch-ikonen, samt 192 och 512 för Android- och PWA-installationer, plus en site.webmanifest. Allt kommer ner som en ZIP så att du kan lägga den rakt in i din projektrot.
Du får också ett klart att klistra in HTML-head-avsnitt med rätt link- och meta-taggar redan kopplade. Kopiera in det i din mall, ladda upp filerna, så visas faviconen i webbläsarflikar, bokmärken och hemskärmsgenvägar utan att du handskriver någon markup.
Skarpa ikoner i varje storlek
Favicons är obarmhärtigt små, så generatorn renderar förhandsvisningar i verklig storlek vid 16, 32 och 48 pixlar — precis så som en webbläsarflik kommer att visa dem. Det låter dig fånga en logotyp som blir till gröt vid 16px innan du levererar den. Om din källbild inte är kvadratisk centrumbeskär verktyget den så att ikonen håller balansen i stället för att tryckas ihop.
Hela processen körs i webbläsaren från din originalbild, vilket betyder att du kan generera favicon-PNG:er och en ICO från en högupplöst logotyp utan någon uppladdning eller något konto.
Vad folk använder det till
Lansera en ny webbplats — Generera favicon.ico och varje PNG-storlek i en vända så att flikar och bokmärken ser färdiga ut från dag ett.
Lägga till en PWA-installationsikon — Exportera 192- och 512-PNG:erna plus en site.webmanifest så att din app installeras med en riktig hemskärmsikon.
Apple touch-ikon — Producera 180x180-apple-touch-icon så att iOS-bokmärken och hemskärmar visar en skarp platta.
Omprofilering av en befintlig webbplats — Kör en ny logotyp genom generatorn och byt hela ikonuppsättningen på en gång.
Kundöverlämning — Lämna över en enda ZIP med ico, PNG:er, manifest och head-avsnitt så att utvecklaren bara lägger in det.
Kontrollera läsbarhet i liten storlek — Använd 16px-förhandsvisningen i verklig storlek för att bekräfta att en detaljerad logotyp fortfarande fungerar som ikon.
Icke-kvadratisk logotyp — Mata in ett brett ordmärke och låt centrumbeskärningen göra det till en balanserad kvadratisk favicon.
Statisk sajt eller ramverksprojekt — Kopiera de genererade head-taggarna till din Next-, Astro- eller rena HTML-mall och leverera.
Varför IMG.DIY
Komplett paket
ICO + PNG i 16/32/48/180/192/512 + manifest.
HTML att kopiera
De exakta link-taggarna medföljer som textfil.
Förhandsvisning i verklig storlek
Se ikonen i riktiga 16/32/48 px först.
Privat
Din logotyp lämnar aldrig webbläsaren.