Generator Favicon, Pictograme & Manifest PWA
Generează favicon.ico binar (16x16, 32x32, 48x48), pictograme iOS Apple Touch, iconițe Android PWA cu zonă de siguranță 80% și fișierul site.webmanifest.
Instrumente OnlinePictogramă Adaptivă PWA (Zonă de Siguranță) & Geometrie Insignă
Minimum 20% păstrează sigla în Cercul Zonei de Siguranță de 80% pe Android
Pupitru de Previzualizare Live Multi-Platformă
Simulare în timp real pentru Rezultate Google Search (SERP), Tab-uri Browser, Ecran Acasă iOS și Măști Adaptive Android
Previzualizează modul în care Google Search afișează pictograma circulară de 48×48px lângă adresa URL în rezultatele de căutare.
Previzualizează modul în care Google Search afișează pictograma circulară de 48×48px lângă adresa URL în rezultatele de căutare.
Transparența este înlocuită automat cu fundalul tău solid pentru ca iOS să nu transforme canalul alfa în negru opac.
Metadate Manifest Aplicație Web (site.webmanifest)
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Tabel Oficial de Referință pentru Dimensiuni Favicon, Apple Touch Icon și Manifest PWA
Specificații tehnice complete conform Google Search Central, Apple iOS Human Interface Guidelines și W3C Web App Manifest
| Nume Fișier | Rezoluție (px) | Standard de Codare | Platformă Țintă și Context | Cerință Tehnică de Conformitate |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Container Binar Microsoft ICONDIR | Browsere Clasice și Crawlerul Google Search | Trebuie să includă obligatoriu rezoluția binară de 48×48px; nu redenumi niciodată un simplu fișier PNG în .ico. |
| favicon-16x16.png | 16×16 px | PNG RGBA pe 32 de biți | Tab-uri Browser Desktop Standard (1x) și Marcaje | Siluetă cu contrast ridicat pentru lizibilitate clară la 16 pixeli. |
| favicon-32x32.png | 32×32 px | PNG RGBA pe 32 de biți | Tab-uri Browser Desktop Retina (2x HiDPI) | Pictograma principală de tab pe ecranele moderne de înaltă densitate. |
| favicon-48x48.png | 48×48 px | PNG RGBA pe 32 de biți | Rezultate de Căutare Google (SERP) pe Mobil și Desktop | Pragul minim impus de Google Search Central (multiplu exact de 48px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | PNG RGBA pe 32 de biți | Afișare Google SERP High-DPI și Scurtături Desktop | Multiplu 2x de 48px recomandat pentru decuparea circulară impecabilă în motorul de căutare. |
| apple-touch-icon.png | 180×180 px | PNG Opac pe 24 de biți | Ecranul Principal Apple iPhone și iPad | Necesită fundal solid opac; sistemul iOS redă pixelii transparenți ca negru complet (#000000). |
| android-chrome-192x192.png | 192×192 px | PNG 32 biți (purpose: any) | Ecranul Principal și Sertarul de Aplicații Android | Cerință obligatorie în auditurile Google Lighthouse pentru instalarea aplicațiilor PWA. |
| android-chrome-512x512.png | 512×512 px | PNG 32 biți (purpose: any) | Ecran de Pornire Android PWA și WebAPK | Grafică master de înaltă rezoluție necesară la generarea automată a ecranului de pornire. |
| maskable-icon-512x512.png | 512×512 px | PNG Opac (purpose: maskable) | Forme Adaptive Android (Cerc, Squircle, Picătură) | Elementele grafice esențiale trebuie încadrate în cercul central de siguranță de 80% (minimum 20% spațiere interioară). |
Trebuie să includă obligatoriu rezoluția binară de 48×48px; nu redenumi niciodată un simplu fișier PNG în .ico.
Siluetă cu contrast ridicat pentru lizibilitate clară la 16 pixeli.
Pictograma principală de tab pe ecranele moderne de înaltă densitate.
Pragul minim impus de Google Search Central (multiplu exact de 48px: 48×48, 96×96, 144×144).
Multiplu 2x de 48px recomandat pentru decuparea circulară impecabilă în motorul de căutare.
Necesită fundal solid opac; sistemul iOS redă pixelii transparenți ca negru complet (#000000).
Cerință obligatorie în auditurile Google Lighthouse pentru instalarea aplicațiilor PWA.
Grafică master de înaltă rezoluție necesară la generarea automată a ecranului de pornire.
Elementele grafice esențiale trebuie încadrate în cercul central de siguranță de 80% (minimum 20% spațiere interioară).
Cum Generezi și Instalezi Corect Setul de Favicon și Pictograme PWA
Ghid tehnic în 5 pași pentru conformitate cu Google Search SERP, iOS și aplicații web progresive
Alege Sursa Grafică în Studioul 3-în-1
Încarcă un fișier logo existent (SVG, PNG, WebP), tastează o monogramă din 1–3 litere cu font personalizat sau alege un simbol vectorial emoji.
Verifică Alerta de Mod Întunecat și Zona de Siguranță
Urmărește detectorul automat de vizibilitate pe tab-uri întunecate și ajustează glisorul de spațiere interioară (minimum 20% pentru Android) în interiorul cercului de 80%.
Inspectează Previzualizările Live pe Cele 4 Platforme
Testează în timp real afișarea în rezultatele Google Search (mobil și desktop), pe tab-urile Chrome/Safari (Luminos și Întunecat), pe ecranul iOS și sub măștile adaptive Android.
Configurează Manifestul Web și Descarcă Arhiva ZIP
Completează numele aplicației și culorile de temă, apoi apasă pe Descarcă Pachetul Complet de Pictograme (.ZIP) pentru a obține instantaneu toate cele 10 fișiere.
Copiază Fișierele în Rădăcina Site-ului și Inserează Codul
Extrage conținutul arhivei în directorul public/ și copiază cu un clic fie etichetele HTML5 <head>, fie obiectul nativ Metadata pentru Next.js App Router.
Codare Binară 100% în Browser și Confidențialitate Absolută a Brandului
Întregul proces de randare pe canvas, împachetarea la nivel de octeți a containerului binar .ICO, analiza luminanței pixelilor și arhivarea ZIP se execută exclusiv în memoria locală a browserului tău. Siglele și resursele tale grafice nu sunt trimise niciodată către vreun server extern.
Întrebări Frecvente (Standarde Favicon, Apple Touch Icon & PWA)
Răspunsuri inginerești detaliate despre indexarea în Google Search, containere binare .ICO și pictograme adaptive
Q:Am înlocuit fișierul favicon.ico pe server, dar în Chrome și Safari văd tot iconița veche. Cum forțez actualizarea?
Browserele moderne stochează favicon-urile într-o bază de date locală separată de cache-ul obișnuit al paginilor, motiv pentru care o simplă reîncărcare (Ctrl+F5) nu șterge mereu iconița veche. Soluția sigură este să adaugi un parametru de versiune în calea fișierelor (de exemplu /favicon.ico?v=2) sau să deschizi pagina într-o fereastră Incognito pentru a verifica noul pachet.
Q:Câte litere este recomandat să folosesc într-o monogramă pentru ca textul să rămână lizibil la 16×16 pixeli?
Pe un tab de browser clasic (16×16 px), spațiul efectiv după aplicarea marginii interioare este de aproximativ 12×12 pixeli. Din experiență practică, o monogramă din 1 sau 2 litere majuscule cu grosime 700 (Îngroșat) sau 800 (Extra-Îngroșat) rămâne impecabil de clară, în timp ce 3 litere necesită o scală de minimum 55% și un contrast puternic.
Q:Ce rol practic au culorile theme_color și background_color din fișierul site.webmanifest pe telefoane?
Proprietatea theme_color colorează bara de adresă și bara de stare a sistemului Android atunci când utilizatorul navighează pe site, oferind senzația unei aplicații native. În schimb, background_color definește culoarea ecranului de pornire (Splash Screen) afișat instantaneu în prima secundă când utilizatorul deschide aplicația PWA de pe ecranul telefonului.
Q:Pot folosi doar o pictogramă SVG în loc să mai generez fișierele PNG și favicon.ico?
Încă nu. Deși Chrome și Firefox acceptă pictograme SVG în tab-uri, Safari pe iOS ignoră complet SVG-urile pentru scurtăturile de pe ecranul principal (necesitând obligatoriu apple-touch-icon.png la 180×180 px), iar ecranul de instalare Android PWA cere imagini PNG de 192×192 și 512×512 px. De aceea pachetul complet din 10 fișiere rămâne standardul sigur.
Q:Cum mă asigur că sigla mea nu dispare când utilizatorul trece telefonul sau laptopul pe tema întunecată?
Dacă încarci un logo negru sau bleumarin închis cu fundal transparent, acesta se va contopi cu bara de tab-uri întunecată din Chrome, Edge sau Safari. Detectorul nostru de vizibilitate măsoară automat luminanța pixelilor și îți permite să adaugi cu un singur clic o insignă solidă ori un gradient cu colțuri rotunjite (squircle 22%) vizibil pe orice temă.
Ce este Generator Favicon, Pictograme & Manifest PWA?
Orice dezvoltator web sau antreprenor digital a trecut măcar o dată prin frustrarea aceea: lansezi un site lucrat cu grijă, dar când îl cauți pe Google de pe telefon vezi doar un glob gri generic, iar când un client salvează pagina pe ecranul unui iPhone, sigla apare încadrată într-un pătrat negru inestetic. Motivul este simplu: ecosistemul web actual nu mai folosește o singură iconiță, ci un set coordonat de 10 fișiere cu reguli complet diferite pentru fiecare sistem de operare. Google Search refuză orice pictogramă care nu este multiplu de 48×48 pixeli, browserele cu temă întunecată înghit siglele închise la culoare cu fundal transparent, iar telefoanele Android decupează automat până la 20% din marginile unei aplicații PWA. Generatorul de Favicon, Pictograme & Manifest PWA rezolvă toate aceste detalii direct în browserul tău, construind la nivel de octeți atât containerul binar favicon.ico, cât și pictogramele pentru iOS, Android și site.webmanifest prin API-urile native <canvas>, ArrayBuffer și DataView.
Exemplu Practic: Pregătirea unui Magazin Online E-Commerce pentru Instalare Mobilă PWA și Indexare Google SERP
Să luăm exemplul concret al unui magazin online care a activat funcția de instalare ca aplicație (PWA) pentru clienții fideli. Inițial, echipa a încărcat doar o siglă violet-închis pe fundal transparent (având o luminanță relativă de numai 16,8%) și un fișier PNG redenumit manual în favicon.ico. Pe laptopurile setate pe modul întunecat, tab-ul magazinului părea gol, iar pe telefoanele Android literele din marginea siglei erau tăiate de masca rotundă a ecranului principal. Folosind studioul de mai sus, echipa a creat o monogramă clară din 2 litere pe un Gradient Liniar (#4F46E5 → #06B6D4), a setat o spațiere interioară de 21% (păstrând simbolul în cercul sigur de 409×409 px din pânza de 512×512 px) și a exportat un pachet ZIP complet de doar 19,2 KB, obținând scor maxim în Google Lighthouse.
Matricea Practică de Compatibilitate și Optimizare în Pachetul E-Commerce (19,2 KB Total)
| Fișier Generat | Dimensiune & Greutate | Structură Tehnică Internă | Problema Practică Rezolvată |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,4 KB) | Antet binar ICONDIR + 3 straturi PNG | Asigură indexarea în Google Search și elimină erorile 404 în server |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3,3 KB) | PNG RGBA pe 32 biți (multipli 1x/2x) | Claritate impecabilă în ecusonul rotund din căutările pe mobil |
| apple-touch-icon.png | 180×180 px (4,9 KB) | PNG opac 24 biți cu fundal pre-umplut | Previne apariția pătratului negru în jurul siglei pe iPhone și iPad |
| maskable-icon-512x512.png | 512×512 px (6,6 KB) | Cerc sigur 80% (409 px) + 21% spațiere | Protejează sigla la decuparea în cerc, squircle sau picătură pe Android |
Ce Aduce în Plus Acest Studio Binar Față de Uneltele Obișnuite
- Împachetare Binară Autentică (
ICONDIR): Nu redenumim un simplu fișier PNG, ci scriem direct în memorie antetul de 6 octeți și tabelul de directoare de 48 de octeți care leagă rezoluțiile 16×16, 32×32 și 48×48 într-un container.icoveritabil. - Verificare Automată pentru Teme Întunecate și Luminoase: Algoritmul măsoară luminanța fiecărui pixel vizibil și te avertizează pe loc dacă sigla ta riscă să devină invizibilă pe tab-urile închise sau deschise la culoare.
- Confidențialitate 100% și Viteză Instantanee: Toate imaginile și arhiva ZIP sunt generate local pe dispozitivul tău, fără nicio încărcare pe vreun server extern.
Istorie și Origine
Povestea umilului favicon a început în martie 1999, când un inginer din echipa Microsoft Internet Explorer 5 a introdus aproape pe nesimțite o funcție care căuta în rădăcina fiecărui site un fișier numit favicon.ico ori de câte ori un utilizator adăuga pagina la „Favorite” (de unde și numele de Favorites Icon). Curând, administratorii de servere au observat mii de erori 404 Not Found în jurnalele Apache și au început să creeze primele iconițe de 16×16 pixeli în 16 culori — folosind chiar numărul de descărcări ale fișierului drept statistică pentru câți vizitatori le-au salvat site-ul! În 2007, lansarea primului Apple iPhone a schimbat complet regulile jocului prin apariția fișierului apple-touch-icon.png, care transforma un simplu link web într-o pictogramă de rezoluție înaltă pe ecranul telefonului. Ulterior, odată cu standardizarea Manifestului Web W3C (site.webmanifest) și a pictogramelor adaptive pe Android, vechea iconiță de 16 pixeli a evoluat într-o adevărată carte de vizită digitală pe toate ecranele.