{"id":47999,"date":"2025-06-15T16:32:15","date_gmt":"2025-06-15T14:32:15","guid":{"rendered":"https:\/\/www.lemonskin.net\/io\/?p=47999"},"modified":"2026-04-07T16:07:59","modified_gmt":"2026-04-07T14:07:59","slug":"la-nuova-favicon","status":"publish","type":"post","link":"https:\/\/www.lemonskin.net\/io\/47999\/","title":{"rendered":"La nuova favicon"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Oggi ho apportato un piccolissimo cambiamento al sito: ho aggiornato la favicon<\/em>, ovvero l’iconcina che vedi nei tab del browser (e nei preferiti, se hai salvato l’indirizzo).1<\/a><\/sup>Se continui a vedere la precedente molto probabilmente dovrai vuotare la cache<\/em>.<\/span><\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se stai visitando il sito da un computer desktop senza uno schermo ad altissima risoluzione \u00e8 molto probabile tu possa vederla un po’ pi\u00f9 brutta e sgranata perch\u00e9, nonostante siamo nel nostro massimo splendore tecnologico, le favicon<\/em> vengono ancora visualizzate dalla maggior parte dei browser alla stessa risoluzione che si usava agli albori di Internet, ovvero 16 x 16 pixel:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Poi in realt\u00e0 la situazione \u00e8 \u2013 ovviamente \u2013 pi\u00f9 complessa: puoi disegnare e inserire nel codice delle pagine differenti dimensioni per l’icona e ogni browser sceglie quella che preferisce. Nel mio caso sull’iPad, la cui risoluzione del display \u00e8 decisamente superiore a 1080p, posso avere la soddisfazione di vederla a 32×322<\/a><\/sup>Ma, nonostante io abbia inserito l’apposita dimensione di 32×32, Chrome preferisce prendere quella da 64×64 e ridimensionarsela; come ho detto ognuno fa quello che gli pare, in totale anarchia… :)<\/span>; sul Mac, col suo sfigato monitor da povery<\/em> in Full HD, no.<\/p>\n\n\n\n

Il logo originale da cui sono partito \u00e8 questo (qui c’\u00e8 un articolo dedicato<\/a>):<\/p>\n\n\n\n

\"Logo<\/figure>\n\n\n\n

Ho deciso di cambiare colore, scegliendo un lime<\/em> vibrante e quasi fosforescente, anche perch\u00e9 quello giallo lo utilizzo altrove. Come bonus qui ci sono tutti i test (a 16×16 pixel) che ho effettuato per arrivare a qualcosa che lo ricordasse almeno lontanamente:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

L’ideale sarebbe stato creare un’immagine di tipo ICO<\/em> perch\u00e9 questo formato consente di inserire tutte le diverse dimensioni in un unico file ma \u2013 indovina un po’ \u2013 c’\u00e8 sempre un browser scemo che non \u00e8 capace di interpretarlo correttamente (in questo caso Safari: ha sempre avuto grossi problemi con la trasparenza delle immagini ICO e aggiungeva degli angoli neri intorno al cerchio). Cos\u00ec alla fine ho realizzato svariate PNG<\/em> e adesso ogni navigatore si prende quella che vuole.<\/p>\n\n\n\n

Poi ho dovuto naturalmente litigare anche con WordPress, perch\u00e9 gestisce le favicon<\/em> a modo suo (e non permette di usare dimensioni multiple: vuole un’immagine grande e poi la ridimensiona, male, lui), per cui \u00e8 stato necessario mettere mano anche al PHP. Adesso comunque dovrebbe funzionare tutto.<\/p>\n\n\n\n

Il risultato \u00e8 migliore del precedente pallino grigio? S\u00ec, no, boh… Di sicuro \u00e8 pi\u00f9 coerente, visto che il sito si chiama Lemonskin<\/em> (letteralmente “scorza di limone”) e non Puntinogrigio<\/em>.<\/p>\n\n\n\n

Non era un cambiamento necessario o importante, ma alla lunga quella sorta di piccolo bersaglio per freccette monocromatico, che resisteva sin dalla nascita del sito, mi aveva stancato. :)<\/p>\n\n\n\n

One more thing…<\/h2>\n\n\n\n
\"\"
Versione precedente a sinistra, nuova a destra<\/figcaption><\/figure>\n\n\n\n

Ne ho anche approfittato per aggiungere il loghetto del sito al menu laterale e, gi\u00e0 che c’ero, l’ho reso (insieme al campo di ricerca) un pochino pi\u00f9 dinamico: adesso ci segue mentre leggiamo la pagina, ed \u00e8 indipendente dalla trasparenza degli elementi sottostanti.3<\/a><\/sup>\u00c8 un sistema per agevolare la lettura e ridurre le distrazioni: quando il cursore del mouse non si trova sulla barra laterale, questa diventa meno visibile (ma soltanto sui computer desktop).<\/span><\/p>\n\n\n\n

Cambia anche la velocit\u00e0 di rotazione a seconda di dove ci troviamo (pagina principale o all’interno di un articolo4<\/a><\/sup>Nel secondo caso possiamo cliccarlo e tornare alla home.<\/span>).<\/p>\n\n\n\n

Piccoli effetti ottici<\/summary>\n

Se osservi per qualche secondo la rotazione del loghetto in home page<\/a> e poi ci passi il mouse sopra, noterai che pian piano rallenter\u00e0 fino a fermarsi, diventando grigio. Cliccandoci sopra non succede niente, perch\u00e9 ti trovi gi\u00e0 nella pagina iniziale, e quindi ho inserito questo piccolo effetto per sottolinearlo.<\/p>\n\n\n\n

Tuttavia, nel momento stesso in cui si ferma, sembra cominciare a ruotare pianissimo nella direzione opposta. Non lo fa naturalmente, \u00e8 immobile; ma il nostro cervello si fa fregare. :)<\/p>\n<\/details>\n\n\n\n

Poi come al solito mi sono fatto un po’ prendere la mano e ho cambiato tutto il tema del sito.<\/p>\n\n\n\n

Cos\u00ec, perch\u00e9 mi andava… :)<\/p>\n","protected":false},"excerpt":{"rendered":"

Oggi ho apportato un piccolissimo cambiamento al sito: ho aggiornato la favicon, ovvero l’iconcina che vedi nei tab del browser (e nei preferiti, se hai salvato l’indirizzo).<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[47,111313,111239,111362],"class_list":["post-47999","post","type-post","status-publish","format-standard","hentry","category-sito-web","tag-aggiornamenti","tag-aside","tag-look-del-sito","tag-lrx"],"acf":[],"author_meta":{"display_name":"lock","author_link":"https:\/\/www.lemonskin.net\/io\/author\/lock\/"},"featured_img":null,"jetpack_featured_media_url":"","coauthors":[],"tax_additional":{"categories":{"linked":["sito web<\/a>"],"unlinked":["sito web<\/span>"]},"tags":{"linked":["aggiornamenti<\/a>","digressioni<\/a>","look del sito<\/a>","lrx<\/a>"],"unlinked":["aggiornamenti<\/span>","digressioni<\/span>","look del sito<\/span>","lrx<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Pubblicato 11 mesi fa","modified":"Aggiornato 4 settimane fa"},"absolute_dates":{"created":"Pubblicato il 15 Giugno 2025","modified":"Aggiornato il 7 Aprile 2026"},"absolute_dates_time":{"created":"Pubblicato il 15 Giugno 2025 16:32","modified":"Aggiornato il 7 Aprile 2026 16:07"},"featured_img_caption":"","series_order":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/47999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/comments?post=47999"}],"version-history":[{"count":10,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/47999\/revisions"}],"predecessor-version":[{"id":48083,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/47999\/revisions\/48083"}],"wp:attachment":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/media?parent=47999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/categories?post=47999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/tags?post=47999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}