Duidelijk — twee problemen: 1) object-cover object-top snijdt de foto bij waardoor tekst/hoofd wegvalt, 2) het logo-overlay staat er nog op. De foto is vierkant (1:1) en bevat al alle tekst en het logo, dus ik gebruik object-contain zodat de hele foto altijd volledig zichtbaar is, en verwijder het logo-overlay blokje.
Twee wijzigingen: object-contain met h-auto zorgt dat de volledige foto — inclusief de tekst en het logo die er al opstaan — altijd integraal getoond wordt zonder bijsnijden. Het logo-overlay blokje is volledig verwijderd omdat het logo al zichtbaar is in de afbeelding zelf.
De bijlage is het Future Qings logo — een blauwe robot in een Q-vorm met een blauw-naar-oranje gradiënt boog. Ik sla het op als favicon.
Het logo is opgeslagen als /app/favicon.png en de metadata.icons in layout.tsx wijst nu naar dat bestand voor zowel de browser-tab favicon als de Apple touch icon. De vorige drie conditionele icon-entries (light/dark/svg) zijn vervangen door één enkelvoudige PNG.