[Comment] Créer un favicon et Apple Icône pour votre site Web

Apple iPhone / iPad

Depuis quelques années, les favicons qui avaient perdu une grande partie de leur pertinence ont été ressuscitées puisque de plus en plus de navigateurs les supportent désormais, et en fait, en font une partie très visuelle de l'expérience de leur utilisateur. Les navigateurs des tablettes et des smartphones utilisent également ces icônes. Cela a conduit à une importance accrue d'avoir un bon favicon. Cependant, les modalités de présentation de ces icônes varient en fonction du client naviguant sur le site. Les bureaux nécessitent une certaine icône, Apple les appareils nécessitent quelque chose de différent, des tailles différentes compliquent également les choses. 

 

Une solution simple - Générateur d'icônes en ligne gratuit pour Apple et icônes favicon

 Iconifier.net est une solution simple qui, étant donné un carré JPG, GIF ou PNG, générera un jeu d'icônes de différentes tailles afin que vous puissiez utiliser et choisir celles que vous souhaitez prendre en charge sur votre site Web. Il vous suffit alors de télécharger les icônes générées et de les intégrer dans le code de votre site Web. Vous pouvez intégrer ces étapes dans votre processus de conception Web.

Incorporez les icônes de favicons dans votre site Web

Après avoir créé l'icône favicon.ico en utilisant Iconifier.net ci-dessus, et l'avoir placée à la racine de votre site Web, ajoutez le code suivant entre les et de votre site web

Le Apple Icônes

Après avoir créé les différentes icônes à l'aide du site ci-dessus, vous devrez également inclure un code légèrement différent pour Apple Appareils iPhone/iPad (et éventuellement Android). Téléchargez à nouveau les fichiers d'icônes générés à la racine de votre site Web et placez le code suivant entre les balises HEAD.

<link rel=”apple-touch-icon” tailles=”114×114″ href="/fr/touch-icon-114×114.png” />

<link rel=”apple-touch-icon” tailles=”72×72″ href="/fr/touch-icon-72×72.png” />

<link rel=”apple-touch-icon" href="/fr/touch-icon-iphone.png" />

Les appareils iOS gèrent automatiquement cela dans leur navigateur, redimensionnent et ajoutent des effets en conséquence pour qu'il corresponde au style de l'appareil sur lequel ils sont vus.

Incidemment, les grands développeurs iOS et Android ne sont pas faciles à embaucher - si vous cherchez à embaucher un bon développeur d'applications et savoir comment trouver un bon candidat nous avons ce qu'il vous faut CollectiveRay. - nous vous montrerons tous les bons endroits pour trouver de bons candidats.

Icônes pour les appareils Android

Android s'appuie sur le Apple touchez les icônes, mais attendez-vous à ce que les icônes soient déjà dans leur version finale. Cette version finale est "PRÉCOMPOSÉE", et les appareils Android s'attendent à ce que cette balise soit en place. Téléchargez donc de nouvelles versions, avec des noms légèrement différents (comme l'ajout de pré-composé dans le nom), puis ajoutez le balisage suivant. La partie la plus importante est le rel=apple-touch-icon-précomposé. Mettez les fichiers à la racine de votre site web et ajoutez ce code entre le et balises de votre html

<link rel=”apple-touch-icon-precomposed” tailles=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>

<link rel=”apple-touch-icon-precomposed” tailles=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>

<link rel=”apple-touch-icon-precomposed" href="/fr/touch-icon-iphone-precomposed.png">

Plus de détails sur Favicons peuvent être trouvés sur Wikepedia: https://en.wikipedia.org/wiki/Favicon

À propos de l’auteure
David Attar
Author: David AttarSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

 

qui sommes nous?

CollectiveRay est dirigé par David Attard - travaillant dans et autour du créneau de la conception de sites Web depuis plus de 12 ans, nous fournissons des conseils pratiques aux personnes qui travaillent avec et sur des sites Web. Nous gérons également DronesBuy.net - un site Web pour les amateurs de drones.

David Attard

 

 

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...