Créer un favicon ICO multi-tailles sans quitter le navigateur

Ce qu’un favicon ICO doit contenir

Les favicon.ico classiques embarquent plusieurs résolutions pour des onglets, favoris et raccourcis nets sur écran Retina. Un seul 16×16 flou agrandi paraît daté.

WebP.Best propose des packs Favicon (16/32/48), Standard (+64) et Full (jusqu’à 256) pour couvrir navigateurs et Windows courants sans exporter chaque taille à la main.

• Onglets du navigateur → petites tailles du pack Favicon
• Raccourcis / certaines surfaces OS → Standard ou Full
• Source → de préférence un logo ou symbole carré net

Préparer l’image source

Partez d’un master carré ou quasi carré aux bords propres. PNG ou WebP transparent conviennent bien. Une photo très chargée fait un mauvais icône à 16 px — simplifiez ou recadrez sur le symbole d’abord.

Si votre logo n’est qu’un wordmark horizontal, attendez-vous à des bandes ou à un recadrage forcé. Décidez si l’icône doit être un symbole ou un monogramme avant conversion.

Étapes sur WebP.Best

Ouvrez le convertisseur de la page d’accueil et ajoutez votre logo (PNG ou WebP transparent idéal). Format de sortie : ICO.

Choisissez un pack de tailles : Favicon (16/32/48 px) pour les onglets ; Standard ajoute 64 px pour les raccourcis ; Full monte à 256 px pour des icônes Windows plus nettes. Inutile d’exporter chaque taille — le pack les regroupe en un .ico.

Choisissez le remplissage du carré : Fit inside garde tout le logo visible avec marges si la source n’est pas carrée ; Fill and crop remplit le carré et peut rogner les bords — mieux pour symboles simples que petit texte.

Convertissez, téléchargez le .ico, puis vérifiez la plus petite taille dans un onglet. Tout s’exécute localement sur votre appareil.

Fit inside vs fill and crop : que choisir

Voyez l’icône comme un cadre carré. Fit inside réduit le logo jusqu’à ce qu’il tienne entier — rien n’est coupé, mais des bandes vides peuvent apparaître si le logo est large ou haut.

Fill and crop zoome jusqu’à couvrir le cadre, puis rogne le débordement. Bien pour un cercle ou une lettre simple ; risqué pour un wordmark long qui perd des lettres à 16 px.

Besoin d’un master strictement carré avant l’ICO ? Déployez Options avancées, choisissez Largeur × hauteur exactes (ex. 512×512), Fill and crop ou Fit inside, convertissez une fois en PNG, puis lancez l’ICO sur ce carré. Si les packs par défaut suffisent, sautez cette étape.

• Wordmark large seulement → Fit inside, ou créez d’abord un symbole carré
• Icône ronde type app → Fill and crop paraît souvent plus propre
• Hésitation → Fit inside d’abord ; Fill and crop seulement si les marges gênent

Utiliser l’ICO sur un site

Placez favicon.ico à la racine du site ou liez-le dans le head HTML avec le bon type. Beaucoup d’hébergeurs statiques acceptent aussi des favicons PNG ; l’ICO reste utile pour d’anciens favoris et certains contextes bureau.

Après déploiement, recharge forcée ou fenêtre privée : les navigateurs mettent les favicons en cache agressivement. Une « mauvaise icône » après upload est souvent du cache, pas un ICO défectueux.

Ce que cela ne fait pas

Cette voie sert aux icônes statiques. Elle ne crée pas votre identité, ne détourre pas automatiquement ni ne génère de SVG. Des traits très fins peuvent disparaître à 16 px — testez la plus petite taille.

Le regroupement tourne en local avec des packs prédéfinis. Pour « Ajouter à l’écran d’accueil » sur mobile, des PNG séparés peuvent être nécessaires — un ICO seul ne suffit pas toujours.