Fără încărcare, 100% local, fără cont

Generator de favicon

Încărcați logoul sau pictograma dumneavoastră și descărcați toate dimensiunile standard de favicon ca PNG. Include Apple Touch Icon și pictograme PWA. Nimic nu părăsește dispozitivul dumneavoastră.

Cum funcționează Generator de favicon

Favicon Generator preia orice imagine furnizată și o redimensionează la dimensiunile standard de favicon folosind API-ul Canvas drawImage: 16x16, 32x32, 48x48, 180x180 (pictograma Apple touch), 192x192 (Android Chrome) și 512x512 (manifest PWA). Toate cele șase dimensiuni sunt generate în browser, împreună cu un favicon.ico multi-dimensiune care reunește imaginile de 16x16, 32x32 și 48x48 într-un singur fișier destinat browserelor mai vechi. Imaginea sursă nu părăsește niciodată dispozitivul dumneavoastră.

Un set complet de favicon acoperă întreaga gamă de pictograme de tab browser, marcaje, scurtături de ecran principal și ecrane splash PWA. Utilizarea unei imagini sursă de înaltă rezoluție (cel puțin 512x512 pixeli) oferă algoritmului de micșorare cele mai multe detalii cu care să lucreze. Tag-urile HTML link de care aveți nevoie pentru a referenția fiecare fișier generat sunt afișate într-un fragment pe care îl puteți copia direct în elementul head al paginii dumneavoastră.

Scris de Bastien Sulyan

Cum se folosește Generator de favicon, pas cu pas

  1. Trasați imaginea sursă în zona de încărcare. Folosiți o imagine pătrată de 512 px sau mai mare pentru rezultate optime.
  2. Previzualizați cele șase dimensiuni generate în panoul de rezultate.
  3. Descărcați cele șase fișiere PNG și favicon.ico din panoul de rezultate.
  4. Copiați fragmentul HTML care arată tag-urile link pentru toate dimensiunile.
  5. Plasați fișierele PNG la rădăcina site-ului dumneavoastră și lipiți tag-urile link în head-ul paginii dumneavoastră.

Cazuri de utilizare frecvente

  • Un dezvoltator configurează un site nou și are nevoie de toate dimensiunile de favicon generate din logo-ul brandului fără un abonament la un instrument de design.
  • Un autor PWA generează pictogramele 192x192 și 512x512 necesare în manifestul aplicației web pentru instalarea pe ecranul principal.
  • Un blogger își reimprospateza identitatea site-ului și înlocuiește favicon-ul implicit cu o pictograma personalizată construita din logo-ul sau.
  • Un freelancer produce rapid setul complet de favicon pentru un proiect client fără a astepta să instaleze software de design offline.

Întrebări frecvente

Ce formate de imagine pot folosi ca sursă?

Orice format pe care browserul îl poate decoda funcționează ca intrare: JPEG, PNG, WebP, GIF și SVG. Pentru sursele SVG, browserul rasterizează vectorul pe un Canvas înainte de redimensionare, deci PNG-urile de ieșire sunt imagini raster indiferent.

De ce favicon-ul meu este neclar în tabul browserului?

Dimensiunile 16x16 și 32x32 sunt foarte mici. Dacă imaginea sursă conține detalii fine sau linii subtiri, acestea nu vor supravietui micsorarii. Un design simplu, ingrosat, cu forme clare funcționează mult mai bine la dimensiuni mici decât o ilustrație complexa.

Generează unealta fișiere ICO?

Da. Pe lângă cele șase fișiere PNG, unealta asamblează un favicon.ico ce conține imaginile de 16x16, 32x32 și 48x48 într-un singur fișier, format căutat încă de browserele Windows mai vechi și de unii crawlere la rădăcina site-ului. Browserele moderne se mulțumesc cu legăturile PNG, așa că publicarea ambelor variante nu costă nimic și lasă fiecare client să aleagă.

Este imaginea sursă procesată pe un server?

Nu. Apelurile Canvas drawImage care produc fiecare dimensiune rulează în tabul browserului dumneavoastră. Imaginea sursă este citită de pe discul local, iar cele șase ieșiri PNG sunt create în memorie și oferite ca descărcări. Nicio dată de fișier nu trece printr-un server.

Ce dimensiune ar trebui să folosesc pentru pictograma Apple touch?

iOS și iPadOS folosesc PNG-ul de 180x180 pixeli referențiat prin tag-ul link apple-touch-icon. Această dimensiune este folosită când un utilizator adaugă site-ul dumneavoastră pe ecranul principal al unui dispozitiv Apple. Unealta generează acest fișier alături de celelalte dimensiuni.

Pot folosi o imagine dreptunghiulară ca sursă?

Da, dar ieșirea va fi incadrata în letterbox sau pillar-box pentru a se potrivi pe canvas-ul pătrat. Pentru rezultate optime, începe cu o imagine pătrată sau decupează imaginea sursă la forma pătrată înainte de a folosi unealta.

Instrumente conexe

Păstrează totul local, explorează instrumente complementare.

Toate instrumentele de imagine