Service voor het maken van pictogrammen. Een afbeelding converteren naar .ICO-indeling. Favicon van een voltooide afbeelding

Deze les behandelt het maken van een favicon, je leert waarom dit pictogram nodig is en je krijgt aanbevelingen om het uiterlijk en de aantrekkelijkheid ervan te verbeteren.

Daarnaast zullen we kijken naar het proces van het maken en toevoegen van een Favicon voor een site.

Favicon- dit is een klein pictogram dat u kunt zien adresbalk browser en tabbladen pagina's openen, en ook wanneer u een site aan uw browserbladwijzers toevoegt, wordt dit pictogram daar ook toegevoegd.

Bovendien geeft de Yandex-zoekmachine een Favicon-pictogram weer in de zoekresultaten naast uw site. Het is uw taak om dit pictogram te laten opvallen, onthouden te worden, in het oog te springen tegen de achtergrond van andere pictogrammen in de zoekresultaten, en ook enige associaties met uw site te hebben. Een prachtig ontworpen en opvallende Favicon kan het aantal bezoeken aan uw site aanzienlijk verhogen in vergelijking met degenen die deze niet hebben geïnstalleerd of er onaantrekkelijk uitzien.

Hier volgen enkele richtlijnen waarmee u rekening moet houden bij het maken van een favicon.

#1. Het pictogram moet gemakkelijk herkenbaar zijn en verband houden met uw site of de niche waartoe uw site behoort. Als icoon kunt u een logo of symbool gebruiken dat een associatie met uw site oproept. Daarnaast kunt u gebruik maken van de kleurenschema

, waarin uw website of logo is gemaakt. #2. Gebruik niet standaard iconen

. Veel mensen verlaten, nadat ze een website op een of ander CMS hebben gemaakt, het pictogram zonder iets te veranderen. Als gevolg hiervan is het mogelijk dat de resultaten van de zoekmachine niet één site met een dergelijk pictogram bevatten, maar meerdere. Hierdoor zal uw site niet opvallen, dus gebruik alleen unieke Favicons die speciaal voor uw site zijn gemaakt. Hieronder valt ook de situatie waarin iconen uit verschillende collecties of interface-elementen van andere sites worden gebruikt. Onthoud: om op te vallen heb je een unieke Favicon nodig. #3. Probeer bij het maken van een pictogram helderder en te gebruiken lichte kleuren

In de regel trekken ze meer aandacht.

Laten we nu direct kijken naar het proces van het maken van een Favicon. Er zijn veel diensten hiervoor. 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 kijken naar het proces van het maken ervan met behulp van Photoshop-programma's, waarbij ik de site als voorbeeld gebruik.

Een vooraf ingestelde favicon maken in Photoshop

#1. Creëren nieuw document V Photoshop-formaat

64*64px, ga hiervoor naar het menu "Bestand" >> "Nieuw..." of druk op de toetsencombinatie Ctrl+N. Over het algemeen zou het pictogram zelf 16*16px moeten zijn, maar het is beter om het eerst even groot te maken en het vervolgens te verkleinen tot de gewenste grootte. #2. In mijn geval heb ik geen logo voor de site, dus besloot ik het “W”-symbool te gebruiken waarmee het siteadres begint, evenals de kleuren die bovenaan de site overheersen: blauw en geel. Dus ik heb de kleur ingesteld op # 6A91D0 en heb het emmergereedschap (G) gebruikt Blauwe kleur

eerder aangemaakt document.

#3. Daarna selecteerde ik het gereedschap Tekst (T), voegde een "W" -symbool toe en gaf het de volgende kleurwaarde #FAC31D. Om het symbool meer te laten opvallen blauwe achtergrond Ik heb er een streek van 2px aan toegevoegd met zwarte kleur. Om dit te doen, moet je naar het menu-item gaan"Laag" >> "Laagstijl" >> "Laag"

, selecteer de kleur en grootte van de lijn. Hierna moet je de lagen samenvoegen, hiervoor moet je naar het menu-item gaan"Laag" >> "Zichtbaar samenvoegen" of druk op combinatie Shift-toetsen

+ Ctrl + E. Om de lijnen vloeiend te maken zonder schreven, heb ik een vervaging toegevoegd. Om dit te doen, moet je naar het menu-item gaan"Filter" >> "Vervagen" >> "Gaussiaans vervagen..."

en stel de straal in op 0,3 pixels. Plaats uw symbool of afbeelding zo dat deze zoveel mogelijk ruimte in beslag neemt, want als dat zo is kleine maat

, en als de pictogramgrootte 16*16 is, zal dit niet opvallen. #4. Nu moet je de pictogramgrootte wijzigen. Om dit te doen, moet je naar het menu gaan

"Afbeelding" >> "Beeldformaat" en stel de grootte in op 16*16px.#5.

Het enige dat overblijft is het pictogram opslaan. Het Favicon-pictogram moet de naam favicon en de extensie .ico hebben. Het hele punt is dat

Photoshop-standaard Slaat geen afbeeldingen op in .ico-formaat. Sla het daarom op in .png-formaat, ga hiervoor naar het menu-item "Bestand" >> "Opslaan als..." en selecteer PNG uit de vervolgkeuzelijst. en gebruik de knop "Bladeren", selecteer het eerder opgeslagen bestand in PNG-indeling en klik vervolgens op de knop "Favicon.ico maken".

Hierna 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 een ​​Favicon aan uw site toe te voegen, zodat deze op alle pagina's verschijnt. Om dit te doen, plaatst u het pictogram in hoofdmap jouw site. Als uw site al wordt gehost, wordt deze map gewoonlijk "public_html" genoemd. Vervolgens 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, hoeft u deze regels alleen maar toe te voegen aan hoofdbestand uw thema dat u voor de site gebruikt.

Als u WordPress gebruikt, ga dan naar de map wp-content/themes/folder-met-uw-thema/, zoek en open het header.php-bestand, plak vervolgens de benodigde regels en sla het bestand op.

Als u Joomla gebruikt, ga dan naar de sjablonen/uw-thema-map/ en open het bestand index.php, plak de benodigde regels en sla op.

Sommige thema's in WordPress en Joomla hebben mogelijk al hun eigen paden naar het bestand favicon.ico. Verwijder ze in dat geval en vervang ze door uw eigen paden.

Als u een ander CMS gebruikt, doe dan alles naar analogie.

Op de paginatabbladen en in de adresbalk van de browser wordt uw pictogram onmiddellijk weergegeven, net als voor de zoekresultaten van Yandex, hier heeft u tijd nodig om te passeren en een speciale Yandex-zoekrobot om uw pictogram te vinden, waarna het verschijnt in de zoekresultaten.

Materiaal voorbereid door het project:

Favicon-generator - helpt u bij het converteren en bewerken van elke afbeelding, zodat deze in een favicon voor de site verandert. Vandaag is een artikel over de beste favicongenerator voor websites van vandaag.

Tegenwoordig is het moeilijk om je een website voor te stellen die geen favicon heeft. Een favicon is een pictogram dat zich in de adresbalk van de browser of in de venstertitel (afhankelijk van de browser) bevindt en dat de geopende site/tabblad onderscheidt van vele andere. Aanvankelijk werden deze pictogrammen in IE ontwikkeld om een ​​site in de bladwijzerlijst van de browser te markeren (in IE werden deze bladwijzers Favorieten genoemd), vandaar de naam Favicon - favorietenpictogram.

Maar een favicon met je eigen handen maken is niet zo eenvoudig. Het moet een ICO-formaat hebben, waarvoor speciale software nodig is om iets waardevols en aanzienlijke vaardigheden te kunnen doen. Om het leven gemakkelijker te maken, is het daarom beter om een ​​online favicongenerator te gebruiken.

Er zijn veel diensten waarmee je favicons kunt genereren uit afbeeldingen (dit kan een logo of een speciaal ontworpen illustratie zijn). Maar de meesten van hen hebben problemen met transparantie.

Transparantieproblemen met de favicongeneratorservice

Voor de duidelijkheid presenteren we de illustratie ‘Hoe verschillende favicon-generatoren transparantie en verkleining van de afbeeldingsgrootte verwerken.’

In deze vergelijking hebben we de resultaten gebruikt die zijn verkregen van de diensten favicon.cc en favicon-generator.org. Eerlijk gezegd gebruikten we tot voor kort zelf de service favicon.cc, maar onlangs werd een uitstekende vervanger gevonden: favicongenerator nr. 1.

De beste favicon-generator - www.xiconeditor.com

Net als favicon.cc heeft deze favicon-generator zijn eigen ingebouwde online pictogrameditor, maar het voordeel is dat wel goed werk met transparantie.

Het is vrij duidelijk dat er een verschil is in de kwaliteit van de transparantie (blijkbaar zit het verschil in de kwaliteit van het veranderen van de grootte van de geladen afbeelding).

Bovendien heeft xiconeditor.com nog een voordeel: een uitstekend favicon-previewsysteem, waarmee u het resultaat in verschillende gedaanten kunt bekijken zonder de gegenereerde favicon te downloaden. Hun preview is veel informatiever dan favicon.cc.

Nu is een persoonlijk sitepictogram - Favicon - een soort visitekaartje van elke webbron. Dit pictogram benadrukt het gewenste portaal niet alleen in de lijst met browsertabbladen, maar bijvoorbeeld ook in Zoekresultaten Yandex. Favicon vervult in de regel geen andere functies dan het vergroten van de bekendheid van de site.

Maak een pictogram voor eigen middelen heel eenvoudig: je zoekt een geschikte afbeelding of tekent deze zelf met behulp van grafische editor en comprimeer vervolgens de afbeelding naar de goede maat-meestal 16x16 pixels. Sla het resulterende resultaat op in het bestand favicon.ico en plaats het in de hoofdmap van de site. Maar deze procedure kan aanzienlijk worden vereenvoudigd met behulp van een van de Favicon-generatoren die op internet beschikbaar zijn.

De meeste webpictogrameditors bieden alles noodzakelijke hulpmiddelen om favicons te maken. In dit geval is het niet nodig om helemaal opnieuw een afbeelding te maken - u kunt een kant-en-klare afbeelding gebruiken.

Methode 1: Favicon.by

Russischtalige online favicongenerator: eenvoudig en visueel. Hiermee kunt u zelf een pictogram tekenen met behulp van het ingebouwde canvas van 16x16 en een minimale lijst met hulpmiddelen, zoals een potlood, gum, pipet en vulling. Er is een palet met alle RGB-kleuren en transparantie-ondersteuning.

Als u wilt, kunt u een voltooide afbeelding naar de generator uploaden - vanaf uw computer of een webbron van derden. De geïmporteerde afbeelding wordt ook op het canvas geplaatst en kan worden bewerkt.


Als resultaat krijg je een grafisch ICO-bestand genaamd favicon en een resolutie van 16x16 pixels. Dit icoon is al klaar om gebruikt te worden als icoon voor uw website.

Methode 2: X-Icon-editor

Een HTML5-browsertoepassing waarmee u gedetailleerde pictogrammen van maximaal 64x64 pixels kunt maken. In tegenstelling tot de vorige service heeft X-Icon Editor meer tekentools en elk ervan kan flexibel worden geconfigureerd.

Net als in Favicon.by kunt u hier een voltooide afbeelding naar de site uploaden en deze omzetten in een favicon, en indien nodig correct bewerken.


Als je de details wilt behouden van een afbeelding waarvan je een favicon wilt maken, is X-Icon Editor hier ideaal voor. De mogelijkheid om pictogrammen te genereren met een resolutie van 64x64 pixels is het belangrijkste voordeel van deze service.

Wat is een favicon?

Voor degenen die niet weten wat een favicon is, geven we je wat informatie waarmee je op weg kunt gaan. Een favicon is een klein pictogram van 16x16 of 32x32 pixels, meestal met een logo, de eerste letter van een merk of een karakteristieke afbeelding die het type bedrijf of het thema van de site weerspiegelt.

Waarom is een favicon belangrijk?

Het favicon voert de volgende functies uit:

Branding.

Identificatie van de site door de gebruiker (gebruiksgemak).

Geeft de site een professionele uitstraling.

Laten we de belangrijkste voordelen van het gebruik van favicons eens nader bekijken.

Merk herkenning

Favicon is als een kleine site-identiteit. Zoals vermeld in het inleidende gedeelte, helpt een favicon de gebruiker uw site te onthouden tussen de vele sites die ze hebben bekeken. Of het nu gaat om uw browsegeschiedenis, Google-zoekresultaten of de lijst met bladwijzersites in uw browser, met favicons kunnen gebruikers uw site gemakkelijk herkennen en openen.

Vertrouwen

Gebruikers hebben de neiging om online verkopers van goederen en diensten te beoordelen op basis van hoe professioneel hun website is. Nalatigheid in de vorm van het ontbreken van een favicon ( zoekmachines een site weergeven zonder favicon met een pictogram leeg document) kan gemakkelijk leiden tot verlies van vertrouwen, vooral wanneer gebruikers u vergelijken met uw concurrenten.

Herhaalbezoeken

Het is bekend dat mensen beter reageren op afbeeldingen dan op tekst. Laten we nu zeggen dat een bezoeker van uw site haast had toen hij deze voor het eerst bezocht en besloot er een bladwijzer van te maken, zodat hij later terug kon komen. Stel dat deze persoon vervolgens besluit uw site opnieuw te bezoeken en naar zijn bladwijzers gaat. Je hebt geluk als je een herkenbare favicon hebt, zoals de prominente en unieke G van Google, en gebruikers zullen je vinden. Als u geen favicon heeft, wordt u mogelijk zelfs uit uw bladwijzerlijst verwijderd.

Bespaart gebruikerstijd

Favicons besparen de gebruiker tijd die hij besteedt aan het identificeren van een site in bladwijzers, geschiedenis of andere plaatsen waar de browser een favicon plaatst voor snelle identificatie. Het maakt het leven van de gemiddelde bezoeker van uw site gewoon eenvoudiger.

SEO-voordelen

Als uw site een favicon heeft, bent u beter zichtbaar in de zoekresultaten dan sites die er geen hebben, en kunt u daarom meer bezoekers trekken.

Hoe maak je een favicon?

Er zijn veel tools waarmee je binnen enkele minuten een favicon kunt maken. Als u geen ontwerpvaardigheden heeft of niet weet hoe u dit moet doen, kunt u proberen een favicon te genereren met Logaster.

Volg hiervoor de stapsgewijze instructies:

Stap 5: Maak een favicon

Nu je een logo hebt, klik je op 'Maak een favicon met dit logo' op de logopagina.

Stap 6. Selecteer het gewenste favicon-ontwerp

Net als bij het logo zal Logaster enkele tientallen prachtige en gebruiksklare favicons genereren. Kies je favoriete ontwerp. Voorbeeld kunt u zien hoe uw favicon er op de site uit zal zien.

Als u de favicon wilt wijzigen, kunt u dit doen door het logo te bewerken, net zoals favicons worden gemaakt op basis van het logo-ontwerp. Dus als u bijvoorbeeld een andere faviconkleur wilt, moet u teruggaan naar de logopagina, de kleur wijzigen en vervolgens de favicon opnieuw maken.

Inspiratie voor favicons vind je op de volgende sites:

Stap 7. Download de favicon

Je kunt de favicon afzonderlijk kopen voor $ 9,99 of een Design Pack kopen dat niet alleen de favicon bevat, maar ook het logo, visitekaartje, envelop en briefpapier. Hier leest u hoe u een Design Pack kunt kopen.

Na betaling kun je de favicon downloaden in ico- en png-formaat.

Waar kan ik een favicon gebruiken?

Je kunt favicon gebruiken:

Op de site;

Mobiele toestellen. De gebruiker kan een favicon toevoegen thuis scherm uw apparaat (zoiets als een bladwijzer) - Android, IOS, Windows telefoon enzovoort;

Programma's en applicaties voor pc/Mac.

Hoe installeer ik een favicon op een website?

Nadat u de favicon heeft ontvangen, duurt het installeren op de server slechts enkele minuten en wordt in twee fasen voltooid. Om dit te doen heeft u toegang nodig tot de hoofdmap van uw site en een teksteditor om de HTML-code van de site te wijzigen.

Stap 1. U moet het favicon.ico-bestand naar de server uploaden. Om dit te doen, moet u een ftp-client downloaden en installeren, zoals FileZilla. Voer vervolgens uw gebruikersnaam en wachtwoord in en download het bestand. Meer gedetailleerde instructies hoe je een favicon-bestand uploadt, lees je hier.

Stap 2. Nu moet u de HTML-pagina van uw site bewerken, zodat browsers uw faviconafbeelding kunnen vinden. Bij open raam FTP, zoek en download het index.html- of header.php-bestand van de server.

Open het index.html-bestand in teksteditor- Kladblok, Kladblok++, Sublieme tekst.

Als uw site pure HTML, invoegen speciale code naar het HEAD-gebied van het index.html-bestand.

De code kan worden gekopieerd op de faviconpagina op de Logaster-website.

Als u WordPress gebruikt, plakt u de onderstaande code in het HEAD-gebied van uw header.php-bestand.

Zodra je dit hebt gedaan, download je het bestand terug naar waar je het vandaan hebt. Klaar! Laad de pagina van uw site opnieuw om de favicon te zien.

Meerderheid moderne browsers zijn behoorlijk slim en weten hoe ze een favicon-bestand kunnen vinden, zelfs zonder dergelijke code, maar alleen als de favicon een afbeelding van 16x16 pixels heeft, de naam favicon.ico is en wordt opgeslagen in hoofdmap jouw site.

We hopen dat dit artikel je wat heeft gegeven bruikbare informatie, waarmee u een favicon kunt maken die uw website succesvoller en aantrekkelijker maakt.

Hallo, beste lezers van de blogsite. Het gesprek in het artikel van vandaag gaat over de zogenaamde Favicon.ico-iconen. We zullen uitzoeken wat een favicon is en waarom verplicht u moet het op uw website installeren en zelf een pictogram van de gewenste grootte maken.

Voor het maken van een favicon is het in principe helemaal niet nodig om speciale online generatoren te gebruiken, hoewel het best handig en eenvoudig is. Je kunt proberen het in Photoshop te maken, maar standaard kunnen er helaas geen afbeeldingen in het ICO-formaat worden opgeslagen. Om Photoshop met ICO te leren werken, moet u daarom een ​​speciale plug-in installeren.

Maar als u niet vertrouwd bent met Photoshop (en ook niet met Photoshop), dan is het veel handiger voor u om een ​​van de vele hieronder genoemde online diensten te gebruiken. Bovendien kun je in sommige ervan helemaal opnieuw tekenen nieuw icoon, en in andere kun je een afbeelding die je al hebt (wat bij je past) omzetten in een favicon-formaat.

De eenvoudigste optie is om de Favicon-collectie van sommigen te downloaden online galerijen of catalogus. Lees hieronder waar u deze kunt verkrijgen.

Hoe u online een Favicon maakt en waar u een verzameling ervan kunt downloaden

Laat ik eerst voorbeelden geven van diensten (de zogenaamde favicon-generator), waar u, zonder speciale vaardigheden, een heel degelijk mini-logo voor uw website kunt ontwerpen, of op zijn minst automatisch een geschikte afbeelding kunt converteren naar het formaat dat nodig is om een ​​favicon naar de site te uploaden.

  1. Faviсon.cc– een behoorlijk handige online favicon-generator. Hiermee kunt u bijvoorbeeld uw eigen pictogram helemaal opnieuw maken (volledig exclusief) en deze pixel voor pixel tekenen. Om dit te doen, moet u op de knop "Nieuwe Favcon maken" aan de linkerkant van het servicevenster klikken.

    In het midden van de generatorpagina bevindt zich een gebied waar elk vierkant een pixel is van uw toekomstige favicon. Jouw taak is om te schilderen verschillende kleuren deze vierkanten. Om één vierkant met kleur te schilderen, moet u het vakje aan de rechterkant van het servicevenster in het veld "Kleurkiezer" aanvinken en het selecteren in het palet dat zich daar bevindt gewenste kleur en klik op het gewenste vierkant. Om onjuiste arcering te verwijderen, vinkt u het vakje “transparant” aan en klikt u op het vierkant, waardoor het kleurloos (transparant) wordt.

    Om een ​​pixel over het generatorcanvas te verplaatsen, moet u het vakje ‘verplaatsen’ aanvinken. Het resultaat van zijn inspanningen in echte schaal u kunt observeren in het gebied "Voorbeeld" onder het canvas. Als de door u gemaakte Favicon bij u past, klik dan op de knop “Downloaden” om deze op uw computer op te slaan. Als resultaat ontvangt u een grafisch bestand dat u vervolgens kunt downloaden en uploaden naar de hostingserver.

    Nu weet u hoe u helemaal opnieuw een mini-logo voor uw website kunt maken. Maar als u geen grafisch talent heeft, kunt u de online generatorservice gebruiken upload een afbeelding voor de toekomstige favicon, die als blanco zal dienen. De afbeelding kan absoluut elk formaat en formaat hebben. Om het pictogrambestand naar de online service te uploaden, moet u op de knop “Afbeelding importeren” aan de linkerkant van het servicevenster klikken.

    In het geopende venster klikt u op de knop “Bladeren” en zoekt u een geschikte afbeelding op uw computer. Kies vervolgens wat u met de beeldverhouding van uw afbeelding wilt doen bij het converteren naar 16 bij 16 (vierkant). Dit is het geval als de afbeelding die u uploadt niet vierkant is. In dit geval zijn er twee opties mogelijk: de beeldverhouding ongewijzigd laten (Afmetingen behouden), of de afbeelding omzetten naar een vierkante weergave (pictogram Verkleinen tot vierkant). In het tweede geval zal het beeld van de toekomstige favicon langs een van de assen worden vervormd.

    Om naar de online generator te uploaden en uw afbeelding te converteren, moet u op de knop “Uploaden” klikken. De Favicon.ico die hiervan is gemaakt, kan op dezelfde manier worden bewerkt als degene die u tekende. Wanneer u klaar bent met het werken aan uw meesterwerk, klikt u op de knop "Downloaden" om het naar uw computer te downloaden.

    Deze online dienst biedt ook de mogelijkheid om faviconcollecties te gebruiken die door andere gebruikers zijn gemaakt en waarop deze zijn geplaatst algemene toegang. Om de beschikbare exposities in de galerij te bekijken, moet u aan de linkerkant van het venster op de knop 'Nieuwste favicons' klikken om de collecties te bekijken, gesorteerd op aanmaakdatum, of op de knop 'Best beoordeelde favicons' om ze te bekijken. galerijen gesorteerd op beoordeling.

  2. Favicon.ru– ooit was deze dienst veel eenvoudiger dan de hierboven beschreven online generator, maar De laatste tijd het is praktisch zijn analoog geworden, maar alleen in het Russisch. Met Favicon.ru kun je niet alleen elke afbeelding die je hebt (op je computer of op internet) converteren naar het ICO-formaat met een grootte van 16 bij 16 pixels, maar het maakt het ook mogelijk om deze pixel voor pixel helemaal opnieuw te tekenen.

    Deze optie online favicon generator is misschien alleen opmerkelijk omdat hij binnenlands is. Daarom kwam hij in dit artikel terecht. Dus om ermee te werken, moet je dat doen Startpagina klik bovenaan op de knop "Bestand selecteren" en geef het pad op gewenst beeld op jouw computer. De gedownloade en geconverteerde afbeelding naar het Favicon.ico-formaat kan worden gecorrigeerd en vervolgens op uw computer worden opgeslagen. Alles is eenvoudig en handig.

  3. Logaster.ru is een online logogenerator, maar creëert naast logo's ook een favicon. In tegenstelling tot alle andere diensten hoeft u geen favicon-ontwerp te tekenen of dit van een logo te converteren.

    Om een ​​favicon aan te maken, moet u eerst de naam van de site of het bedrijf invoeren en het type activiteit selecteren. De dienst biedt enkele tientallen favicon-sjablonen die klaar zijn voor gebruik. Lees meer over hoe je een favicon maakt. Nadat u Favicon.ico heeft aangemaakt, kunt u het bestand in ICO- of PNG-indeling naar uw computer downloaden.

Daarna hoeft u alleen maar op de knop "Maken" te klikken. Op de geopende pagina ziet u een link waarmee u de resulterende favicon kunt downloaden.

Een selectie van online generators, collecties en galerijen met favicons

Als je om de een of andere reden de hierboven beschreven favicon-generator niet leuk vindt, dan kan ik je aanraden je geluk te beproeven op een van de volgende gratis onlinediensten:

  1. FaviconGenerator - hiermee kunt u converteren naar vereiste formaat favicon elke afbeelding die u van uw computer hebt gedownload (u kunt afbeeldingen uploaden).
  2. AntiFavicon - best interessant Favicon-generator. Daarop kun je maak een favicon met een inscriptie. U moet de tekst van de inscriptie invoeren in de velden "Bovenste tekst" en "Onderste tekst" en het kleurenschema aanpassen in het gebied "Kleuren".
  3. FavIcon van Pics is een andere eenvoudige online service: u specificeert het pad naar de afbeelding op uw computer, converteert en downloadt het resulterende bestand in ICO- en GIF-formaat.
  4. Iconj - wat opmerkelijk is, is dat je het gemaakte pictogram kunt downloaden of op de service kunt laten staan ​​en een link naar dit bestand kunt ontvangen
  5. DeGraeve is een redelijk krachtige Favicon Generator, vergelijkbaar in functionaliteit met de eerder beoordeelde Favicon.cc. Ook hier kun je alles vanaf het begin doen, of een afbeelding uploaden, die later kan worden aangepast en gedownload in ICO-formaat van een geschikt formaat.
  6. Generator - hiermee kunt u zowel een favicon genereren op basis van een geüploade afbeelding als deze helemaal opnieuw maken in een speciale editor.
  7. Online pictogrameditor favicon.ico - nou ja, het doet het eigenlijk allemaal - helemaal opnieuw favicons maken en een bestaande afbeelding wijzigen.
  8. Online favicon - heel erg functioneel hulpmiddel voor het maken en bewerken van mini-logo's
  9. Gratis Favicon Generator - voor het geval niets uit de bovenstaande lijst bij u past.
  10. Favicon-generator - eenvoudig en smaakvol...

Als je de exclusiviteit van je mini-logo voor de site niet belangrijk vindt, en je kunt niet sleutelen aan editors en generatoren, dan kun je zelf een geschikt pictogram kiezen op sites waar ze dertien in een dozijn zijn. In feite zal absoluut elk pictogram van 16 bij 16 pixels, dat u van internet kunt downloaden of diep in uw computer kunt vinden, bij ons passen.

Maar je moet niet vergeten dat de favicon in de eerste plaats de aandacht van gebruikers moet trekken. Idealiter zou een gebruiker uw site kunnen herkennen door alleen maar naar de Favicon te kijken, dus het is beter als deze uniek is, maar u kunt ook op internet zoeken naar iets buiten de gebaande paden.

Als je niet de wens of de mogelijkheid hebt (je bent geen kunstenaar en dat ben je ook nooit geweest), dan is de eenvoudigste manier om te zoeken in galerijen met collecties gratis favicons:

  1. Pictogramgalerij voor de site favicon.ico - meer dan 15.000 mini-logo's voor uw site voor elke smaak en kleur
  2. Iconj is een vrij grote verzameling iconen die door andere mensen zijn ontworpen en voor het publiek beschikbaar zijn gesteld
  3. Favicon.cc - 55 duizend verschillende opties voor alle gelegenheden. Er zijn ook geanimeerde favicons, die alleen zichtbaar zijn in de FireFox-browser.
  4. De Favicon-galerij - nog een paar pictogrammen die bij het formaat passen

Als u andere soortgelijke bronnen kent, zal ik uw links aan deze lijst toevoegen.

Hoe u een Favicon op een website installeert en het pad ernaartoe specificeert

Uw browser en Yandex-zoekrobot zullen dat doen zoek de favicon voornamelijk in de hoofdmap van uw site. Daarom kunt u eenvoudig via FTP verbinding maken met de site en deze ernaar uploaden. hoofdmap(meestal zijn dit de mappen public_htm of htdocs) uw Favicon.ico-bestand (het is beter om de naam met een kleine letter te schrijven). Open nu uw bron in een browser en kijk of het pictogram op het tabblad is veranderd. Is het veranderd? Nee? Nou, dat is oké.

Lukt het je niet om op deze manier een favicon te plaatsen, dan moet je dat misschien wel doen, want... het komt vaak voor dat het vanuit de cache wordt geladen oude versie. Je kunt het proberen, voor mij reageert het het beste op aangebrachte wijzigingen zonder de cache te wissen. Als het probleem niet in de browsercache zit, betekent dit dat uw site heeft een andere locatie voor de favicon, anders dan de hoofdmap. Hoe kan ik dit controleren?

Open de broncode van een willekeurige pagina op uw site. Om de broncode te bekijken, klikt u gewoon op de pagina klik met de rechtermuisknop muis en selecteer het juiste item contextmenu(Bijvoorbeeld, " Bron"V oude Opera, of “Paginabroncode” in Mazila Firefox, of “Paginacode bekijken” in Google Chrome of “HTML-code bekijken” in IE) of druk op de toetsencombinatie Ctrl+U. Kijk nu bovenaan de paginacode naar een regel die het pad naar favicon.ico specificeert.

Het zou er ongeveer zo uit kunnen zien:

Nu u dit pad kent, kunt u opnieuw verbinding maken met behulp van FTP-protocol en upload uw favicon naar het opgegeven pad, ter vervanging van het pad dat al op de site staat. Als er opnieuw geen wijzigingen zijn opgetreden in de adresbalk van de browser, probeer dan opnieuw de browsercache te wissen.

IN Joomla Favicon bevindt zich meestal in de map met het sjabloon dat u gebruikt (het pad ernaartoe in Joomla 1.5 werd geschreven in het index.php-bestand uit de map van hetzelfde sjabloon, maar in Joomla 3 werd alles een beetje ingewikkelder). Die. Om de favicon in Joomla te wijzigen, hoeft u alleen maar dit pad te volgen en uw favicon.ico-bestand daar te uploaden, en de vraag over vervanging bevestigend te beantwoorden:

/templates/map_met_de_ontwerp_sjabloon/favicon.ico

Favicon-bestand in WordPress standaard kan het ook in de map staan ​​met het thema dat je gebruikt (het pad ernaartoe wordt daar ook ingesteld):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Over het algemeen, als je wilt stel of wijzig het pad naar uw favicon, wat door zowel browsers als de Yandex-zoekrobot zou worden begrepen, dan moet je het in het juiste bestand schrijven Joomla-sjabloon, WordPress of een andere engine, tussen de openings- en sluitingstags HOOFD, de volgende regels code:

In welk sjabloonbestand u deze regels moet schrijven, hangt af van de engine van uw site. Bijvoorbeeld, binnen op WordPress je moet het header.php-bestand openen om te bewerken: wp-content/themes/Folder_with_your_theme_design. Open header.php in de editor en zoek helemaal aan het begin de openings-HTML HEAD-tag. Schrijf op een willekeurige plaats erna, maar vóór de afsluitende HEAD, een van de bovenstaande regels code die het pad naar uw grafisch bestand mini-logo.

Hoe installeren geanimeerde favicon? Eigenlijk precies hetzelfde als een gewone. Het enige verschil is de code die in uw sitesjabloon is ingevoegd, waarmee u browsers en zoekrobot Yandex-pad naar het gewenste grafische bestand. Het punt is dat het een geanimeerde Favicon zal zijn GIF-extensie, en daarom moet je in de coderegels zoiets als dit schrijven:

Dat is het hele verschil tussen geanimeerde favicons en gewone favicons. Maar houd er rekening mee dat het geanimeerde pictogram alleen in FireFox werkt; het zal statisch zijn. Yandex converteert deze bij het laden van uw geanimeerde favicon naar een statische favicon PNG-formaat. Maar naar mijn mening is het de moeite niet waard: het installeren van een geanimeerd logo in plaats van een gewoon mini-logo voor een site heeft niet zoveel zin. Maar dat is slechts mijn IMHO.

Veel succes! Tot binnenkort op de pagina's van de blogsite

Je kunt meer video's bekijken door naar te gaan
");">

Misschien ben je geïnteresseerd

Website-analyse in gratis online diensten Pr-cy, Cy-pr, Be1, Xseo en anderen
Bruikbaarheid - hoe u uw website handig kunt maken voor bezoekers en hoe u ze zo lang mogelijk uw artikelen kunt laten lezen
Online FTP-client Net2ftp en Google-meldingen - nuttige diensten voor webmasters
Pictogrammen, badges, achtergronden, afbeeldingen en logo's voor de site (online services IconFinder, Freepik, PSDGraphics en anderen)