[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 ressuscité puisque de plus en plus de navigateurs les supportent désormais, et en font en fait 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 de avoir un bon favicon. Cependant, la présentation de ces icônes varie selon le client naviguant sur le site. Les ordinateurs de bureau nécessitent une certaine icône, Apple les appareils nécessitent quelque chose de différent, des tailles différentes compliquent également les choses. 

 

Table des matières[Afficher]

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

La 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.

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

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

<lien 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.

Rouge Plus : Comment réinitialiser Apple ID et mot de passe si vous l'avez oublié

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

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

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

<lien 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’auteur
David Attar
David travaille dans ou autour de l'industrie en ligne et numérique depuis 21 ans. Il possède une vaste expérience dans les secteurs des logiciels et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. Il a travaillé avec des agences de développement de logiciels, des éditeurs de logiciels internationaux, des agences de marketing locales et est désormais responsable des opérations marketing chez Aphex Media, une agence de référencement. 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 plateformes numériques disponibles aujourd'hui. Son mélange d'expertise technologique combiné à un fort sens des affaires confère un avantage concurrentiel à ses écrits.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Veuillez 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 ...