Muunna PNG ICO:ksi terävää suosikkikuvaketta varten
Suosikkikuvake on pieni kuva, joka antaa verkkosivustolle visuaalisen tunnisteensa. Näet sen selaimen välilehdessä sivun otsikon vieressä, kirjanmerkkiluettelossasi, selaushistoriasi osoiterivin pudotusvalikossa ja joskus hakutulosten vieressä. Se on pieni, mutta tekee paljon työtä: tunnistettava suosikkikuvake auttaa käyttäjiä löytämään välilehtesi tusinan muun joukosta ja viestii, että sivusto on valmis ja siitä pidetään huolta. Klassinen muoto tälle pienelle kuvakkeelle on ICO, ja helpoin tapa tehdä sellainen on aloittaa siististä neliömäisestä PNG:stä ja muuntaa se.
Tämä työkalu ottaa PNG-kuvan ja muuttaa sen ICO-suosikkikuvakkeeksi suoraan selaimessasi. Muunnos tapahtuu paikallisesti omalla laitteellasi, joten valitsemaasi kuvaa ei koskaan ladata palvelimelle. Sillä on väliä, kun kuvakkeesi on logo tai brändiresurssi, jota mieluummin et antaisi kolmannelle osapuolelle. Kun tiedosto on valmis, lataat sen vain.
Mikä ICO-muoto on ja miksi se pitää sisällään useita kokoja
ICO on kuvakesäiliömuoto, joka sai alkunsa Microsoft Windowsista, jossa se tallentaa ohjelmien, pikakuvakkeiden ja kansioiden kuvakkeet. Sen määrittävä ominaisuus, ja syy miksi siitä tuli verkon suosikkikuvakkeiden standardi, on se, että yksi ICO-tiedosto voi sisältää saman kuvan useassa resoluutiossa samanaikaisesti. Yhden kiinteän bittikartan sijaan tiedosto pakkaa pienen joukon neliömäisiä kuvia ja antaa selaimen tai käyttöjärjestelmän valita, minkä kokoinen sopii paikkaan, johon se tarvitsee piirtää kuvakkeen.
Se on aidosti hyödyllistä. Selaimen välilehti tarvitsee pienen kuvakkeen, kirjanmerkkipalkki saattaa käyttää hieman suurempaa, ja työpöydälle kiinnitetty pikakuvake voi pyytää vielä suurempaa. Monikokoisen ICO:n kanssa jokainen konteksti nappaa itselleen sopivan version, joten kuvakkeesi pysyy terävänä sen sijaan, että se skaalattaisiin ylös yhdestä pienestä bittikartasta ja muuttuisi sumeaksi. ICO myös säilyttää läpinäkyvyyden, mikä pitää pyöreän tai epäsäännöllisen logon kulmat siisteinä mitä tahansa välilehtiväriä vasten.
Suositellut suosikkikuvakekoot
Verkkosivuston suosikkikuvakkeelle kolme kokoa, jotka kannattaa sisällyttää, ovat 16x16, 32x32 ja 48x48 pikseliä. 16-pikselinen versio on se, jonka useimmat selaimet näyttävät välilehdessä ja osoiterivillä. 32-pikselistä versiota käytetään korkeamman resoluution näytöillä ja joissakin kirjanmerkki- ja historianäkymissä, joten se pitää asiat terävinä moderneilla näytöillä. 48-pikselinen versio kattaa suuremmat kontekstit, kuten Windowsin sivustopikakuvakkeet. Koska ne kaikki asuvat yhdessä ICO-tiedostossa, toimitat yhden resurssin ja annat jokaisen pinnan valita tarvitsemansa.
Aloita neliömäisestä PNG:stä, jotta mikään ei veny. Jos lähdekuvasi on suorakulmainen tai ylisuuri, rajaa tai skaalaa se ensin siistiksi neliöksi kuvan koon muuttajallamme, ja aja sitten muunnos. Yksinkertainen, kontrastikas suunnittelu näkyy huomattavasti paremmin 16 pikselissä kuin yksityiskohtainen kuvitus, joten suosi rohkeita muotoja hienon tekstin sijaan.
Miten lisätä suosikkikuvake sivustollesi
Kun sinulla on ICO-tiedosto, lataa se verkkosivustollesi, perinteisesti sivuston juureen nimellä favicon.ico. Monet selaimet löytävät sen sieltä automaattisesti, mutta parhaana käytäntönä on ilmoittaa se erikseen HTML:si head-osiossa, jotta arvailua ei tarvita. Lisää tällainen linkkitagi:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Sijoita tuo rivi sivujesi <head>-osioon. rel="icon"-attribuutti kertoo selaimelle, että tämä resurssi on sivun kuvake, ja href osoittaa sinne, minne tallensit tiedoston. Jos käytät yllä olevan kaltaista juuresta suhteellista polkua, sama ilmoitus toimii jokaisella sivustosi sivulla. Käyttöönoton jälkeen saatat joutua tekemään kovan päivityksen tai tyhjentämään välimuistin ennen kuin uusi kuvake näkyy, koska selaimet pitävät suosikkikuvakkeista kiinni sitkeästi.
Yksityinen muunnos selaimessasi
Kaikki tapahtuu laitteellasi. Valitsemasi PNG luetaan, puretaan ja koodataan uudelleen ICO:ksi paikallisesti, eikä mikään poistu koneeltasi prosessin aikana. Ei tiliä, ei jonoa, ei palvelinpuolen tallennusta, mikä tekee tästä kätevän jopa julkaisemattomille logoille tai sopimuksen alaiselle asiakastyölle. Löytääksesi lisää tapoja valmistella ja siistiä grafiikkaa, selaa koko kuvatyökaluvalikoimaamme.
Usein kysytyt kysymykset
Ladataanko kuvani jonnekin?
Ei. PNG muunnetaan ICO:ksi kokonaan selaimessasi omalla laitteellasi. Mitään ei lähetetä palvelimelle eikä mitään tallenneta, joten kuvasi pysyy yksityisenä.
Mitä kokoja suosikkikuvakkeeni tulisi sisältää?
Hyödyllisimmät koot ovat 16x16, 32x32 ja 48x48 pikseliä. 16-pikselinen kuva näkyy selaimen välilehdissä, kun taas suuremmat pitävät kuvakkeen terävänä korkean resoluution näytöillä ja työpöydän pikakuvakkeissa.
Miksi käyttää ICO:a pelkän PNG:n sijaan?
ICO on pitkäaikainen suosikkikuvakemuoto, ja se voi tallentaa useita kokoja yhteen tiedostoon. Selaimet ja käyttöjärjestelmä valitsevat resoluution, joka sopii kuhunkin kontekstiin, joten kuvake pysyy terävänä sen sijaan, että sitä skaalattaisiin yhdestä bittikartasta.
Säilyttääkö ICO läpinäkyvyyden PNG:stäni?
Kyllä. ICO-muoto tukee läpinäkyvyyttä, joten PNG:si läpinäkyvät alueet säilyvät, ja kuvake sulautuu siististi mihin tahansa välilehti- tai taustaväriin.
Miten lisään suosikkikuvakkeen verkkosivustolleni?
Lataa ICO-tiedosto sivustollesi, yleensä nimellä favicon.ico juureen, ja lisää linkkitagi HTML:si head-osioon, kuten link rel icon type image x-icon href kauttaviiva favicon.ico. Tyhjennä sitten selaimesi välimuisti nähdäksesi sen.
Lähdekuvani ei ole neliömäinen. Mitä minun pitäisi tehdä?
Rajaa tai skaalaa se ensin neliöksi, jotta se ei veny. Voit käyttää kuvan koon muuttajaamme siistin neliön tekemiseen, ja sitten muuntaa sen ICO:ksi parhaan näköistä suosikkikuvaketta varten.