▼ Table des matières
FAVICON
Conception d'une favicon
Afin de personnaliser les onglets et la barre d'adresse qui donneront accès à votre site, il faut indiquer entre les balises <head> et </head> le chemin relatif vers une favicon qui sera alors un signe visuel supplémentaire à l'usage des visiteurs (ou une intrusion supplémentaire dans leur organisation... car les deux points de vus sont défendables).
Le code se présente ainsi à condition que le répertoire des images de votre site s'appelle bien "images" et que ce répertoire soit placé à la racine de l'arborescence du site :
<link rel="icon" type="image/png" href="images/favicon.png"/> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
Remarques
- Le nom du fichier de l'icône doit être obligatoirement "favicon".
- Son extension doit être ".ico" pour que Internet Explorer l'affiche.
- Les fichiers d'icônes au format .png seront affichés par Firefox
- 16x16 ou 32x32 pixels sont les tailles adéquates pour l'image qui doit être en 256 couleurs afin d'être affichée par Internet Explorer. L'icône peut être récupérée sur l'internet (par exemple à favicon.fr lien externe) ou être entièrement créée en pixel-art dans un format de départ .bmp.
- Avant de renommer le fichier .bmp (bitmap) en .ico, il semblerait qu'il soit nécessaire, à l'usage des anciennes versions d'Internet Explorer, d'enregistrer le .bmp en 16 bits.
- Firefox lit les fichiers bitmap en 32 bits.
Changer manuellement l'extension du fichier de .bmp en .ico n'est pas une bonne idée.
Il faut enregistrer l'image au format Icônes Microsoft Windows.
Il faut enregistrer l'image au format Icônes Microsoft Windows.
Photofiltre ni MSPaint ne sont capables d'enregistrer une image au format .ico. Le site de Framasoft liste divers logiciels libres permettant de le faire, notamment des logiciels spécialisés dans le travail des icônes.
- Gimp: fichier >>> enregistrer sous >>> format Icônes Microsoft Windows (*.ico).
Sous GNU Linux, outre Gimp, des logiciels simples permettent d'enregistrer au format Icônes Microsoft Windows
- GNU Paint (Gpaint): image de taille inférieure à 240x240 pixels.
- RGBPaint
- Xpaint
- MTPaint
FTP et format ico
Bien que l'option "automatique" semble également suffisante, certains conseillent de "forcer" l'upload de l'ico sur le serveur en binaire et pas en ansi, en changeant les paramètres de transfert dans le client ftp en allant dans
"Edition" puis "Paramètres" puis "Transferts"
Choisir alors "Type de transfert par défaut: binaire".
Complément
Os X,barre personnelle Firefox
- Afficher les favicons dans la barre personnelle de signets de Firefox pour Mac (lien externe)
- N'afficher que les favicons dans la barre personnelle de Firefox sous Mac OS (lien externe)
Rafraîchissement des icônes
Firefox
Internet Explorer 7
Il faut vider le cache d'IE7 ainsi que l'historique. Sous Windows, l'utilisation de Ccleaner résout ce problème du nettoyage des traces laissées par IE.
- Il est toujours possible de configurer IE de manière à ce qu'il efface lui-même le contenu de Internet Temporary Files : allez dans les "options internet" et cocher la dernière rubrique du menu déroulant.
Supprimer l'affichage des favicons
Firefox (à partir de version 3)
Il faut déplacer ou supprimer dans un autre répertoires les fichier bookmark*.* et *.json présents dans le profil de Firefox (dont ceux de \bookmarkbackups\), ainsi que places.sqlite.
Firefox (versions antérieures à 3)
- appeller about:config par la barre d'adresse de Firefox
- browser.chrome.favicons positionné sur false.
- browser.chrome.site_icons positionné sur false également.
Apple-touch-icon
Ce lien dans le head de la page permet l'affichage d'une apple-touch-icon
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
Description
Yeswiki
Emplacement par défaut des favicons et apple touch icon
/themes/bootstrap/images
Iconfont
Description
Yeswiki
Emplacement par défaut des iconfonts
/themes/bootstrap/images/glyphicons-halflings.png /themes/bootstrap/images/glyphicons-halflings-white.png
Iconfonts de la barre de rédaction configuration du background
.icon-pencil/*icône crayon de link-edit*/,
.icon-trash/*icône trash de link-deletepage*/,
.icon-calendar/*icône calendrier de link-revisions*/,
.icon-info-sign/*icône signe information de Références*/,
.icon-film/* icône de l'action diaporama*/,
.icon-share/* icône de l'action partager avec FB, Twitter, Delicious, Google Reader, et envoyer par mail le contenu de la page en cours */,
.icon-user/*icône use de link-edit*/ {
**background-color: white**
}
