# 122: The State of Favicons - CSS-trucs

Anonim

Voor altijd hebben we allemaal 16 × 16 afbeeldingen gemaakt en ze op de een of andere manier in het .ico-formaat gebracht. Ik heb deze conversietool waarschijnlijk een miljoen keer gebruikt. Ergens langs de lijn begon het verwarrender te worden. Browsers kunnen ook .png.webp-favicons ondersteunen. En nu zijn er retina-displays, en niets ziet er slechter uit op het netvlies dan kleine, kleine grafische afbeeldingen. Browsers beginnen nu ook 32 × 32 favicons te ondersteunen. Wat moeten we doen?

De situatie is dat als u beide aanbiedt, veel browsers de .png.webp negeren en de .ico gebruiken. Jonathan Neal heeft het hele verhaal. Dus laten we die .ico voor beide gebruiken. Het is een uniek formaat dat is gebouwd om dat toch te verwerken.

  • Maak zowel de 16 × 16- als de 32 × 32-versie en gebruik je beste pixelvaardigheden om beide aan te scherpen
  • Bewaar ze als PNG's van volledige kwaliteit
  • Maak een nieuw project in Icon Slate (via)
  • Sleep de versies naar de respectieve "putten"
  • "Build" om het .ico
  • Koppel die .ico zoals normaal: