Generator favicon — ICO, PNG și Apple Touch Icon
Transformă o singură imagine într-un set complet de favicon: favicon.ico, pictograme PNG, un apple-touch-icon și un manifest de aplicație web.
Apple-touch-icon este întotdeauna opac. Când numele aplicației este gol, manifestul folosește numele fișierului imagine.
Previzualizare
Fișiere în ZIP
Cum se face un favicon
- Alege o imagine pătrată, ideal de cel puțin 512 pe 512 pixeli, în format PNG, JPG, WebP sau SVG.
- Alege cum să se potrivească imaginile ne-pătrate: contain le umple cu culoarea de fundal, cover le decupează din centru.
- Setează culorile de fundal și de temă, spațiul de umplere și dacă pictogramele mici păstrează un fundal transparent.
- Scrie numele aplicației și numele scurt pe care să le conțină manifestul de aplicație web, apoi verifică previzualizările live.
- Descarcă ZIP-ul cu toate fișierele sau ia separat favicon.ico și apple-touch-icon.png și copiază fragmentul HTML.
Când ajută
- Darea unui favicon unui site nou fără a deschide un editor de imagini.
- Înlocuirea unui favicon lipsă sau neclar care apare ca o pictogramă goală de pagină în file.
- Adăugarea unui apple-touch-icon pentru ca un site să arate bine când este salvat pe ecranul principal al unui iPhone.
- Pregătirea pictogramelor Android și a unui manifest pentru o aplicație web progresivă.
- Transformarea unui logo într-un set ordonat de pictograme cu umplere uniformă la fiecare dimensiune.
Întrebări frecvente
Ce dimensiuni produce generatorul?
Scrie favicon.ico cu imagini de 16, 32 și 48 pixeli în interior, fișiere separate favicon-16x16.png și favicon-32x32.png, un apple-touch-icon.png la 180 pe 180 și pictograme Android la 192 și 512 pixeli.
De ce apple-touch-icon este întotdeauna opac?
iOS nu afișează transparența într-o pictogramă de pe ecranul principal, așa că un PNG transparent ar ieși cu un bloc negru sau alb în spate. Generatorul umple acel fișier cu culoarea ta de fundal și lasă dimensiunile mici ale favicon-ului transparente dacă vrei.
Ce ar trebui să pun în manifest?
Folosește numele complet al site-ului sau aplicației și un nume scurt de aproximativ douăsprezece caractere, deoarece numele scurt este cel care apare sub pictogramă pe telefon. Culoarea de temă nuanțează bara browserului, iar culoarea de fundal umple ecranul de întâmpinare.
Pot folosi un logo SVG?
Da. SVG-ul este rasterizat la 512 pixeli lățime, iar raportul său de aspect este luat din atributele de lățime și înălțime sau din viewBox, așa că un logo pătrat rămâne pătrat.
Unde merg fișierele pe serverul meu?
Pune-le în rădăcina site-ului lângă index.html, pentru ca căile din fragment, precum /favicon.ico și /site.webmanifest, să se rezolve. Dacă le ții într-un subfolder, editează valorile href din fragment pentru a se potrivi.
Imaginea mea este încărcată undeva?
Nu. Imaginea este decodată și desenată pe un canvas în browserul tău, iar ZIP-ul este asamblat în memorie, așa că nimic nu este trimis la un server.