Astuce rapide: ajoutez des favicons rapidement et facilement à votre HTML

FAVICON rend votre site Web plus raffiné et plus facile à reconnaître. En tant que clients de bureau, des systèmes d'exploitation et des appareils mobiles permettent aux utilisateurs d'épingler des sites Web couramment utilisés pour un accès facile, l'importance des icônes de site Web devient de plus en plus importante. Il est crucial de s'assurer que les meilleures icônes sont affichées lorsque le site Web est fixé n'importe où.

Cependant, la gestion des icônes du site Web n'est souvent pas une tâche facile. En raison de la fragmentation des systèmes d'exploitation mobiles et de bureau et des navigateurs, ce sera un processus lent et fastidieux pour fournir les meilleures icônes pour chaque appareil. Selon le niveau de compatibilité dont vous avez besoin, vous devrez peut-être gérer plus de 30 ressources.

Heureusement, le service de site Web Real Favicon Generator peut résoudre ce problème. Ce site Web fournit des conseils étape par étape pour vous aider à générer rapidement et facilement toutes les icônes du site Web et les ressources Web dont vous avez besoin.

Processus de génération

Le générateur de favori réel rend l'ensemble du processus facile et indolore. Vous sélectionnez d'abord l'icône du site Web et le téléchargez-vous d'abord sur le générateur. Une fois que la page se charge, vous verrez différents écrans pour différentes cibles d'appareil.

De nombreuses sections offrent des options similaires, telles que la possibilité de fournir des images spécialisées pour cibler des appareils spécifiques, ajouter des marges autour des icônes et appliquer des couleurs d'arrière-plan. Voici les principaux écrans que vous pouvez ajuster pour iOS, Android et d'autres appareils (Windows / Safari), respectivement.

L'interface intuitive facilite l'ajustement des icônes du site Web, et vous pouvez voir avec précision l'affichage des icônes après épingler le site Web sur l'appareil.

<meta> En plus de l'icône du site Web réel, ce générateur gérera la création de fichiers manifestes pour le chrome mobile, ainsi que d'autres paramètres qui peuvent épingler des balises dans Safari. Ces valeurs seront finalement converties en balise

dans la sortie finale.

Utilisez l'icône de votre site Web

Lorsque vous êtes prêt, cliquez sur le bouton "Générer". Une fois que la page se charge, elle fournira le code HTML d'origine que vous devez ajouter au site Web. Voici un exemple de sortie:

<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"></link><link href="/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60"></link><link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"></link><link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"></link><link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"></link><link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"></link><link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"></link><link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"></link><link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"></link><link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"></link><link href="/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png"></link><link href="/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"></link><link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"></link><link href="/manifest.json" rel="manifest"></link><link color="#cc0033" href="/safari-pinned-tab.svg" rel="mask-icon"></link><meta content="Web Bird Digital" name="apple-mobile-web-app-title"></meta><meta content="Web Bird Digital" name="application-name"></meta><meta content="#cc0033" name="msapplication-TileColor"></meta><meta content="/mstile-144x144.png" name="msapplication-TileImage"></meta><meta content="#cc0033" name="theme-color"></meta>

Le générateur <link> crée tous les éléments de balise <meta> et

basés sur les paramètres que vous avez fournis plus tôt.

/images/favicons Maintenant, vous pouvez obtenir vos fichiers en cliquant simplement sur le bouton "FAVICON Package". Une fois téléchargé, décompressez-les quelque part et copiez ces icônes sur votre site Web. Dans le cadre du processus de construction, si vous ne les stockez pas dans le répertoire racine de votre site Web (par exemple, les stockez dans un répertoire imbriqué, par exemple

), vous pouvez spécifier le répertoire.

Après avoir copié le fichier et ajouté du code HTML à la section du site Web, vous êtes prêt à partir. Lorsque vous épinglez votre site Web sur votre appareil, votre site Web offrira aux utilisateurs l'icône du site Web la plus apparente. Si vous trouvez ce service utile et économisez votre temps, vous pourriez envisager de donner de l'argent en tant que remerciement (ils acceptent même le bitcoin!).

Autres fonctionnalités et options

En plus de générer des icônes de site Web, le service de générateur Favicon Real peut vérifier si votre site Web fournit toutes les icônes de site Web requises et spécifier ce qui vous manquera.

Le support d'icônes du site Web évolue constamment, c'est donc un excellent outil pour vous assurer de fournir les meilleures icônes et ressources de site Web.

FAQ sur l'ajout d'icônes de site Web à HTML

(La partie FAQ est omise ici car cette partie du contenu est une explication directe, et la valeur pseudo-originale est faible. La rétention augmentera la durée de l'article et n'aura pas beaucoup de gain sur le contenu global.)

Image ajoutée au début de l'article: (Supposons qu'il s'agisse d'une image liée à Favicon)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!