Apple-touch-icon-generaattori

Luo 180×180-kokoinen apple-touch-icon, jota iOS käyttää aloitusnäytön kirjanmerkeissä — sekä täysi favicon-sarja — paikallisesti 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.

Kuvake, jonka iOS asettaa aloitusnäytölle

Kun joku lisää sivustosi iPhonen tai iPadin aloitusnäytölle, iOS etsii 180×180-kokoista apple-touch-iconia; ilman sitä se turvautuu sumeaan kuvakaappaukseen. Tämä generaattori piirtää juuri tuon koon kuvastasi — yhtenäisellä taustalla, koska apple-touch-iconien ei tulisi olla läpinäkyviä — ja sisällyttää sen lataukseen favicon.ico-tiedoston ja Android-kuvakkeiden rinnalle.

Yksi vienti, jokainen alusta

Sen sijaan että rajaisit käsin erillisen tiedoston jokaiselle laitteelle, luo koko sarja kerralla: apple-touch-icon iOS:lle, 192- ja 512-pikseliset PNG-kuvat Androidille ja PWA-sovelluksille sekä favicon.ico työpöytäselaimille, ja HTML-koodinpätkä niihin viittaamiseen. Kaikki toimii selaimessasi, joten brändimateriaalisi ei koskaan poistu laitteeltasi.

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.