Come inserire un'immagine nel titolo di una pagina Web con Dreamweaver

Passaggio 1

Seleziona un'immagine appropriata Le favicon sono molto piccole, misurano solo 16 pixel quadrati, quindi l'immagine selezionata deve essere abbastanza semplice da essere leggibile in dimensioni ridotte. I loghi complessi sembrano stretti o possono presentare bordi irregolari durante il ridimensionamento a 16 pixel. Se ciò accade a te, considera l'uso di un'immagine alternativa che non include il tuo logo, ma piuttosto riflette il tipo di contenuto sul tuo sito web o nella gamma di colori sul sito. In ogni caso, assicurati che la tua immagine sia un quadrato perfetto per garantire una riduzione.

Passaggio 2

Cambia la dimensione dell'immagine. Dopo aver scelto un'immagine da ridurre, apri il file in Photoshop. Nel menu nella parte superiore dello schermo, seleziona "Immagine", quindi fai clic su "Dimensione immagine". Nella finestra di dialogo che appare, modifica la larghezza e l'altezza dell'immagine a 16 pixel e infine fai clic su "OK".

Passaggio 3

Salva la tua immagine come file GIF o PNG. Questi tipi di file non hanno quasi problemi quando devono essere convertiti nel formato ICO nel passaggio successivo. Per salvare la tua immagine in uno di questi formati, seleziona "File" nel menu in alto di Photoshop, quindi "Salva come". Dai un nome al file favicon e fai clic sul menu a discesa sotto il campo del nome del file e seleziona l'opzione "GIF" o "PNG".

Passaggio 4

Converti l'immagine nel formato ICO. Photoshop non può salvare questo tipo di file da solo. Invece, è necessario scaricare un connettore o utilizzare un'utilità Web. Ad esempio, utilizzare il generatore di favicon gratuito dal sito Web "favicon.cc" (vedere Riferimenti). Dalla pagina principale di questo sito, fare clic sul pulsante "Importa immagine". Individua il file GIF o PNG creato nel passaggio 3 e fai clic su "Carica". In pochi secondi, l'utility trasformerà il tuo file in un'immagine di 16 pixel quadrati. Per salvarlo sul tuo computer con il formato ICO, cerca il titolo con l'etichetta "Anteprima" nella parte inferiore della pagina, quindi fai clic su "Scarica favicon". Salva questo file nella cartella con il resto dei file delle tue pagine web.

Passaggio 5

Aggiungi la favicon al tuo sito web. Collegherete le singole pagine Web nello stesso modo in cui vengono eseguiti i file esterni, come JavaScript e CSS. Apri la tua pagina web con Dreamweaver, quindi modifica il codice selezionando l'opzione "Visualizza" nel menu nella parte superiore dello schermo e fai clic sull'opzione "Codice". Quindi include i seguenti tag di codice :. Questo codice presuppone che la favicon esista nella cartella delle immagini. Se posizioni la favicon altrove, aggiorna la posizione del contenuto. Perché hai bisogno di includere due link? Per compatibilità tra i browser. Internet Explorer 7 gestisce le favicon in modo diverso rispetto ad altri browser e richiede una singola regola per garantire una presentazione corretta.

Passaggio 6

Salva la tua pagina Web e aprila nel browser. Ora vedrai la tua favicon. Se il tuo browser era già aperto, potresti doverlo chiudere completamente e riavviarlo prima che appaia la favicon. Tieni anche presente che alcuni browser mostrano favicon per i titoli delle pagine che si trovano nella cartella Preferiti e non nel titolo stesso nella barra del browser.