Generator de favicon

Ce primești

favicon.ico cu trei mărimi în același fișier, 16, 32 și 48 de pixeli, fiecare ca imagine PNG. apple-touch-icon.png (180×180), icon-192.png și icon-512.png pentru manifest, iar din text și favicon.svg, care e desenat de browser la orice mărime. Toate (.zip) le pune pe toate într-o arhivă, împreună cu site.webmanifest.

Pune fișierele în rădăcina site-ului și codul din În <head> în pagină. Fiecare mărime e desenată separat din text sau din imaginea ta, nu micșorată dintr-una mare, ca literele să rămână clare la 16 pixeli.

De ce aceste mărimi

Standardul HTML spune că browserul alege dintre iconițele din <link rel="icon"> pe cea mai potrivită după tip și mărime (sizes), iar dacă un format nu-l poate citi, trece la următoarea; fără niciun link, poate cere singur /favicon.ico. De aceea codul dă .ico-ul cu mărimile lui (sizes="16x16 32x32 48x48") și, din text, SVG-ul cu tipul lui (image/svg+xml).

apple-touch-icon e iconița folosită de iOS când cineva pune site-ul pe ecranul principal; documentația Apple dă ca exemplu 180×180 pentru iPhone. Pentru manifestul unei aplicații web, web.dev scrie că Chromium cere cel puțin o iconiță de 192×192 și una de 512×512.

Imaginea rămâne la tine

Iconițele sunt desenate în browserul tău, pe un canvas; imaginea aleasă nu e trimisă nicăieri. Textul folosește fonturile sistemului tău, deci un emoji arată ca emoji-urile dispozitivului pe care faci iconița; SVG-ul, în schimb, e desenat cu fonturile celui care vizitează site-ul.