Kirjanmerkki-ikonit (favicon)

Siirsin noi muutamat ei-PNG tyyppiset tiedostot jaeltavaksi Amazon S3:sta (.ico, .json, .xml) ja nyt pitäisi olla faviconit tip top.

Ketju auki, koska tämä on mennyt jossain kohtaa rikki. Ihmetellään kun ehditään.

Tällainen on päässyt unohtumaan. Nyt tarvitaan vähän yhteisön vetoapua.

Voitteko testata Discourse Meta foorumilla toimiiko favicon-ikoni oikein kirjanmerkissä ja aloitusnäyttöön kiinnitettynä. Mainitkaa laitteen käyttöjärjestelmä ja ainakin iso versionumero (Android 6.0, iOS 10, jne)

Jos Meta toimii tyydyttävästi, niin kopioin heidän ratkaisunsa tänne.

iOS 10.2 Aloitusnäytössä näkyy Discoursen logo mutta kirjanmerkeissä näkyy avoimen kirjan kuva. Selailu toimii ongelmitta kuvakkeen klikkauksen jälkeen.

Ymmärsinkö tehtävän annon oikein?

1 tykkäys

Android 6.0 näkyy aloitusnäyttöön kiinnitettynä Discourse-logo ja kirjanmerkitsä pelkkä tavallinen D-kirjain.

1 tykkäys

Android Nougat (7): Discoursen logo työpöydällä ja kirjanmerkeissä vihreällä taustalla valkoinen D.

1 tykkäys

Ymmärsit. Jännä että minulla näkyy iOS laitteella erilailla.

Metassa näkyy logo sekä työpöydällä että Safarin kirjanmerkeissä. Meidän palstalla tulee iso T kirjanmerkkeihin ja thumbnail sivusta työpöydälle.

2 tykkäystä

Yritän tähän koostaa Metan testitulokset. Laitan tämän wikiksi, eli voi editoida.

Andoid 4.x, Chrome: Aloitusnäytöllä logo, kirjanmerkeissä D-kirjain
Android 6.x, Chrome: Aloitusnäytöllä logo, kirjanmerkeissä D-kirjain
Android 7.x, Chrome: Aloitusnäytöllä logo, kirjanmerkeissä D-kirjain

iOS 10.x, Safari: Aloitusnäytöllä logo, kirjanmerkeissä logo
iOS 10.x, Chrome: kirjanmerkeissä D-kirjain

Win10 Mobile: Aloitusnäytöllä suttuinen logo, kirjanmerkeissa logo OK
Windows 10: ?

Tämä D kirjain näyttäisi nyt selkeästi olevan Chromen ominaisuus, koska toiminta on yhtenevää kaikilla eri alustoilla.

Discourse Meta käyttää yhtä ja samaa .png kuvaa kaikissa favicon määrityksissä, joka on myös sama kuin foorumilla näkyvä logon neliö/pieni versio. Aikanaan tätä rakentaessa käytin jotain hienoa favicon generaattoria, joka tuotti erikokoisia tiedostoja ja pitkän koodipätkän niiden käyttöön sivuilla.

Nyt siirrytään Metan käyttämään malliin. Tosin meidän logo on SVG, joten pitää tehdä PNG versio.

####Ja sitten testaamaan Tappara.co faviconia!

Tämä postaus on myös wiki. Tavoitteena on siis Tapparan logon näkyminen selaimen välilehdessä, kirjanmerkeissä ja työpöytäkuvakkeissa. Tee selaimen refresh ennen testausta.

Käyttöjärjestelmä, selain: Testin tulos

Android 4.x, Chrome: Välilehti OK, kirjanmerkki OK, Työpöytäkuvake on hieman sumea
Android 5.x
Android 6.x
Android 7x
iOS 10.x, Safari: Kirjanmerkki OK, aloitusnäyttö OK
iOS 10.x, Chrome: Kirjanmerkki OK
Win10M: Kirjanmerkki OK, aloitusnäyttö EI - värit sekaisin.


Linux, Chrome v55: Välilehti OK, kirjanmerkki OK
Windows 7:
Windows 10, Firefox 50.1.0: Välilehti ja kirjanmerkki ok, uusien viestien ilmestyessä näyttää ko. ketjujen määrän logon päällä mitä ei tehnyt ennen / Sekera

MacOS:

Mikä Android versio? 6.0?

1 tykkäys

Lisäsin wiki-wiestiin kommentin W10, Firefox 50.1.0-yhdistelmästä.

1 tykkäys

Toimii Android 7.1.1 (Nougat) asti (Sony Xperia X).

Itseasiassa iOS:llä tuota työpöydän kuvaketta vois vähän hienosäätää. Joskus tuossa oli oranssi tausta ja on kyllä paremman näköinen niin.

Johtuu siitä, että siihen generoitiin ihan oma kuvatiedostonsa jossa oranssi oli ja se otettiin koodikustomoinnissa käyttöön. Nyt mennään vain Discourseen sisäänrakennetuilla mahdollisuuksilla.

Edit: Nyt käytetyssä kuvassa on läpinäkyvä taustaväri, jonka iOS virheellisesti laittaa mustaksi. Minulla on epäilys, että muutkin sovellukset tai käyttöjärjestelmät saattavat hyödyntää tuota Applelle määriteltyä kuvaketta ja joissain tapauksissa läpinäkyvä voi olla parempi?

Helpohko se kyllä on värittää, jos haluaa.