Favicon ontwerp is belangrijker dan je zou denken,. Grootte doet er echt toe hier als een goed ontworpen logo moet herkenbaar zijn op welke grootte het gezien op. Het moet schalen van enorme schermen tot een pictogram dat kan worden zo klein als 16 x 16 pixels, bekend als een favicon. Een goed voorbeeld van favicon design is het Google-logo. Het werkt perfect voor grotere schermen met zijn grote ‘G’ en kenmerkende vierkleurige tekst., En het is nog steeds zo herkenbaar wanneer gekrompen tot de kleine vierkleurige ‘ G ‘ gezien in een webbrowsers adresbalk.
De favicon kan ook worden gezien als een snelkoppelingspictogram, een tabpictogram of een bladwijzerpictogram, dus het moet het onderdeel eruit zien. Om te zien favicon ontwerpen die werken, zie onze roundup van logo ontwerp inspiratie en bekijk deze prachtige collectie van iOS app pictogrammen die het precies goed te krijgen.
in dit artikel gaan we het proces doorlopen van het ontwerpen van de perfecte favicon., We zullen specifieke tips voor het maken van een favicon Voor Apple-apparaten, Android, Chrome, Opera en Safari. Plus een handige gids voor de verschillende favicon formaten en formaten die u moet weten. Gebruik de snelle Links (rechts) om direct naar de gewenste sectie te springen.
- zoekt u een ander soort pictogram? Zie onze gids voor de beste vrije pictogramsets
in de begindagen van het web was een favicon gewoon een 16x16px pictogrambestand, maar tegenwoordig is het iets ingewikkelder., Er zijn verschillende favicon maten en processen voor verschillende contexten. Het creëren van een goede favicon is een wetenschap.
dus, we gaan beginnen met een aantal top tips voor hoe uw favicon eruit zou moeten zien, en dan gaan naar specifiek advies over het maken van een favicon voor verschillende contexten. We gebruiken de sjabloon die beschikbaar is op Pixels toepassen om eenvoudig de verschillende favicon-groottes te genereren die nodig zijn, en de favicon van pixels toepassen als voorbeeld.,
Favicon-ontwerpregels
maken het herkenbaar
het eerste waar je rekening mee moet houden bij het ontwerpen van een favicon is wat er in het canvas moet worden weergegeven. Vergeet niet dat uw favicon alleen wordt weergegeven aan de gebruiker wanneer ze al op uw website of hebben bladwijzer. Dus er is geen noodzaak om te proberen en de gebruiker aan te trekken met uw favicon.
gebruik uw logo
beschouw favicons als sobere wegwijzers die gebruikers helpen uw website te herkennen wanneer ze door hun bladwijzerlijsten en homescreens bladeren., Daarom wilt u uw logo gebruiken, of welk symbool de gebruiker het gemakkelijkst uw website kan herkennen. Als u geen logomark hebt die past bij het kwadratische canvas, gebruik dan het meest herkenbare deel van uw logo.
houd het duidelijk
er zijn ook een paar dingen die je moet vermijden. Gebruik de favicon niet als een marketing tool – dat betekent geen prijskaartjes, ‘nieuwe’ of ‘bijgewerkte’ banners en ga zo maar door. In feite, je wilt niet om tekst in de favicon te zetten op alle. Tekst schaalt niet goed, en de kans is groot dat het toch onleesbaar zal zijn., Tot slot, geen gebruik maken van een foto – het zal modderig en onherkenbaar op de grootte die het gaat verschijnen op.
maak twee versies
toen favicons voor het eerst werden geïntroduceerd in Internet Explorer 5, verschenen ze in de URL-balk en in de bladwijzerlijst. Vandaag, favicons worden weergegeven in een heleboel andere contexten, met inbegrip van bladwijzers lijsten, snelkoppeling menu ‘ s en zelfs mobiele en TV homescreens., Dit maakt het moeilijk om te voorspellen hoe uw favicon zal worden weergegeven aan de eindgebruiker.
om er zeker van te zijn dat uw favicon er goed uitziet in de vele verschillende contexten waarin het zal verschijnen, moet u idealiter twee favicon-stijlen opgeven:
Logo op transparante achtergrond
Deze versie wordt getoond in de URL-balk, bladwijzerlijsten en andere plaatsen waar de favicon naast uw website-URL of naam verschijnt.,
Logo on solid fill
Deze versie wordt gebruikt in raster-achtige bladwijzers en snelkoppelingsmenu ‘ s waar de browser of het apparaat de achtergrond maskeert, om een uniforme look in context te bereiken.
Favicon size cheatsheet
zoals eerder vermeld, vereisen verschillende contexten favicons van verschillende grootte. Hieronder vindt u een korte handleiding voor de verschillende formaten en afmetingen die u moet leveren om alle van de belangrijkste use cases te dekken.
voorheen moesten favicons in het ICO-formaat worden verstrekt., Vandaag is het goed om de bestanden in PNG-formaat (behalve voor de Safari vastgemaakt Tabpictogram dat moet worden verstrekt als SVG).
Als u een eenvoudige manier wilt om alle favicon-groottes te ontwerpen en te exporteren, kijk dan eens naar de favicon-sjabloon bij Pixels toepassen.
laten we nu de specifieke vereisten van verschillende use cases nader bekijken.,
Desktop browser favicons
Hoe maak je een desktop browser favicon
laten we beginnen met de meest eenvoudige favicon die je moet maken: een klassieke favicon voor de klassieke desktop browsers. Dit type favicon werkt het beste op transparante achtergronden, zoals het vaak zal verschijnen in de URL-balk en in bladwijzerlijsten.,
u moet dit type favicon in drie groottes opgeven, allemaal in PNG-formaat met een transparante achtergrond.,
- 16×16
- 32×32
- 48×48
Apple
Hoe maak ik apple touch favicons
Apple ‘ s iOS gebruikt Apple Touch-pictogrammen om websites weer te geven die als bladwijzers in het startscherm van iOS zijn opgeslagen. Dit betekent dat het Apple Touch-pictogram zal worden afgerond op de squircle masker van iOS app pictogrammen.
Het zal ook worden weergegeven tegen de achtergrond die de gebruiker heeft gekozen voor hun startscherm. Met dit in het achterhoofd, uw Apple Touch-pictogram moet een solid fill achtergrondstijl hebben.,
Apple favicons moeten worden opgegeven in een PNG-formaat. U kunt wegkomen met het verstrekken van een 180×180 Apple Touch-pictogram dat automatisch wordt geschaald voor de verschillende Iphone-en iPad-maten. Dit zal in de meeste gevallen prima werken.,
zo niet, kunt u zorgen voor extra maten voor de verschillende Apple-apparaten:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome en Opera
Hoe maak je een favicon voor Android, Chrome en Opera
Android, Chrome en Opera gebruik maken van de android-chrome-192×192.png en android-chrome-512×512.png dat Google aanbeveelt.,
sinds de introductie van adaptieve pictogrammen in Android, zullen websites die aan het Android-startscherm zijn toegevoegd het ontwerp van 192×192 maskeren, zodat het pictogram vorm krijgt naar de door de gebruiker gewenste maskerstijl. Dit kan een squircle, ellipsis, rechthoek, afgeronde rechthoek of teardrop vorm.
u moet een PNG-favicon maken met een vaste achtergrond, op 192×192 en 512×512.,
Implementeer deze favicons door een manifest toe te voegen.json bestand naar uw site en linken naar het binnen de tags:
<link rel="manifest" href="/manifest.json">Hier is de code voor het manifest.json-bestand:
Safari
Hoe maak je een favicon aan voor Safari ‘ s vastgemaakte tab
Dit is de oneven, en het is de enige favicon die in vectorformaat als SVG-bestand moet worden opgegeven. Het wordt weergegeven als het miniatuurpictogram wanneer een gebruiker een tabblad pint naar het Safari-browservenster.,
Dit favicon moet een 100% zwart SVG-bestand met een transparante achtergrond zijn. De SVG kan slechts één laag zijn, en safari vereist dat het viewBox-attribuut van de SVG wordt ingesteld op “0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">andere favicon-typen
Er zijn enkele favicon-dimensies en-formaten die niet in dit artikel zijn opgenomen, bijvoorbeeld., Google TV, Chrome Web Store en pre-iOS 7 Apple Touch iconen. Waarom? Omdat ze zijn verouderd of omdat ze zelden relevant zijn voor de gemiddelde webontwikkelaar.
in het algemeen moeten ontwikkelaars en ontwerpers ernaar streven een zo breed mogelijke verscheidenheid aan apparaten en besturingssystemen te ondersteunen, maar soms heeft het gewoon geen zin. Maar, als u wilt een meer volledige lijst van favicon beelden te zien, zorg ervoor dat u een kijkje nemen op deze favicon cheat sheet op GitHub.,
- De topontwerptrends voor 2020
- 15 professionele lettertypen voor ontwerpers
- 27 beste sets van vrije pictogrammen
