How to make a favicon Come fare una favicon

Posted on April 10, 2008 at 5:10 am Inviato il 10 aprile 2008, 5:10 am

Looking for a way to create a FavIcon ? Cercando un modo per creare una favicon? If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. Se si navigare in Internet regolarmente, probabilmente avete notato che molti siti hanno una piccola icona che appare di fronte al sito web l'indirizzo nel browser o segnalibri. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents. Molti siti Web utilizzano favicon (alias icona preferita) come un modo per marca loro sito web, in modo che quando si vede che l'icona, è automaticamente sapere quale azienda o di un prodotto che rappresenta.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid: Per esempio, dare un'occhiata alla barra degli indirizzi in questo momento e si noterà che a sinistra di URL è una piccola icona che assomiglia a una griglia:

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them: Inoltre, se guardo il mio di Firefox o Internet Explorer Preferiti, vedo anche la stessa favicon accanto a una siti web che li utilizzano in modo:

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site? Utilizzando una favicon per il tuo sito è una buona prassi in quanto contribuisce ai visitatori di individuare rapidamente il tuo sito tra un gran numero di segnalibri, ecc Così come si fa a passare sulla creazione di una favicon per il tuo sito?

How to make a FavIcon Come fare una favicon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. Il primo passo nella creazione di una favicon è effettivamente a trovare un'immagine o creare un grafico che si desidera utilizzare come icona. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture. Una favicon ha sempre un 16 × 16 pixel di dimensione, pertanto, essere molto attenti al momento di scegliere o creare la tua immagine.

Try to find an icon or graphic that has very little going on with it in terms of design. Prova a trovare una icona grafica o che ha molto poco in corso con essa in termini di design. The simpler graphic you can find, the better your FavIcon will turn out. Il progetto di semplificazione della grafica è possibile trovare, migliori sono le tue favicon si accende. Also, make sure that the graphic is a square, so basically where the length and width are equal. Inoltre, assicurarsi che la grafica è un quadrato, così fondamentalmente in cui la lunghezza e la larghezza sono uguali. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished. Se si dispone di un ritratto o paesaggio picture, sarà ridimensionata a 16 × 16 e quindi diventare una stirata o squished.

You can also create your own image using Microsoft Paint or similar photo editing software. È inoltre possibile creare una propria immagine utilizzando Microsoft Paint o simili fotografia di software di editing. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format. Quando hai finito, assicurati di salvare il file in formato GIF, JPG, PNG, BMP o formato.

Now that you have your image, go to Ora che avete la vostra immagine, vai a DynamicDrive DynamicDrive and let’s use their FavIcon generator to create our FavIcon from the picture. e diamo loro uso favicon generatore di creare il nostro favicon dalla foto.

Go ahead and browse to the location of your image file and then choose Create Icon . Vai avanti e cerca la posizione del tuo file di immagine e quindi scegliere Crea Icona.

And really that’s it! E veramente il gioco è fatto! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image. You'll ora avere un'anteprima di come il tuo favicon esaminerà in un vero e proprio browser e si può procedere per scaricare la favicon o si può semplicemente scegliere un'altra immagine.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. Quello che mi piace di questo sito è che esso offre anche le istruzioni su come installare una favicon per il tuo sito web, che è un po 'più difficile la creazione di quelli attualmente in sé la favicon. Here’s what you need to do: Ecco cosa devi fare:

First, download the file and then upload the FavIcon, which by the way should be named “ FavIcon.ico ” to the ROOT directory of your site. In primo luogo, scaricare il file e quindi di caricare la favicon, che dal modo in cui deve essere denominato "favicon.ico" nella directory principale del tuo sito. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. E 'molto importante che il file favicon.ico essere citati e che si trova nella directory root sul vostro server web. You can verify that you uploaded it correctly by typing È possibile verificare che hai caricato correttamente digitando

http://mysite.com/favicon.ico http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. nel browser's location, dove "mysite.com" è il vostro sito web della indirizzo Internet. Now you need to insert one line of code into the <HEAD> section of your web sites pages. Ora è necessario inserire una riga di codice nella sezione <HEAD> del tuo sito web pagine. Note that this code has to be on every page that you want the FavIcon to appear for. Si noti che questo codice deve essere in ogni pagina che si desidera la favicon a comparire. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually. Questo è facile se hai un sito che utilizza modelli e tira in intestazione, piè di pagina e altri file singolarmente.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. Se tutte le pagine sono statiche e che non si utilizzano modelli o include, dovrete modificare manualmente il codice HTML in ogni pagina. The line of code you’re going to want to add is as follows: La riga di codice che si vuole desidera aggiungere è il seguente:

<link rel=”shortcut icon” href=”/favicon.ico”> <link rel="shortcut icon" href="/favicon.ico">

The icon may not show up immediately, so be patient. L'icona non possono essere visualizzati immediatamente, in modo di essere paziente. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug. Anche, a volte non sembra a tutti, specialmente con IE come vi è un bug del browser.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. Speriamo con questo breve tutorial vi è stato in grado di creare una favicon e metterla in lavoro sul tuo sito. If you have any questions, feel free to post a comment! Se avete domande, non esiti a inviare un commento! Enjoy! Gustare!