Utilia
Categorii ▾
Limbă: ro ▾

Generator de favicon

Creează favicon.ico, pictograme PNG, apple-touch-icon și site.webmanifest dintr-o imagine sau un emoji, cu etichete HTML gata de lipit. ZIP, fără încărcare.

Sursă

Potrivire
site.webmanifest

Cum creezi un favicon

  1. La Sursă, alege Imagine sau Text sau emoji. - Imagine: trage un PNG, JPG, WebP sau SVG. Cel mai bine merge o siglă pătrată de cel puțin 512 × 512 px. Alege Toată imaginea pentru a o încadra în pictogramă sau Umple și decupează pentru a acoperi pătratul. - Text sau emoji: scrie o literă, inițiale sau un emoji, apoi alege Font, Aldin și Culoarea textului.
  2. Setează Culoarea fundalului sau bifează Fundal transparent. Alege o Formă (Pătrat, Rotunjit sau Cerc) și o Margine interioară (%) pentru a lăsa spațiu în jurul conținutului.
  3. Opțional, deschide site.webmanifest pentru a introduce Numele aplicației (web manifest), Nume scurt, Culoarea temei și URL-ul folderului cu pictograme (păstrează / dacă fișierele ajung în rădăcina site-ului tău).
  4. Apasă Generează favicon-urile. Pictogramele apar la dimensiunea lor reală, lângă o filă de browser simulată. După aceea, orice modificare le actualizează instantaneu.
  5. Apasă Descarcă ZIP, încarcă fișierele pe site-ul tău, apoi Copiază etichetele și lipește-le în <head> al paginilor tale.

Ce conține arhiva ZIP

Fișier Dimensiune Folosit de
favicon.ico 16, 32 și 48 px File de browser, marcaje, browsere vechi, Windows
favicon-16x16.png 16 × 16 File de browser
favicon-32x32.png 32 × 32 File pe ecrane cu densitate mare, comenzi rapide din bara de activități
apple-touch-icon.png 180 × 180 Ecranul de pornire al iPhone și iPad
android-chrome-192x192.png 192 × 192 Ecranul de pornire Android (web manifest)
android-chrome-512x512.png 512 × 512 Ecrane de întâmpinare la instalare (web manifest)
site.webmanifest — Numele, culorile și pictogramele unui site instalabil
favicon-tags.html — Etichetele HTML, pentru referință

Fișierul ICO conține trei imagini PNG, un format pe care îl citesc Windows (din Vista) și toate browserele actuale. Apple-touch-icon este salvat întotdeauna pe un fundal uni, deoarece iOS afișează pixelii transparenți ca negri; cu fundal transparent se folosește alb.

Etichetele HTML

Etichetele generate arată astfel (cu URL-ul folderului tău):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browserele cer automat și /favicon.ico din rădăcina domeniului tău, deci păstrarea lui acolo ajută chiar și pe paginile fără etichete.

Sfaturi de design

  • Păstrează simplitatea. La 16 × 16 px, detaliile dispar. O singură literă, un simbol îndrăzneț sau cea mai simplă versiune a siglei tale se citește cel mai bine.
  • Verifică previzualizarea la dimensiune reală. Pictograma de 16 px din fila simulată este ce văd de fapt vizitatorii.
  • Gândește-te la modul întunecat. O siglă închisă pe fundal transparent poate dispărea în temele întunecate ale browserelor; un fundal colorat sau o mică margine interioară ajută.
  • Emoji arată diferit pe fiecare sistem, deoarece fiecare platformă desenează emoji în stilul ei. Fișierele PNG păstrează aspectul dispozitivului tău.

Întrebări frecvente

Ce dimensiuni are nevoie un favicon?

În practică: un favicon.ico cu 16, 32 și 48 px, un apple-touch-icon de 180 px și PNG-uri de 192 și 512 px pentru web manifest. Acest instrument le creează pe toate dintr-o singură sursă.

Pot folosi o siglă SVG?

Da. Fișierele SVG sunt desenate la rezoluție mare înainte de crearea pictogramelor. SVG-ul este afișat ca imagine simplă, deci scripturile lui nu rulează niciodată.

Cum fac un favicon din emoji?

Alege Text sau emoji, scrie sau lipește emoji-ul, alege un fundal sau păstrează-l transparent și generează. Rezultatul este un PNG și un ICO reale, deci funcționează în orice browser.

De ce nu apare noul meu favicon?

Browserele păstrează favicon-urile agresiv în cache. Reîncarcă cu cache-ul golit, deschide site-ul într-o fereastră privată sau adaugă o versiune în URL, de exemplu /favicon.ico?v=2.

Imaginea mea este încărcată pe un server?

Nu. Pictogramele, arhiva ZIP și manifestul sunt create în browserul tău; nimic nu părăsește dispozitivul tău.

Instrumente similare