Mitä pitää tehdä että tämä tehtävä voidaan sulkea:
Muuta kommentoitavaa
Tämä selkeä ja otetaan työlistalle.
Ensimmäinen yritys määritellä nykyaikaiset faviconit. Tämähän on monimutkaistunut viime vuosina paljon, eikä vanhanaikainen 16x16 .ico tiedosto riitä enää mihinkään. Microsoft, Apple ja Google ovat tuoneet kaikki omia “standardejaan” asiaan, sekä uusia käyttötarkoituksia (ikonit työpöydälle, live tilet jne).
Tulilla on nyt ensimmäinen yritys määritellä ne - tämä vaatii paljon testausta eri laitteilla ja eri käyttötilanteissa.
<link rel="apple-touch-icon" sizes="57x57" href="/uploads/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/uploads/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/uploads/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/uploads/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/uploads/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/uploads/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/uploads/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/uploads/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/uploads/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/uploads/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/uploads/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/uploads/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/uploads/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/uploads/favicon/manifest.json">
<link rel="mask-icon" href="/uploads/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/uploads/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/uploads/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/uploads/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">Parempi! iPadillä tuo kotiruudulle laitettava kuvake tosin näyttää vähän hassulta läpinäkyvän taustan kanssa, näyttää tekevän siitä mustan. Kuvat havainnollistaa. Kirjanmerkeissä näyttää hyvältä sekä PC:llä että iPadillä.
Kirjanmerkeissä
Kotiruudulla
Jes, huomasin saman. Pitää jossain välissä tehdä vielä uusi ajo ja määritellä taustaväri.
Windows 8/10 käyttäjät - kokeilkaas joku Tiilitystä.
Kokeilin Windows 8 -käyttiksen puhelimella. Ei osu keskelle pystysuunnassa logo, minkä seurauksena näyttää vähän hassulta.
Näihin ikoneihin vois ehkä harkita tota .co sisältävää logookin minkä Kilo on tehnyt, poislukien varmaan työpöytäselaimen favicon? Kävis selkeemmin ilmi mikä on kyseessä. Pikkunyanssi tosin.
Joo, kyllä - pitää muutenkin generoida vielä uudestaan noi, pikku muutoksin.
Faviconit uudelleen generoitu ja nyt iOSille pitäisi olla määriteltynä taustaväri. “.co” jäi vielä sovittelematta.
Työpöytäselaimella tuo favicon on muuten jostain syystä aika suttuinen. Kuvassa ylin on tämä palsta, alin on .infon puoli.
Vai onkohan se vaan niin pieni että menee sumuiseksi…
Työkoneen Windows 7/Explorer 11-yhdistelmällä näyttää välilehdessä kirjanmerkki-ikonin vain etusivua selatessa. Esim. tässä ketjussa näyttää vain sinisen neliön.
Muilla selaimilla en osaa nyt sanoa miten näyttää?
@Ozzi : Näyttäisi käyttävän pientä favicon.ico:a, vaikka isompiakin on tarjolla.
Windows 10 mobile toimii, tulee logo ja oranssi tausta. Sen sijaan iPad Air (iOS 8.1) pukkaa edellen työpöytäkuvaketta mustalla taustalla.
Näihin muuten vielä sellainen kommentti, että iOS pakottaa nuo kuvakkeet pyöreäkulmaisiksi neliöiksi yhtenäisen ulkoasun takia ja siksi kuvakkeeseen tulee musta ympärys.
Mulla on sama juttu.
Nuo kirjanmerkkivalikon kuvakkeet toimii nyt iPadilla hyvin ja on hienot, näyttää tältä:
Jostain ihmeen syystä kuitenkin jos tuon laittaa kotiruudulle, tulee siihen musta reunus kuten ennenkin. Ilmeisesti se käyttää icon kuvia apple-touch-iconien sijaan jostain syystä? Mun mielestä noi oranssitaustaset vois laittaa noihin icon-määrittelyihinkin, näyttää kivalta. Tuo Tappara-logo on oudon muotonen muiden neliöiden joukossa läpinäkyvällä taustalla.
Käytin jotain generaattoria faviconeihin ja oranssi taustaväri pitäisi olla paikallaan:
<link rel="apple-touch-icon" sizes="57x57" href="http://tappara.co/uploads/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://tappara.co/uploads/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://tappara.co/uploads/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://tappara.co/uploads/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://tappara.co/uploads/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://tappara.co/uploads/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://tappara.co/uploads/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://tappara.co/uploads/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://tappara.co/uploads/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://tappara.co/uploads/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="http://tappara.co/uploads/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="http://tappara.co/uploads/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="http://tappara.co/uploads/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://tappara.co/uploads/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="http://tappara.co/uploads/favicon/manifest.json">
<link rel="mask-icon" href="http://tappara.co/uploads/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="http://tappara.co/uploads/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#ff6600">
<meta name="msapplication-TileImage" content="http://tappara.co/uploads/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="http://tappara.co/uploads/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">Mutta tänään kun ihmettelin noita serverilogeja, niin juurikin eri favicon tiedostoista oli NGINX logien mukaan generoitunut 404 virheitä. En äkkiseltään ymmärrä miksi, mutta muutin pari tuntia sitten noi polut relatiivisista (/uploads…/) absoluuttisiksi (http://tappara.co/…). En ole ehtinyt tutkimaan onko jotain vaikutusta tällä.
Androidilla ainaki vielä läpinäkyvä tausta ja iPadillä se musta.
Yleensä tuollaset tulee tiedostojen vääristä lukuoikeuksista. Tsekkaappa ne?
Android kuvake lienee tarkoituksella läpinäkyvä, kuten on natiivi-ikoneissakin (Esim. Google appsit, käyttöjärjestelmän omat).
Oikeudet pitäisi olla kunnossa, koska ikonit aukeavat selaimessa oikein. Ja kun tuosta kopioi URLin ja avaa selaimessa, niin kyllä Applen ikoneissa on oranssi tausta.
Mystistä.
Nyt on iPadin työpöydälläkin oranssi tausta. Korjaantui itsestään, en tehnyt uutta kuvaketta.