1. casa
  2. Domanda e risposta
  3. Come si inserisce il logo del mio sito Web come immagine dell'icona nelle schede del browser?

Come si inserisce il logo del mio sito Web come immagine dell'icona nelle schede del browser?

2012-07-15 12 views

risposta

119

Quell'immagine si chiama 'favicon' ed è una piccola piazza a forma di .ico file, che è il tipo di file standard per la favicon. È possibile utilizzare anche .png o .gif, ma è necessario seguire lo standard per una migliore compatibilità.

Per impostare uno per il vostro sito web è necessario:

  1. Fai un immagine di piazza del vostro logo (preferibilmente 32x32 o 16x16 pixel, per quanto ne so non c'è dimensione massima * e trasformarla in .ico di file .. è possibile farlo su Gimp, Photoshop (con l'aiuto di un plugin) o di un sito web come Favicon.cc o RealFaviconGenerator

  2. Poi, ci sono due modi di sua creazione:

    A) Posizionandolo nella cartella radice del proprio sito Web (accanto a index.html) con il nome favicon.ico.

    o

    B) Collegamento ad esso tra le <head></head> tag di ogni file .html sul tuo sito, in questo modo:

    <head> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
</head>

Se volete vedere il favicon da qualsiasi sito web, scrivi semplicemente www.url.com/favicon.ico e lo vedrai (probabilmente). Stackoverflow's favicon è 16x16 pixel, Wikipedia è 32x32 e crafstud.io è 128x128.

*: C'è persino un problema con il browser senza limiti di file. Si potrebbe facilmente mandare in crash un browser con un estremamente grande favicon, maggiori informazioni here

fonte

2013-10-15 21:00:23 Deviljho

+4

http://realfavicongenerator.net/ è cazzuto! – Matthias

+0

@Matthias bel sito! – Deviljho

4

Questo è il favicon ed è spiegato nel collegamento.

ad es. da W3C

<link rel="icon" 
    type="image/png" 
    href="http://example.com/myicon.png">

Più, ovviamente, il file immagine nel posto appropriato.

fonte

2012-07-15 02:41:56

1

Aggiungere un file icona denominato "favicon.ico" alla radice del sito Web.

fonte

2012-07-15 02:42:46

+0

ricordare è deve essere esattamente ** ** '16x16'px. –

+2

No, non ha bisogno di essere di forma quadrata e di qualsiasi dimensione, ci vorrà solo più tempo per caricare – Deviljho

1 
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

oppure è possibile utilizzare questo

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}" 
type="image/x-icon">

fonte

2014-07-24 11:48:06 user3680001

+0

inserisci questo codice nella testa – user3680001

+0

apple-touch-icon è per iOS webapps – Deviljho

7

Si chiama 'favicon' ed è necessario aggiungere qui sotto code alla sezione dell'intestazione del tuo sito web.

Basta aggiungere questo alla sezione <head>.

<link rel="icon" href="/your_path_to_image/favicon.jpg">

fonte

2016-08-14 04:48:22

Problemi correlati

 Problemi correlati