Favicon - de term letterlijk vertaald als "favoriete icoon" - wordt beschouwd als een van de moeilijkste elementen van modern webdesign. Het is een kleine afbeelding die in een browsertabblad, zoekbalk en andere plaatsen verschijnt en een belangrijke rol speelt bij het personaliseren van uw site.
Vanwege het niet-standaard formaat en het kleine formaat kan het maken van een favicon moeilijk zijn, zowel vanuit technisch oogpunt als vanuit ontwerpoogpunt.
Een even moeilijke taak is om ervoor te zorgen dat de favicon compatibel is met verschillende browsers.
In dit artikel leert u hoe u een favicon maakt - we geven ontwerptips en services voor het maken van een favicon en hoe u een favicon aan uw site kunt toevoegen.
Wat is een favicon en waarom is het nodig?
Ondanks het feit dat een favicon een heel klein grafisch object is, is het uiterst belangrijk bij het ontwerpen van een site en in het algemeen.
Klik om de foto te vergroten.
Aanvankelijk, favicon maakt uw site persoonlijker en consistenter met andere grafische elementen zoals een logo.
ten tweede , zorgt het favicon ervoor dat uw site zich onderscheidt van andere webbronnen in de lijst met zoekresultaten. Een site zonder dit mini-pictogram ziet er saai uit en verliest zijn concurrenten. Kortom, een favicon is gewoon een "must have" voor sites.
Ten derde Met het favicon kan de gebruiker uw site sneller vinden in de map met bladwijzers of andere pictogrammen op het bureaublad.
Een favicon-ontwerp maken
Het favicon moet de essentie en het merk vastleggen in een klein bordje ter grootte van een emoticon. Een vereenvoudigde versie van het bedrijfslogo is een goede oplossing, maar houd er rekening mee dat een volwaardig logo met tekst en handelsmerken hiervoor niet geschikt is.
Deze websites gebruiken hun merkafbeelding (of in ieder geval iets vergelijkbaars).
Gebruik geen tekst
Vermijd het gebruik van tekst, omdat het kleine formaat van het favicon de inscripties onleesbaar maakt. Plaats 1, maximaal 2 letters op het pictogram - bijvoorbeeld de eerste letters in de naam van uw bedrijf of webresource; in dit geval kunnen ze nog steeds worden onderscheiden.
Het favicon pixelen
De favicons zijn zo klein dat elke pixel ertoe doet. Wanneer u uitzoomt naar een logo op volledige grootte, is de afbeelding vaak wazig.
Dit is een fragment van het Facebook-logo op volledige grootte nadat het is verkleind tot 32x32. Het is gemakkelijk te zien dat het beeld rond de randen "zweeft". Om een dergelijk defect te voorkomen, moet u de bewerking op pixelniveau uitvoeren.
Als ik met iconen werk, gebruik ik het liefst een bitmapbewerkingsprogramma (zoals Photoshop of Pixelmator). Eerst verklein ik het logo op volledige grootte tot 64x64 pixels, omdat dit de grootste favicon is die ik nodig heb. Het werk is zeer nauwgezet, het kan een uur of zelfs twee duren, maar het resultaat is gewoonweg uitstekend.
Als u niet over de tijd en vaardigheden beschikt voor dergelijke operaties, is het beter om online diensten te gebruiken zoals: Logotizer.ru
Favicon-grootte:
Met een 64x64-pictogram maak ik op dezelfde manier 32x32-, 24x24- en 16x16 px-pictogrammen. Elk van hen heeft zijn eigen doel:
- 64 × 64 - "Leeslijst" in Safari en Windows
- 24 × 24 - Gepinde sites in IE9.
- 32 × 32 - Voor schermen met een hoge resolutie.
- 16x16 - Meestal gebruikt in browsers zoals IE, Safari, Chrome, enz.
Maar het maken van kleinere favicons is niet beperkt tot: vaak is extra bewerking op pixelniveau vereist. Je kunt ook een alfakanaal toevoegen als je dat wilt. Als dit eerder problemen veroorzaakte, ondersteunen nu bijna alle browsers transparantie in favicons.
Favicon-indelingen
Voorheen, toen alleen Windows ICO-bestanden werden ondersteund, konden we tijd besparen door een 16x16 favicon op te slaan in GIF-formaat en het de .ico-extensie te geven. Deze techniek werkte feilloos! Maar nu is deze methode niet langer nodig, omdat de tools om ICO-bestanden te maken gemakkelijk op internet te vinden zijn. Bovendien worden nu en worden gebruikt voor favicons, maar de meest voorkomende zijn nog steeds alleen de volgende twee.
ICO
De palm behoort tot het ICO-formaat. In tegenstelling tot PNG-bestanden kunnen ICO-bestanden verschillende resoluties en bitdiepten hebben (wat geweldig is voor Windows). Internet Explorer gebruikt favicons van verschillende groottes (bijvoorbeeld pictogrammen van 32 pixels voor de taakbalk van Windows 7), en daarom is in dit geval het ICO-formaat de enige optie.
PNG-bestanden zijn erg handig omdat je geen speciaal gereedschap nodig hebt om ze te maken. Dit formaat ondersteunt een alfakanaal en stelt u in staat om de kleinste bestandsgroottes te creëren. Misschien is het enige nadeel van het PNG-formaat dat het niet wordt ondersteund in Internet Explorer.
Er zijn ook andere opties:
- GIF- en geanimeerde GIF-formaten hebben geen andere voordelen dan compatibiliteit met zeer oude browsers.
- Het wordt niet aanbevolen om het JPG-formaat te gebruiken, zelfs niet als de afbeelding de vorm heeft van een foto. Dit formaat mist de helderheid van PNG, en het enige voordeel zijn vloeiendere overgangen tussen kleuren - een nuance die volledig onzichtbaar is in een zeer kleine afbeelding.
- SVG zou een goede optie kunnen zijn als meer browsers dit formaat favicons zouden ondersteunen. In de tussentijd is er alleen compatibiliteit met Opera.
- Er is ook een zogenaamd "subformaat" PNG - APNG (geanimeerde PNG), die wordt ondersteund in Firefox en Opera. De haalbaarheid van het gebruik ervan blijft echter twijfelachtig. Een geanimeerd favicon kan de gebruiker afleiden en zelfs irriteren.
Maak favicon online - tools en online services
We hebben voor u de handigste services geselecteerd waarmee u online een favicon kunt maken.
Logotizer
Logotizer is een nieuwe, eenvoudige en handige service voor het maken van een favicon en logo voor uw website.
Met deze online builder kun je een favicon helemaal opnieuw maken. De service is gericht op beginners, dus het zal niet moeilijk zijn om een goed ontwerp te ontwikkelen.
Een favicon maken met de online logotizer-generator
Het belangrijkste werkgebied bevindt zich aan de linkerkant. Aan de rechterkant kunt u zien hoe het favicon eruit zal zien op verschillende media - browsertabblad, computertaakbalk of smartphonescherm. Erg handig en intuïtief.
Eerst moet je de vorm voor het favicon kiezen. Het zijn er veel, meer dan 50. We raden je aan om eenvoudige en ongecompliceerde formulieren te kiezen om het favicon gemakkelijk te begrijpen en te onthouden te maken.
In dit stadium definieert u ook de kleur van de vorm, die als achtergrond van het favicon wordt gebruikt, en selecteert u het kader. Kijk welke kleur uw logo domineert (indien aanwezig), welke kleuren de belangrijkste zijn op uw site. Binnen dit bereik raden we aan om een favicon-ontwerp te maken.
Onder het blok "Vorm" staat een verzameling figuren (symbolen). Het zijn er niet zo veel, jammer dat je je opties niet kunt uploaden; maar de keuze is nog steeds heel interessant.
Verander de kleur, grootte, positie van de vormen! Kortom, experimenteer, gelukkig kunt u dit met de service doen.
Zodra de vorm is geselecteerd, kunt u uw eigen tekst toevoegen. Zoals ik al eerder schreef, is het beter om 1 of 2 letters te gebruiken, niet meer.
Er is een uitgebreide keuze aan lettertypen. Dit is zeker een pluspunt. Net als bij vormen, kunt u de kleur, grootte en positie van de tekst wijzigen.
Als u besluit dat een favicon-laag u tijdelijk hindert of helemaal niet nodig is, kunt u deze eenvoudig verbergen.
Nadat een favicon is gemaakt, biedt de service aan om deze op te slaan. Registreer een account (in 2017 is er geen manier om te registreren zonder registratie), en daarna kunt u bestanden downloaden voor een kleine betaling - 199 roebel.
De site bevat ook een kleine instructie over hoe u een favicon aan de site kunt toevoegen, dus u zou geen problemen moeten hebben om een favicon aan de site toe te voegen. Soortgelijke aanbevelingen worden ook verderop in dit artikel gegeven.
Na betaling ontvangt de gebruiker onmiddellijk 10 favicons van verschillende groottes voor alle apparaten die vandaag nodig zijn (Apple Touch-pictogram, Microsoft Application Icons en andere).
Het favicon.ico-bestand zelf heeft meerdere formaten en bevat pictogrammen van 4 formaten in 1 bestand (16px, 24px, 32px, 64px). Als u dus een site aan uw browserbladwijzers toevoegt of een geschiedenis opent, kunt u pictogrammen van verschillende groottes zien, maar deze worden duidelijk en zonder vervaging weergegeven.
Over het algemeen is de service goed. Simpel, handig, meer niet.
RealFaviconGenerator.net
Is een eenvoudigere favicon-generator waarmee u favicons voor elk platform kunt maken. Bovendien kan een favicon op de bron worden getest. Voer uw website-URL in en u ziet hoe uw favicon eruitziet in elke browser en elk besturingssysteem. Real Favicon Generator laat je ook zien hoe je fouten kunt herstellen en je favicon nog beter kunt maken.
Favicon.by
Favicon.by Is een andere gratis en gebruiksvriendelijke favicon-generator die PNG-, JPG- en GIF-bestanden converteert naar het .ico-formaat. Upload een afbeelding vanaf uw computer, selecteer een formaat (16x16px of 32x32px) en klik op de knop "Maken". Volg de instructies om het resulterende favicon op uw site op te slaan.
De service maakt het ook mogelijk om pixel voor pixel een logo te tekenen, maar eerlijk gezegd kan niet iedereen dat. Ik kon het bijvoorbeeld niet. Hier ben ik zo krom :)
Een favicon aan uw site toevoegen
U kunt een favicon aan uw site toevoegen door een paar wijzigingen aan te brengen in de HTML-code van de sitepagina.
Stap 1: Upload het "favicon.ico"-bestand naar uw hostingserver.
Ga hiervoor naar uw FTP-server via deze link:
ftp: // [e-mail beveiligd]
Voer uw gebruikersnaam en wachtwoord in. Ze kunnen worden verkregen via het beheerderspaneel van uw hostingbedrijf.
Upload de favicon-bestanden naar de hoofdmap. De hoofdmap wordt meestal "public_html" of "www" genoemd.
Stap 2: Voeg een favicon toe aan HTML.
Open het FTP-servervenster en download het bestand "index.html" of "header.php".
Dan moet je de code downloaden. De downloadbare code is afhankelijk van uw website.
Als uw site HTML is, zoekt u het HEAD-gebied in uw index.html-bestand en plakt u de volgende code:
Als uw site WordPress is, zoek dan het HEAD-gebied in uw header.php-bestand en plak de volgende code:
/favicon.ico "/>
Browsers kunnen deze codes gebruiken om uw favicons te vinden.
Dus je hebt je favicon geïnstalleerd!
Een favicon toevoegen aan WordPress en andere platforms
Als uw bron is gebaseerd op WordPress of een ander CMS, dan is het toevoegen van een favicon aan uw site heel eenvoudig. Over het algemeen zal het algoritme voor het toevoegen van een favicon hetzelfde zijn voor verschillende platforms.
1. U moet naar de siteconsole gaan.
2. Zoek de sectie "Ontwerp" of "Uiterlijk".
3. Ga naar het gedeelte "Thema-instellingen" en zoek daar "Favicon".
4. Download het favicon van uw computer.
5. Bewaar en ververs de pagina.
Hoe complexere favicons te maken
Dit artikel behandelt eenvoudige en snelle manieren om favicons te maken die compatibel zijn met bijna elke browser en elk besturingssysteem. Maar als het gaat om webdesign en -ontwikkeling, is er geen limiet aan perfectie. Als u wilt leren hoe u complexere favicons, aanraakpictogrammen voor iOS-startschermen, pictogrammen voor de Metro-interface in Windows, pictogrammen voor Google TV en meer kunt maken, raad ik u aan vertrouwd te raken met deze materialen: favicon spiekbriefje... Het bevat volledige informatie over het onderwerp en biedt goede bronnen. Dit is een geweldige optie voor die ontwerpers en ontwikkelaars (inclusief ikzelf) die constant op zoek zijn om hun kennis uit te breiden.
Met Favico.js kunt u dynamische numerieke favicons maken.
Mogelijk hebt u ook een dynamisch favicon nodig met een pictogram met een veranderend nummer. Om dergelijke favicons te maken, raad ik je aan om de service te gebruiken favico.js beschikbaar op Github. Hoewel dynamische favicons niet compatibel zijn met alle browsers. Maar voor die browsers die ze ondersteunen, kunnen deze pictogrammen een interessante en nuttige toevoeging zijn.
Als je dit artikel wilt bijwerken met een andere tip of een vraag wilt stellen, laat dan hieronder een reactie achter!
Hoe maak je een favicon voor een website - tips en services bijgewerkt: 7 februari 2018 door de auteur: beheerder
Hallo lieve vrienden! Vandaag zal ik schrijven over het maken van een favicon voor een website of blog. Bovendien zal ik 2 manieren overwegen om een favicon te maken. Je leert hoe je een favicon ico maakt in Photoshop en de online service gebruikt ;-).
Voordat u doorgaat met het lezen van dit artikel, raad ik u ook aan om vertrouwd te raken met andere nuttige berichten die uw bron zullen verbeteren: "",? "," ".
Laten we nu teruggaan naar het onderwerp van het bericht. Als de site geen favicon heeft, verliest deze veel. Ten eerste kan een favicon het verkeer van Yandex vergroten. Vraag hoe? Erg makkelijk. Feit is dat Yandex naast de titeltitel ook het favicon van de site laat zien. En als de titels en beschrijvingen van twee bronnen ongeveer hetzelfde zijn, maar de ene wel een favicon heeft en de andere niet, dan zal de bezoeker hoogstwaarschijnlijk met een favicon naar de bron gaan.
Welnu, en ten tweede kan zo'n klein pictogram uw bron van anderen onderscheiden. Daarom moet het favicon helder en gedenkwaardig zijn. Laten we het zo proberen en het maken.
Hoe maak je een favicon voor een website vanaf het begin
Om een favicon te maken, zal ik de service gebruiken. Het is heel gemakkelijk te gebruiken. Eerst moet je de kleur specificeren die je gaat gebruiken bij het maken van je favicon. Stel hiervoor de tint en verzadiging in.
Nadat je een kleur hebt gekozen beginnen we met het tekenen van het favicon. Als je iets verkeerd hebt getekend, kan het worden verwijderd. Vink hiervoor het vakje naast de transparante tool aan.
Dus ik maakte een paar minuten zo'n favicon ;-).
Onderaan is er een preview zodat je altijd kunt zien wat je krijgt. Nadat u het favicon hebt getekend, moet u het naar uw computer downloaden. Om dit te doen, klikt u eenvoudig op de knop "download favicon".
Hoe maak je een favicon voor een website van een kant-en-klare afbeelding
Van elke afbeelding kun je een favicon maken. Dit kan uw foto, sitelogo of iets anders zijn. Om dit te doen, moet u het Photoshop-programma openen en de afbeelding uploaden die u naar het favicon wilt converteren. Klik op "Bestand" - "Openen".
Vervolgens moet u de afbeelding bijsnijden zodat deze vierkant wordt. Om dit te doen, selecteer ik het gereedschap Bijsnijden, schets het deel dat ik wil behouden en druk op Enter.
Dan moet je de afbeeldingen verkleinen tot 16 px. Selecteer hiervoor op de werkbalk Afbeeldingen - Afbeeldingsgrootte.
Stel de breedte en hoogte in op 16 px en klik op "OK".
Als je weet hoe je het Photoshop-programma moet gebruiken, kun je gemakkelijk een favicon maken voor een site met nul. Om dit te doen, maakt u een nieuw bestand met een breedte en hoogte van 16 px, tekent u daar iets en slaat u dit bestand op in iso-formaat.
Er zijn ook veel diensten op internet waar u een favicon voor uw site kunt downloaden. Dit zijn de meest populaire:
- www.audit4web.ru/info/favicon
- www.favicon.cc - reeds bekende service
- www.iconj.com
- www.favicon.co.uk/gallery.php
- thefavicongallery.com
- favicon-gallery.ru/gallery
Hoe maak je een favicon voor wordpress
Nadat je het favicon hebt gemaakt of gedownload, moet je het op de een of andere manier op de site verknoeien. Ik zal je nu laten zien hoe je dit doet op de wordpress engine.
Eerst moet je een pictogram uploaden naar de host op dit adres: wp-content / thema's / themanamen / afbeeldingen /
Ga daarna naar Configuratiescherm - Uiterlijk - Editor, open het header.php-bestand en voeg daar de volgende code toe, vóór de tag "/ head":
In deze code moet u wijzigen:
- site - voer uw domein in;
- BusinessBlog - voer de namen van uw onderwerp in;
- favicon.ico - voer de naam in van uw pictogram dat u naar de hosting heeft geüpload.
Sla nu uw wijzigingen op en kijk wat u krijgt:
Het kan zijn dat u na het updaten van de site geen wijzigingen ziet. Dit komt doordat de browser uw site niet vanaf de server laadt, maar vanuit de cache. Daarom heb je nodig.
En als je een caching-plug-in op je site hebt, bijvoorbeeld Super Cache, verwijder dan de cache daar ook.
Ververs vervolgens de pagina opnieuw en controleer op favicons. Nu zou het zeker moeten verschijnen als je het pad ernaartoe correct hebt geregistreerd op de hosting.
Ja, en nog iets. Yandex zal het pictogram niet onmiddellijk in zoekresultaten weergeven. U moet even wachten totdat de robot uw site opnieuw indexeert.
Nou, dat gaat nu allemaal over de vraag hoe je een favicon-ico voor de site kunt maken. Tot ziens aan iedereen.
Online pictogram-editors worden door velen niet serieus genomen, maar in feite vergemakkelijken dergelijke tools de workflow enorm. Slechts een paar klikken kunnen u uren aan zoeken, weergaven of zelfontplooiing besparen. Bovendien heeft het geen zin om volwaardige te gebruiken wanneer er speciale diensten zijn met aangescherpte functies voor deze specifieke taken.
Icon editor-sites zoals deze zijn zeer effectief. Ze stellen u in staat om:
- eenvoudig en snel nieuwe materialen maken;
- om de bestaande ontwikkelingen een compleet aanzien te geven;
- sla het resultaat op in verschillende formaten (SVG, ICO & PNG);
- maak pictogrammen voor.
In dit artikel hebben we vijf van de beste online gratis pictogram-editors geselecteerd en geprobeerd om in elk van hen een set te maken ter vergelijking.
PictogrammenFlow
IconsFlow.com - vectorpictogrammen + editor waarmee u gepersonaliseerde sets kunt maken en deze in hoge kwaliteit kunt exporteren (SVG, ICO & PNG). Het belangrijkste voordeel van de service is de aanwezigheid van twee editors:
- de belangrijkste, waarin het palet, de stijl en de effecten zijn geselecteerd;
- formuliereditor, waar u het huidige formulier kunt wijzigen of een nieuw formulier kunt tekenen.
Als u al pictogrammen in Illustrator hebt gemaakt, laadt u gewoon de SVG-bestanden en experimenteert u met verschillende achtergronden. IconsFlow heeft bepaalde beperkingen als het gaat om gratis gebruik, dus zorg ervoor dat je ze bekijkt voordat je begint. Voor beginnende gebruikers zijn er lessen en een helpsectie, daarnaast is er de mogelijkheid om in de pictogrameditor in het Russisch te werken.
IconsFlow vector editor weergave:
Werk voorbeelden:
Platte Pictogrammen
Met FlatIcons.net kunt u uw eigen platte pictogram (platte stijl) maken op basis van kant-en-klare sjablonen. Stel de afmetingen in, kies de afbeelding en de hoofdachtergrond (cirkels, ringen, rechthoeken), verander de kleur. Deze pictogram-editor is gratis, maar heeft twee nadelen:
- Ten eerste kunt u alleen PNG-bestanden downloaden.
- Ten tweede moet u elk object afzonderlijk maken, omdat: het is onmogelijk om in één keer een hele set te ontwikkelen.
Ondanks het feit dat het hoogtepunt van populariteit al voorbij is, gebruiken veel mensen ze in hun ontwerpen. De ontwikkelaars laten u bijvoorbeeld een gratis set sociale platte pictogrammen downloaden. Het resultaat van het werken in de FlatIcons-editor:
Launcher-pictogramgenerator
Het Launcher Icon Generator-project is gratis en we denken dat het meer geschikt is voor gevorderde gebruikers. Met deze online icon-editor kun je afbeeldingen / clipart uploaden en tekst toevoegen. U kunt één pictogram tegelijk downloaden in 5 formaten (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
Een set Material Design-graphics van GitHub wordt gebruikt als basisclipart. De service bevat instellingen zoals: inspringingen, vorm, achtergrondkleur of transparantie, schalen + extra effecten. Resultaat:
Android Material Icon Generator is een ander hulpmiddel voor het maken van platte pictogrammen. Het kenmerk van de service is absoluut het lange schaduweffect. Als u dergelijke oplossingen nodig heeft, is deze pictogrameditor de perfecte optie.
Begin met het selecteren van een afbeelding uit de galerij, definieer vervolgens de kleur, vorm van de achtergrond (cirkel of vierkant), schaduwlengte, verzadiging, vervaging - en uw pictogram is klaar. Alles is uiterst eenvoudig. Voor persoonlijk gebruik is de site volledig gratis.
Na het downloaden in het archiefbestand vindt u 6 PNG's van verschillende groottes en een vector SVG-bestand. In Illustrator is het SVG-pictogram wazig, maar gelukkig ziet het er goed uit in de browser. Je eindigt met zoiets als:
De Simunity-site is een op HTML5 gebaseerde generator waarmee u een pictogram kunt maken en vervolgens de code kunt kopiëren om deze in uw webprojecten weer te geven. Iconen van Font Awesome worden gebruikt als uitgangsmateriaal, waarvoor verschillende parameters worden geselecteerd: kleur, frame, grootte en stijl van schaduwen.
Deze service is handig als u snel eenvoudige originele pictogrammen voor uw website wilt maken. Het resultaat van het gebruik van Simunity:
Totaal. De hierboven besproken online icon-editors zijn uitstekende hulpmiddelen om het werk van ontwerpers te optimaliseren. Het heeft geen zin om programma's te downloaden als alles gemakkelijk en snel op het netwerk kan. Uit deze verzameling kunnen we misschien IconsFlow benadrukken. Het bevat zoveel mogelijk functies: pictogramgalerij, SVG-laden, insluitcode, voorbeeld, uw eigen sjablonen maken, PNG-, ICO- en SVG-export, formaat wijzigen, trendy stijlen en ingebouwde vectoreditor. Bovendien is dit de enige gratis pictogrameditor in het Russisch, als dat belangrijk voor je is.
Als u andere vergelijkbare services kent, stuur dan uw opties in de opmerkingen.
In deze les wordt het maken van een Favicon besproken, ontdekt u waar dit pictogram voor dient en krijgt u aanbevelingen over hoe u het uiterlijk en de aantrekkelijkheid ervan kunt verbeteren.
Daarnaast zullen we kijken naar het proces van het maken en toevoegen van een favicon voor de site.
favicon- dit is een klein pictogram dat u kunt zien in de adresbalk van de browser en op de tabbladen van geopende pagina's, evenals bij het toevoegen van een site aan de browserbladwijzers, dit pictogram wordt daar ook toegevoegd.
Bovendien geeft de Yandex-zoekmachine het Favicon-pictogram weer in de zoekresultaten naast uw site. Het is jouw taak om dit pictogram te laten opvallen, onthouden, opvallen tegen de achtergrond van andere pictogrammen in de zoekresultaten en ook enkele associaties hebben met je site. Een prachtig ontworpen en opvallende Favicon kan het aantal bezoeken aan uw site aanzienlijk verhogen in vergelijking met degenen die het niet hebben geïnstalleerd of er onaantrekkelijk uitzien.
Hier zijn enkele richtlijnen waarmee u rekening moet houden bij het maken van een Favicon.
#1. De badge moet gemakkelijk herkenbaar zijn en associaties hebben met uw site of de niche waartoe uw site behoort. Als pictogram kunt u een logo of symbool gebruiken dat aan uw site is gekoppeld. Daarnaast kunt u het kleurenschema gebruiken waarin uw website of logo is gemaakt.
# 2. Gebruik geen standaardpictogrammen. Velen verlaten, na het maken van een site op een bepaald CMS, het pictogram, niets, zonder te veranderen. Als gevolg hiervan bevatten de resultaten van de zoekmachine mogelijk niet één site met zo'n pictogram, maar veel. Hierdoor valt uw site op, dus gebruik alleen de unieke Favicon-pictogrammen die speciaal voor uw site zijn gemaakt. Dit omvat ook de situatie waarin iconen uit verschillende collecties of interface-elementen van andere sites worden gebruikt. Onthoud dat je een unieke favicon nodig hebt om op te vallen.
# 3. Probeer bij het maken van uw pictogram helderdere en lichtere kleuren te gebruiken, in de regel trekken ze meer aandacht.
#4. Gebruik geen geanimeerde pictogrammen. Ten eerste wordt animatie niet door alle browsers ondersteund en ten tweede moet de aandacht van de bezoeker gericht zijn op de inhoud en niet op het pictogram.
Laten we nu eens kijken naar het proces van het maken van een Favicon. Hier zijn veel diensten voor. Ze zijn echter meer geschikt voor degenen die al een kant-en-klaar icoon hebben dat ze ergens hebben opgelicht of uit een verzameling hebben gehaald. Maar zoals ik hierboven al zei, het pictogram moet uniek zijn, dus hier zal ik het proces van het maken ervan met Photoshop bekijken, waarbij ik de site als voorbeeld gebruik.
Een Favicon-voorinstelling maken in Photoshop
#1. Maak een nieuw document in Photoshop, grootte 64 * 64px, ga hiervoor naar het menu "Bestand" >> "Nieuw ..." of druk op de sneltoets Ctrl + N. Over het algemeen zou het pictogram zelf 16 * 16px moeten zijn, maar het is beter om het eerst van dezelfde grootte te maken en het vervolgens te verkleinen tot de vereiste grootte.
# 2. In mijn geval heb ik geen logo voor de site, dus heb ik besloten om het symbool "W" te gebruiken waarmee het siteadres begint, evenals de kleuren die bovenaan de site heersen, zijn blauw en geel. Dus ik heb de kleurwaarde ingesteld op # 6A91D0 en met behulp van het vulgereedschap (G) het eerder gemaakte document op blauw gezet.
# 3. Daarna selecteerde ik het Type Tool (T) en voegde een W toe en gaf het de volgende kleurwaarde # FAC31D.
Om het symbool meer op te laten vallen tegen de blauwe achtergrond, heb ik er een zwarte lijn van 2px aan toegevoegd. Ga hiervoor naar het menu-item Laag >> Laagstijl >> Lijn, kies een kleur en grootte voor de streek.
Daarna moet je de lagen samenvoegen, hiervoor moet je naar het menu-item gaan Laag >> Zichtbaar samenvoegen of druk op de toetscombinatie Shift + Ctrl + E.
Om de lijnen vloeiend en schreefloos te maken, heb ik een vervaging toegevoegd. Ga hiervoor naar het menu-item "Filter" >> "Vervagen" >> "Gaussiaans vervagen ..." en stel de straal in op 0,3 pixels.
Plaats je symbool of afbeelding zo dat deze zoveel mogelijk ruimte in beslag neemt, want als het klein is, dan valt het met een icoongrootte van 16*16 niet op.
#4. Nu moet je het pictogram verkleinen. Ga hiervoor naar het menu Afbeelding >> Afbeeldingsgrootte en stel de grootte in op 16 * 16px.
#5. Het blijft om het pictogram op te slaan. De Favicon moet de naam favicon en de extensie .ico hebben. Het feit is dat Photoshop standaard geen afbeeldingen in het .ico-formaat opslaat. Sla het daarom op in .png-formaat, ga hiervoor naar het menu-item "Bestand" >> "Opslaan als ..." en selecteer PNG in de vervolgkeuzelijst.
Een afbeelding converteren naar .ICO-indeling
Daarna converteren we het met behulp van de service naar het .ico-formaat. Ga naar deze service en gebruik de knop "Bladeren" om het eerder opgeslagen PNG-bestand te selecteren en klik vervolgens op de knop "Favicon.ico maken".
Daarna verschijnt de link "Download favicon.ico!" op de geladen pagina. door erop te klikken kunt u het voltooide Favicon-pictogram op uw computer opslaan.
Nu is het tijd om de Favicon aan uw site toe te voegen, zodat deze voor alle pagina's wordt weergegeven. Plaats hiervoor het pictogram in de hoofdmap van uw site. Als uw site al wordt gehost, wordt deze map meestal "public_html" genoemd. Dan, op elke pagina van uw site, vóór de afsluitende tag voeg de volgende regels toe:
Maar deze regels moeten aan elke pagina worden toegevoegd als u een HTML-site heeft. Maar aangezien uw site hoogstwaarschijnlijk is gemaakt op basis van een soort CMS, volstaat het om deze regels toe te voegen aan het hoofdbestand van uw thema dat u voor de site gebruikt.
Als je WordPress gebruikt, ga dan naar de wp-content / themes / folder-with-your-theme / find erin en open het header.php bestand, plak dan de vereiste regels en sla het bestand op.
Als u Joomla gebruikt, ga dan naar de sjablonen / map-met-uw-thema / en open het bestand index.php, voeg de benodigde regels in en sla op.
Sommige thema's in WordPress en Joomla hebben mogelijk al hun eigen paden naar het favicon.ico-bestand, verwijder ze in dit geval en vervang ze door uw eigen.
Als u een ander CMS gebruikt, doe dan alles naar analogie.
Op de paginatabs en in de adresbalk van de browser wordt uw pictogram onmiddellijk weergegeven, net als bij de Yandex-zoekresultaten, hier duurt het even voordat een speciale Yandex-zoekrobot uw pictogram vindt, waarna het wordt weergegeven in de Zoekresultaten.
Materiaal voorbereid door het project:
Een integraal onderdeel van moderne websites is de Favicon, waarmee u snel een bepaalde bron kunt identificeren in de lijst met browsertabbladen. Het is ook moeilijk om een computerprogramma voor te stellen zonder zijn eigen unieke label. Tegelijkertijd zijn sites en software in dit geval verenigd door een niet helemaal voor de hand liggend detail - beide gebruiken pictogrammen in het ICO-formaat.
Deze kleine afbeeldingen kunnen zowel met speciale programma's als met behulp van online services worden gemaakt. Trouwens, het zijn de laatste die veel populairder zijn voor dergelijke doeleinden, en we zullen in dit artikel een aantal van dergelijke bronnen met u bespreken.
Afbeeldingen zijn niet de meest populaire categorie van webservices, maar als het gaat om het genereren van pictogrammen, is er zeker veel om uit te kiezen. Volgens het werkprincipe kunnen dergelijke bronnen worden onderverdeeld in die waarin u zelf een afbeelding tekent, en sites waarmee u een reeds voltooide afbeelding in ICO kunt converteren. Maar eigenlijk bieden alle pictogramgeneratoren beide.
Methode 1: X-Icon Editor
Deze service is de meest functionele oplossing voor het maken van ICO-afbeeldingen. Met de webapplicatie kunt u het pictogram handmatig in detail tekenen of een kant-en-klare afbeelding gebruiken. Het belangrijkste voordeel van de tool is de mogelijkheid om afbeeldingen te exporteren met een resolutie tot 64x64.
Dus als u een hele set van hetzelfde type pictogrammen van verschillende groottes moet maken, zult u voor deze doeleinden niets beters vinden dan de X-Icon Editor.
Methode 2: Favicon.ru
Als je een 16x16 favicon voor een website moet genereren, kan de Russischtalige online service Favicon.ru ook een uitstekende tool zijn. Net als bij de vorige oplossing, kun je hier zelf een pictogram tekenen, elke pixel afzonderlijk inkleuren of een favicon maken van een voltooide afbeelding.
Als gevolg hiervan wordt een bestand met de ICO-extensie op uw pc opgeslagen, een afbeelding van 16 × 16 pixels. De service is perfect voor degenen die alleen een afbeelding naar een klein pictogram willen converteren. Het is echter helemaal niet verboden om verbeeldingskracht te tonen in Favicon.ru.
Methode 3: Favicon.cc
Vergelijkbaar met de vorige, zowel in naam als in werkingsprincipe, maar nog geavanceerdere pictogramgenerator. Naast het maken van normale afbeeldingen van 16x16, maakt de service het gemakkelijk om een geanimeerde favicon.ico voor uw website te tekenen. Bovendien bevat de bron duizenden aangepaste pictogrammen die gratis kunnen worden gedownload.
Als de Engelstalige interface je niet stoort, dan zijn er absoluut geen argumenten om met de vorige dienst te werken. Naast het feit dat Favicon.cc geanimeerde pictogrammen kan genereren, herkent de bron ook correct transparantie op geïmporteerde afbeeldingen, wat helaas de Russischtalige tegenhanger is.
Methode 4: Favicon.by
Een andere versie van de favicon-generator voor websites. Het is mogelijk om vanuit het niets een icoon te maken of op basis van een specifieke afbeelding. De verschillen omvatten de functie van het importeren van afbeeldingen van webbronnen van derden en een nogal stijlvolle, laconieke interface.
Over het algemeen zijn er geen verschillen in het werken met de services die al in dit artikel zijn besproken, maar de Favicon.by-bron gaat veel beter om met het converteren van afbeeldingen naar ICO's, en dit is vrij gemakkelijk op te merken.
Methode 5: Online-converteren
Waarschijnlijk kent u deze site al als een bijna allesetende online bestandsconverter. Maar niet iedereen weet dat dit een van de beste tools is om een afbeelding naar ICO te converteren. Aan de uitgang kunt u pictogrammen krijgen met een resolutie tot 256 × 256 pixels.
Zoals u kunt zien, is het maken van een ICO-pictogram met behulp van de Online-Convert-website helemaal niet moeilijk, en dit wordt gedaan in slechts een paar muisklikken.
