SVG faviconiksi

Muuta SVG-logo täydeksi favicon-sarjaksi — favicon.ico, apple-touch-icon ja verkkosovelluskuvakkeet — terävästi rasteroituna selaimessasi. Mitään ei ladata palvelimelle.

Yksityisyys edellä: jokainen kuva käsitellään paikallisesti selaimessasi. Mitään ei ladata palvelimelle, tallenneta tai lähetetä minnekään.

Vektori sisään, jokainen rasterikoko ulos

SVG on ihanteellinen favicon-lähde: se on tarkkuudesta riippumaton, joten jokainen kuvakekoko voidaan rasteroida alkuperäisestä geometriasta sen sijaan, että se näytteistettäisiin uudelleen jo valmiiksi pienestä bittikartasta. Pudota SVG mukaan, ja jokainen tuloste — 16, 32, 48, 180, 192 ja 512 pikseliä — piirretään vektorista sen omassa koossa, mikä pitää reunat terävinä sumeiden sijaan. Siinä on ero kuvakkeen välillä, joka näyttää välilehdessä harkitulta, ja sellaisen, joka näyttää tahralta.

Miksi .ico on yhä tarpeen

Modernit selaimet käyttävät mielellään SVG-faviconia suoraan, mutta vanhemmat selaimet ja lukuisat työkalut — syötteenlukijat, keskustelusovellusten linkkiesikatselut, työpöydän pikakuvakkeet — etsivät yhä favicon.ico-tiedostoa. Kun luot molemmat samasta SVG:stä, kaikki on katettu. Lisää täytettä, valitse neliömäinen, pyöristetty tai ympyränmuotoinen maski ja tausta, ja lataa sitten koko sarja valmiiksi liitettävän HTML-koodinpätkän kera.

Usein kysytyt kysymykset

Ladataanko kuvani palvelimelle faviconin tekemiseksi?
Ei. favicon.ico, PNG-kuvakkeet ja manifesti luodaan kaikki paikallisesti selaimessasi Canvas API:n avulla. Kuvasi ei koskaan poistu laitteeltasi.
Mitä kokoja ja tiedostoja saan?
Monitarkkuuksisen favicon.ico-tiedoston (16, 32 ja 48 px), PNG-kuvakkeet kokoina 16, 32, 48, 180 (apple-touch-icon), 192 ja 512 px, site.webmanifest-tiedoston sekä HTML-pätkän liitettäväksi <head>-osioon.
Voinko muuntaa PNG:n tai SVG:n ICO-muotoon?
Kyllä. Pudota mukaan PNG, JPG, SVG tai WebP ja lataa aito favicon.ico. SVG-logot rasteroidaan ensin paikallisesti suurella tarkkuudella.
Millainen kuva toimii parhaiten?
Neliömäinen kuva, jossa on yksinkertainen ja korkeakontrastinen logo. Muun kuin neliön muotoiset kuvat rajataan keskeltä sopiviksi; käytä täyte- ja muotosäätimiä sommitellaksesi sen haluamallasi tavalla.
Miten asennan faviconin?
Pura paketti sivustosi juurikansioon ja liitä mukana tuleva HTML-pätkä sivujesi <head>-osioon. Useimmat selaimet löytävät favicon.ico-tiedoston automaattisesti.