icone per iphone e ipod touch

Icone per iphone e ipod touch

Navigando con un qualsiasi browser per Computer, sulla barra degli indirizzi spesso apparir√† un’icona.
Poiche’ basta inserire il file con l’icona favicon.ico sulla cartella principale del sito (generalmente: httpdocroot o httpdoc) e se necessario richiamare l’icona dall’html, ci chiediamo come sia possibile aggiungere un icona specifica se aggiungiamo un sito web , come preferito, nella home page dell’iphone o dell’ipod.

Innanzi tutto cerchera’ di ricordare una serie di informazioni oramai conosciute da tutti gli sviluppatori web, che comunque possono fornire nuovo interesse a chi invece e’ legato ad una cultura di programmazione piu’ tradizionale e meno orientata per il la costruzioni di siti.

Ritengo infatti necessario conoscere la “sintassi” per il web prima di cimentarci nelle semplici operazioni di inserimento di un’icona rappresentativa del sito che vogliamo adattare per iphone.

1.0 Favicon

Iniziamo a fornire informazioni per la creazione delle favicon da inserire nei vari siti web.
Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon.

Per Generare le Favicon e’ possibile utilizzare differenti servizi online.

Di seguito ho inserito alcuni link a servizi online che vi aiutano a creare l’icona chiamata favicon.ico, ossia la piccola icona che compare a fianco del link di un sito nella barra degli indirizzi.

1.1 Come creare una favicon per il tuo sito web:

1.a) Favicom from Pics (http://www.chami.com/html-kit/services/favicon/) e’ un sito con generatore di favicon , anche animate, che vi permetter√† di creare l’icona da visualizzare alla sinistra dell’URL nella barra degli indirizzi.
Funzionamento: Create un’immagine quadrata con nome favicon in formato GIF o JPG e caricarla nel campo Source Image. Cliccate sul bottone Generate Favicon.icon e’ il sito vi creera’ in automatico l’icona in formato .ico con le dimensioni corrette. A questo punto non vi rimarra che aggiungere il file favicon.ico nella “document root” del vostro sito web e posizionare il seguente tag nell’html all’interno dell’ header (<head>..</head>):
<link rel=”shortcut icon” href=”favicon.ico” />

1.b) Favicon.cc (http://www.favicon.cc/) e vi permette di caricare una vostra immagine per poi editarla nel comodo editor online.
Funzionamento
: Preparate un’immagine sul vostro computer e cliccate su import image per fare l‚’upload sull’editor di Favicon.cc a questo punto potete cambiare i colori pixel per pixel e vedere l’anteprima sia nella barra degli indirizzi sia sotto.

1.c) Favicon from Pics (http://www.html-kit.com/favicon/) e’un’ottimo sito, tra i migliori che abbiamo provato.
Funzionamento
:Una volta che avete generato le vostre immagini favicon.ico (ve ne genera a diverse grandezze e anche animate, per i browser che le supportano), cliccate sul link Download Favicon Package e scaricatele tutte in un file.

1.d) il sito WebScriptlab mette a disposizione un generatore di favicon.
Funzionamento
: bastera’ inserire l’immagine desiderata, e in pochi istanti creera’ per noi una favicon da inserire nella nostra pagina web. Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

NOTA: Numerosissimi altri siti forniscono strumenti sia online che offline per generare le favicon e sono tutti molto semplici da usare.

Ovviamente i servizi che abbiamo segnalato sono tutti gratuiti!

2.0 Inserire un’ icona sulla home (Desktop) dell’Iphone e Ipod touch

Utilizzando iphone o ipod touch di nuova generazione possiamo inserire nel segnalibri (bookmark) un icona direttamente nella home (desktop) dell iphone o ipod.

Per creare un’icona stile Apple vi suggeriamo alcune piccole istruzioni e un file PSD (qui il PSD) con i livelli per creare senza difficolta’ la vostra icona compatibile con ipod. (ref. http://www.mambro.it)

Seguendo le indicazioni dell’utile sito  www.mambro.it , l’icona dovra’ essere salvata in formato PNG e deve avere dimensioni (canvas image size) pari a 57 x 57 pixel
E’ possibile
costruire icone anche di dimensioni maggiori ma l’iphone/ipod le adattera’ sempre alla dimensione 57 x 57 px.

Create la vostra icona (usando il template fornito mambro: TEMPLATE PSD) e mettete il file PNG nella root del vostro sito
Inserite ora prima del tag <HEAD> il seguente codice:

<HEAD>
<link rel="apple-touch-icon" href="/icona.png">
</HEAD>

Note sull’uso template linkato da mambro.it :
Aprite il file PSD e inserire il vostro logo negli appositi spazi e salvare il tutto in PNG facendo attenzione a DISABILITARE i livelli ‚overlay e griglia, che servono solo a farvi capire come verra’ visualizzata l’icona e come posizionarla.
Sar
a’ infatti compito dell’iphone/ipod aggiungere l’effetto stondato e glossy sulla vostra icona

:: SCARICA IL TEMPLATE PSD ::

APPENDICE: Favicon
Da Wikipedia, l’enciclopedia libera.

Favicon e’ un termine inglese, contrazione di favorites icon. In informatica indica un’icona associata ad una particolare pagina web. Solitamente la favicon e’ una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell’URL nella barra degli indirizzi di un browser, nel momento in cui si naviga un sito che ne e’ provvisto. L’icona e’ inoltre visualizzata nel menu dei preferiti di un browser. Nata come funzionalita’ di Microsoft Internet Explorer versione 5, in seguito e’ stata integrata su molti altri browser tra cui: Firefox, Mozilla, Opera, Safari, e Konqueror.

In origine la favicon era semplicemente posta nella directory radice del webserver con il nome favicon.ico e usata direttamente da Internet Explorer. Piu’ tardi e’ stato introdotto un apposito tag HTML per specificare la posizione del file. Il tag viene posto nella sezione head di un file HTML con sintassi:

<link rel=”shortcut icon” href=”favicon.ico” />
o, in conformità agli standard imposti dal World Wide Web Consortium:
<link rel=”icon” href=”http:/favicon.ico” />

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

Sfruttando le potenzialita’ del formato .gif e’ possibile creare delle favicon animate, anche se esse sono supportate solo da alcuni browser. Per usare i formati GIF o PNG i tag rispettivamente necessari sono:

<link rel=”icon” href=”http:/favicon.gif” type=”image/gif” />
o
<link rel=”icon” href=”http:/favicon.png” type=”image/png” />

FAVICON.ICO
Le favicon sono quelle minuscole icone (16√ó16 pixel) che compaiono alla sinistra della URL nella barra degli indirizzi del browser. Far comparire la favicon e’ un gioco da ragazzi, come potete leggere in questo articolo. Il problema e’ creare l’immagine. Il formato, obbligatoriamente .ico, non e’ facilmente editabile e richiede spesso l’uso di programmi di grafica specifici, raramente freeware. Ma come riportato su DesMM.com, e’ possibile aggirare l’ostacolo con un plug-in gratuito per Photoshop.

Un aspetto da non tralasciare e’ quello di avere una bella icona preferiti,  Firefox la inserisce sempre nella Navigation bar.
E’ semplice la realizzazione di questa decorazione :
1) Apriamo dal vostro programma di Photo-editing preferito e realizziamo una icona 16×16 che identifica il vostro sito e la salveremo in formato .gif.

2) Il formato corretto per la visualizzazione delle favicon e’ il .ico, ma non tutti i programmi permettono di salvare in questo formato. Un programmino freeware che puo’ essere utile e’ Irfanview che ha all’interno del salva con nome la scelta di registrare nel formato .ico.

3) Per comprenere  meglio il processo di conversione .ico, soggeriamo di leggere questo sito http://www.html-kit.com/e/favicon.cgi nel quale, con un  form, potrete convertire il vostro file .gif seguendo delle semplici istruzioni.

4) Inserite il file creato nella Docroot del vostro server(Document root: generalmente la cartella nominata httpdocs o www) . E’ necessario  che il file sia nominato favicon.ico altrimenti i browser non lo troveranno.

5) Agggiungiamo nelle pagine html tra i tag<HEAD> e</HEAD>, un codice. Ovviamente dovrete sostituire il nome corretto del vostro dominio al posto di www.nomesito.com:

<link REL=”shortcut icon” HREF=”http://www.nomesito.com/favicon.ico”>