Guide

Guide apple-touch-icon

Lorsqu'un utilisateur ajoute votre site à l'écran d'accueil iOS, Safari utilise l'apple-touch-icon — pas favicon.ico. Fournissez un PNG de 180×180 (ou un carré plus grand qui se réduit proprement) et déclarez-le dans votre <head>.

Apple n'applique pas de masque sur iOS récent pour les web clips comme il le fait pour les apps natives, mais votre icône doit rester carrée avec des marges de sécurité — gardez le logo en retrait d'environ 10 % pour éviter que les coins arrondis ne rognent le visuel.

Utilisez <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Un seul fichier de 180×180 couvre tous les iPhone actuels ; des entrées optionnelles en 152×152 et 167×167 améliorent le rendu sur les anciens iPad.

Comment ça marche

  1. 1

    Exporter un PNG de 180×180

    Depuis notre générateur de favicon ou un outil de redimensionnement.

  2. 2

    Placer à la racine du site

    /apple-touch-icon.png aux côtés de favicon.ico.

  3. 3

    Ajouter la balise link

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> dans <head>.

Essayez maintenant

Générer l'apple-touch-icon

Générateur de Favicon

FAQ

Quelle est la taille de l'apple-touch-icon ?+

180×180 pixels pour les iPhone actuels. Exportez-le depuis un master en 512×512 ou 1024×1024.

PNG ou ICO pour iOS ?+

PNG uniquement. iOS ignore le .ico pour les icônes d'écran d'accueil.

Ai-je toujours besoin de favicon.ico ?+

Oui — les onglets et les autres navigateurs utilisent toujours .ico. L'apple-touch-icon est complémentaire.

Outils associés

Plus de guides

Guides

Explorer FetchFavicon

Catégories

Convertisseurs

Utilitaires

Guides

Tutoriels