Generator de favicon

Toate pictogramele site-ului tău pornind de la logo, gata de încărcat.

Alte instrumente: JPEG în JPG Comprimă JPG Comprimă PNG Comprimă WebP Redimensionează imaginea Decupează imaginea Unește imaginile

Alege imaginea PNG, JPG, WebP sau SVG

Un singur fișier o dată, de până la 20 MB.

Încadrare în pătrat

Încadrează Toată imaginea Umple Taie marginile

Pictogramele sunt pătrate. Dacă imaginea ta nu este, alege dacă apare întreagă (cu margini transparente) sau dacă umple pătratul.

Culoarea fundalului

Pentru pictograma Apple, care nu poate fi transparentă, și ca culoare a temei pe Android.

Fișierele tale sunt șterse automat după conversie și cel târziu la o oră după încărcare. Cum procedăm cu fișierele tale

Creează faviconul complet al site-ului tău pornind de la logo: pictograma din fila browserului, cele de pe ecranul principal al iPhone-ului și al Androidului, manifestul și codul HTML care le leagă. Încarcă o imagine PNG, JPG, WebP sau SVG și descarcă o arhivă ZIP cu tot, fără cont și fără filigran.

Cum creezi un favicon

Alege logoul sau pictograma în PNG, JPG, WebP sau SVG, de preferință pătrată și de cel puțin 512 pixeli.
Alege dacă imaginea apare întreagă sau umple pătratul și culoarea fundalului pentru pictograma Apple.
Apasă „Creează faviconul” și descarcă arhiva ZIP.
Pune fișierele în rădăcina site-ului și lipește codul din head.html în eticheta head a paginilor tale.

Ce conține pachetul

Fișier	La ce folosește
`favicon.ico`	Pictograma clasică a filei, cu mărimile de 16, 32 și 48 de pixeli într-un singur fișier. Browserele o caută chiar dacă nu o legi.
`favicon-16x16.png` și `favicon-32x32.png`	Pictogramele filei și ale marcajelor în browserele actuale.
`apple-touch-icon.png`	Pictograma de 180 de pixeli pe care o folosesc iPhone-ul și iPad-ul când cineva îți adaugă site-ul pe ecranul principal.
`android-chrome-192x192.png` și `android-chrome-512x512.png`	Pictogramele pentru Android și aplicațiile web instalabile.
`site.webmanifest`	Manifestul care declară pictogramele Android și culoarea site-ului tău.
`head.html`	Etichetele care leagă pictogramele de paginile tale.

Cum îl instalezi pe site

Dezarhivează fișierul ZIP și pune toate fișierele, în afară de head.html, în rădăcina site-ului (unde se află pagina principală).
Copiază aceste etichete, care sunt și în head.html, în eticheta head a paginilor tale:

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Dacă vrei, scrie numele site-ului în câmpurile name și short_name din site.webmanifest.

Browserele păstrează faviconul în cache: dacă nu vezi imediat noul favicon, reîncarcă pagina forțat sau așteaptă puțin.

Încadrează sau umple

Toate pictogramele sunt pătrate. Dacă imaginea ta nu este, o poți încadra, ca să apară întreagă cu margini transparente, sau poți umple pătratul, tăind ce iese pe laterale. Pentru un logo orizontal cu text, e adesea mai bine să folosești doar simbolul logoului, decupat în pătrat.

Pictograma Apple nu poate fi transparentă: iOS ar umple fundalul cu negru. De aceea o creăm cu culoarea de fundal pe care o alegi, folosită și drept culoare a site-ului tău pe Android. Celelalte pictograme își păstrează transparența.

Sfaturi pentru un rezultat bun

Pornește de la o imagine mare, de cel puțin 512 × 512 pixeli, sau și mai bine de la un SVG: pictogramele mici se calculează din ea.
Simplifică: la 16 pixeli, textele și detaliile fine nu se mai citesc. Un simbol sau o inițială în culori contrastante merge mult mai bine.

Dacă ai nevoie doar de fișierul .ico, poți transforma PNG-ul în ICO.

Limite

O singură imagine o dată, de cel mult 20 MB și 100 de megapixeli.
Nu modificăm site-ul tău: trebuie să încarci tu fișierele și să adaugi etichetele sau să îl rogi pe cel care îți administrează site-ul.

Întrebări frecvente

Ce mărime trebuie să aibă imaginea ca să creez un favicon?

Cu cât mai mare, cu atât mai bine: cel puțin 512 × 512 pixeli sau un SVG. Toate pictogramele, de la 512 la 16 pixeli, se calculează din ea.

Unde pun fișierele faviconului?

În rădăcina site-ului, în același folder cu pagina principală. Apoi lipește etichetele din head.html în eticheta head a paginilor tale.

De ce nu văd noul favicon în browser?

Pentru că browserele păstrează faviconul în cache. Reîncarcă pagina forțat, deschide-o într-o fereastră privată sau așteaptă puțin.

De ce pictograma Apple are fundal colorat?

Pentru că iOS nu acceptă transparență în pictogramele de pe ecranul principal și ar umple fundalul cu negru. O creăm cu culoarea de fundal aleasă de tine, ca să arate bine.

Pot crea așa faviconul unui site WordPress?

WordPress are propria opțiune, „Iconiță site” (în Aspect › Personalizare › Identitate site sau, în funcție de versiune și temă, în setările generale): încarci o imagine pătrată și WordPress creează mărimile. Pachetul acestui instrument este pentru site-uri pe care poți încărca fișiere și edita codul.