Cum se creează o favicon

Un favicon modern este mai mult decât o imagine de 16×16. Iată fluxul de lucru complet pentru o configurare care arată clar pe fiecare browser, sistem de operare și dispozitiv.

6 min de citit

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Ce este un favicon?

O favicon este pictograma minuscul pe care un browser o afișează în filă, bara de marcaje și lista istoricului. Pe mobil este pictograma de pe ecranul de pornire. Pe Windows este pictograma comenzii rapide.

Site-urile moderne oferă mai multe rezoluții și formate, astfel încât fiecare suprafață să aibă o randare clară.

Pregătiți-vă imaginea sursă

Începeți de la o imagine pătrată care are cel puțin 512×512 — în mod ideal, un SVG cu un viewBox pătrat. Orice lucru mai mic se va estompa atunci când este redus.

Evitați liniile subțiri și textul mic. Ele dispar la 16×16.

Generați un .ico cu mai multe dimensiuni

Pachetul 16, 32, 48, 64, 128 și 256 într-un singur favicon.ico. Browserele aleg automat dimensiunea potrivită.

Generatorul nostru de favicon efectuează acest lucru din partea clientului în mai puțin de o secundă.

Adăugați etichetele HTML

Introduceți favicon.ico în rădăcina site-ului dvs. Apoi adăugați pictogramele SVG, apple-touch-icon și manifest în <head> pentru o configurare completă.

Verificați în fiecare browser

Actualizează complet în Chrome, Safari, Firefox și Edge. Verificați bara de marcaje, fila și instalarea pe ecranul de pornire.

Întrebări frecvente

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.

What size should my favicon source image be?

Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.

Do I need both favicon.ico and PNG files?

Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.

Where do I put favicon files on my website?

Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.

Ghiduri aferente

Încearcă instrumentele

Continuă lectura