Vous le savez sans doute, les favicons sont essentiels pour votre SEO. Ce sont les icônes qui représentent votre logo et ce, sur différents écrans et à travers notamment les onglets de votre navigateur. Je vous propose ici de voir comment les implémenter dans votre projet et comme générer facilement vos favicons.
Comment implémenter ses favicons ?
Les favicons sont référencés via du code HTML compris entre les balises <Head /> de chaque page. Fort heureusement, il n’y a rien de dynamique dans les valeurs à spécifier puisqu’il s’agit d’images. En revanche, ces dernières sont de différentes tailles et il faut donc les créer. Comment faire alors pour optimiser le temps nécessaire à leur création ? Eh bien d’autres s’y sont attelés. C’est le cas de realfavicongenerator
Générer facilement ses favicons :
Via ce site en ligne que je vous propose aujourd’hui, vous allez pouvoir générer vos différents favicons et avec les tailles requises. En fin de processus, il vous est possible de télécharger un dossier sous format .zip et un morceau de code à copier-coller et à donc à insérer entre les balises <head />.
L’outil génère également un fichier « manifest.json » qui va mapper les icônes réalisées.
Il va même un peu plus loin puisqu’il permet également de définir le thème de votre site et renseigne également la couleur principal du thème …
Enfin, si vous avez déjà codé les balises <link /> qui référencent vos icônes, vous pouvez également utiliser le site pour checker s’il n’ y a pas d’erreurs à l’adresse suivante : https://realfavicongenerator.net/favicon-checker.
Et pour conclure
Un outil comme Real Favicon Generator vous fera gagner du temps en design mais si vous êtes à l’aise avec des logiciels PAO, vous pouvez sans doute créer un script qui génère automatiquement différentes images avec des noms différents à partir d’un seul logo. Pour rappel, il faut un format carré et le format recommandé est le .PNG ; à la fois léger et transparent. Si vous travaillez avec une image de 512×512 pixels, c’est suffisant pour la suite.
L’avantage de passer par un outil comme Real Favicon Generator, c’est qu’il vous donne également le code. Aussi, pour mon template de base nommé « peregrin« , j’ai opté pour une fonctions PHP qui génère le code demandé par les standards du web. On pourrait imaginer la dynamiser en choisissant un path pour changer le dossier des icônes ou encore ajouter d’autres formats. Voilà pour finir à quoi ressemblent ces balises dont je vous parle depuis le début et que vous pouvez reprendre pour votre projet :
<link rel="icon" type="image/png" href="/seo/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/seo/favicons/favicon.svg" />
<link rel="shortcut icon" href="/seo/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/seo/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/seo/favicons/site.webmanifest" />Vous trouverez ma fonction PHP sur Github très prochainement.
Newsletter
En maintenance ...