Programma om favicon online te maken. Een universele manier om favicons te maken. Waar een favicon uploaden zodat deze online is

Hallo lieve lezers! Het artikel van vandaag gaat over het maken van een favicon (favicon.ico) voor uw website. Uit het bericht leer je wat een favicon is, welke afmetingen dit pictogram heeft en waarom het op je blog moet worden gemaakt en geïnstalleerd. Bovendien biedt het artikel favicon-generators waarmee u in een paar minuten online een favicon kunt maken, evenals sites waar u kunt downloaden galerijen en verzamelingen van kant-en-klare favicons.

Laten we om te beginnen eens kijken wat een Favicon is, waarom is het nodig, misschien kun je helemaal zonder?

1. Wat is een favicon-pictogram en waar is het voor?

concept favicon komt van twee Engelse woorden Favorites Icon, die kan worden vertaald als icoon (kleine afbeelding) voor "favorieten". "Favorieten" is de naam van de bladwijzers in de basisbrowser van Internet Explorer. Ze zien er bijvoorbeeld zo uit in de Chrome-browser:

Voor elke bron is er een kleine afbeelding, zoiets als een mini . Mee eens dat het handiger is om niet de url-adressen van sites te bookmarken, maar hun kleine logo's - favicons. Trouwens, daarnaast wordt het favicon weergegeven in de adresbalk van de browser direct voor de URL van de geopende pagina van de site of in de titel van de bladwijzer:

favicon is een klein bestand (16×16 pixels) met de .ico-extensie (deze extensie wordt door besturingssystemen gebruikt om pictogrammen op te slaan). Bijna elke site heeft favicon.ico, ongeacht op welke hosting deze zich bevindt of welke engine/het thema het gebruikt. Met online favicon-generatoren en galerijen kun je in een paar minuten van elke afbeelding een pictogram maken, het helemaal opnieuw tekenen of een kant-en-klaar exemplaar downloaden, dus als je nog geen favicon op je blog gebruikt, repareer dan de situatie zoals spoedig mogelijk.

Waar is dit kleine plaatje voor? Ten eerste is het een mini-logo voor uw site, uw bezoekers zullen het beter onthouden. Daarom, als u besluit om het te maken, probeer er dan voor te zorgen dat het favicon de aandacht van bezoekers trekt en gemakkelijk te onthouden is. En ten tweede plaatst Yandex, de meest populaire zoekmachine in Runet, zijn favicon naast elke site in de resultaten, waardoor u uw bron kunt onderscheiden van anderen die geen pictogrammen hebben. Gebruikers bezoeken eerder die sites waar een afbeelding naast pronkt (het maakt niet eens uit welke), wat betekent dat het favicon dit toelaat.

Trouwens, Yandex heeft zelfs een speciale bot die geen inhoud op de site indexeert, maar alleen favicons van bronnen indexeert. Nadat je een favicon hebt gemaakt en op de site hebt geïnstalleerd, moet je even wachten totdat deze Yandex-bot het indexeert, en dit proces duurt meestal een week tot een maand. Er zijn drie manieren om te controleren of Yandex uw favicon heeft geïndexeerd:

• Typ het adres van uw site in het Yandex-zoekvak (bijvoorbeeld http://site) en kijk of er een favicon in de buurt is.
• Volg de link http://favicon.yandex.net/favicon/ website(waar u "site" moet vervangen door de URL van uw site). Als het pictogram is geïndexeerd, ziet u het.
• Ga naar Yandex.Webmaster (http://webmaster.yandex.ru) en controleer op favicon.ico

2. Online Favicon-generatoren en galerijen

We hebben dus al uitgezocht wat een favicon is, zo noodzakelijk voor de site. We hebben geleerd dat het 16 bij 16 pixels moet zijn en dat de extensie .ico moet zijn. Er zijn nu verschillende manieren om favicon.ico te maken:

1. Download een kant-en-klaar icoon uit de favicon-galerijen.
2. Maak een favicon helemaal opnieuw met Photoshop of een online generator.
3. Maak een favicon van de voltooide afbeelding (afbeeldingsafmetingen zijn niet belangrijk).

2.1 Favicon-collecties en galerijen

1. http://www.thefavicongallery.com/ — een kleine galerij met iconen van verschillende onderwerpen. Bevat ongeveer 300 afbeeldingen. Om de afbeelding die je leuk vindt te downloaden, moet je er met de rechtermuisknop op klikken en "opslaan als" selecteren en vervolgens de favicon op je computer opslaan.
2. http://www.iconj.com/- meer dan 3000 iconen voor elke smaak en kleur. Het is mogelijk om de afbeelding op te slaan in .gif of .ico formaat. U kunt zelfs de html-code van het pictogram nemen. Er zijn geanimeerde favicons. Het enige nadeel van de collectie is dat er maar 30 iconen op één pagina staan, waardoor je veel pagina's moet doorbladeren om de juiste afbeelding te kiezen.
3. http://www.favicon.cc/- een enorme verzameling favicons, maar er zijn slechts 20 stukjes op één pagina, het duurt lang om er doorheen te bladeren.
4. http://www.favicon.co.uk/- ook een goede galerij met veel favicons. Er zijn 144 pictogrammen op elke pagina, wat het browsen erg handig maakt. Favicons hebben verschillende thema's.
5. - een kleine verzameling (84 stuks) mini-afbeeldingen voor uw site.

2.2 Hoe maak je een favicon voor een website vanaf het begin

Het voordeel van het helemaal opnieuw maken van een favicon is dat het resulterende favicon uniek zal zijn, en uniciteit is erg belangrijk! Daarom is het beter om niet lui te zijn en 5-10 minuten te besteden aan het maken van je eigen favicons.

Er zouden geen problemen moeten zijn met het genereren van het pictogram, omdat: alles is hier duidelijk.

2.2.4 Favicon-Generator.org

Nog een goede online favicon-generator. Het is toegankelijk via deze link - http://favicon-generator.org/.

Ook met deze generator zouden er geen problemen moeten zijn. Op het scherm worden de functies van de online favicon generator vertaald.

2.3 Hoe maak je een favicon voor een site van een bestaande afbeelding

Als u niet helemaal opnieuw een favicon voor uw site wilt maken, kunt u een afbeelding gebruiken die de basis van het mini-logo wordt. In dit geval moet u van tevoren een afbeelding maken (bij voorkeur een vierkante, anders kan het patroon worden vervormd bij het maken van favicon.ico) en deze vervolgens gebruiken in de online service voor het genereren van favicon. Laten we eens kijken naar twee van de meest populaire bronnen.

2.3.1 Favicon.ru

De online generator is heel gemakkelijk te gebruiken, het kan elke afbeelding van elke grootte gemakkelijk omzetten in een klein pictogram van 16x16 pixels. Nu zult u zelf zien hoe gemakkelijk het is om deze service te gebruiken.

Er zijn twee manieren om een ​​afbeelding toe te voegen:

• Gebruik de knop "Bestand kiezen" om de gewenste afbeelding op de computer te zoeken en te uploaden.
• Voer het adres van de afbeelding op internet in het veld in (in dit geval staat dit bestand misschien niet eens op uw computer), en de service doet alles zelf.

Nadat het bestand is geüpload, hoeft u alleen maar op de " Maak favicon.ico aan!' en wacht een paar seconden. Vervolgens hoeft u alleen de favicon naar uw computer te downloaden.

2.3.2 Favicon.cc

Deze online generator is krachtiger dan de vorige, maar ook ingewikkelder dan hij. Volg de link om te beginnen - favicon.cc en klik vervolgens op "Afbeelding importeren" (in het linkervenster).

Klik vervolgens op de knop "Bestand kiezen" en upload de gewenste afbeelding. Op basis hiervan wordt een favicon voor uw site gemaakt. In dit geval moet u kiezen wat u met de afbeelding wilt doen wanneer deze wordt verkleind:

• Behoud afmetingen - laat de beeldverhouding van de afbeelding ongewijzigd.
• Pictogram verkleinen tot vierkant - breng de zijkanten van de afbeelding naar een vierkante vorm, terwijl de afbeelding vervormd kan zijn.

Na het uploaden van een foto kun je deze in de online generator bewerken of ongewijzigd laten. Als de resulterende favicon.ico bij u past, download deze dan naar uw computer.

3. Hoe installeer ik een favicon op een WordPress blog

Meestal bevindt het favicon zich in de hoofdmap van de site, bovendien is het handiger, dus we zullen deze optie overwegen. Dit gebeurt in twee stappen.

EERSTE STAP. Eerst moet je een regel html-code in het thema vinden die het pad naar het favicon aangeeft. Voor een WordPress-blog moet je het bestand header.php (Header) vinden en de regel vinden, het zou er ongeveer zo uit moeten zien (het kan enigszins verschillen, afhankelijk van het thema):

U moet deze regel vervangen door de volgende twee:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

BELANGRIJK! Deze regels moeten binnen de tags worden geplaatst En

TWEEDE STAP. Nu moet je een favicon toevoegen aan de hoofdmap van de site. Ga naar je hosting en plaats een bestand met de naam favicon.ico(formaat 16×16 pixels).

Als je alles goed hebt gedaan, heeft je site nu een eigen favicon.

Gegroet, beste bezoekers van mijn blog. Vandaag heb ik een selectie van 10 diensten voor je gemaakt die je zullen helpen om online een favicon te maken. En ook aan het einde van het artikel heb ik naar mijn mening de 5 handigste sites gemarkeerd.

Om te beginnen is het de moeite waard om te begrijpen wat een favicon is? Ik denk dat velen van jullie bekend zijn met dit concept, maar ik zal het je nog een keer vertellen. Kortom, het is het icoon van uw site. Bij het zoeken in Yandex zag je een klein 16x16-pictogram naast de site, dus dit is het favicon. Het is ook te zien in de adresbalk en in de bladwijzers van sommige browsers.

Deze kleine foto is in de eerste plaats uw merk. Mensen zullen je site er aan herkennen. Daarom moet het origineel en gedenkwaardig zijn, zodat het onmiddellijk zichtbaar is in Yandex-zoekopdrachten. Het is moeilijk om in je eentje zo'n klein icoontje te tekenen, en online diensten komen je te hulp die je zullen helpen om een ​​favicon van een foto te maken. Laten we een aantal van hen in volgorde bekijken en hun sterke en zwakke punten identificeren.

• Handig in gebruik.
• Het is mogelijk om van een foto een favicon te maken of deze zelf te tekenen.
• U kunt bestellen bij professionals.
• Voorbeeld van het resultaat.
• Ik denk dat ze er niet zijn, alles wat je nodig hebt staat op de site, ik kan alleen maar benadrukken dat er geen galerij met kant-en-klare pictogrammen is.

1. 
   

   • Het is mogelijk om van een foto te maken of deze zelf te tekenen.
   • Na generatie wordt een voorbeeld getoond van een link om aan de site toe te voegen.
   • Alles is in het Engels.
   • Lelijk ontwerp.
   • Het is niet mogelijk om een ​​afbeelding bij te snijden tijdens het maken.

2. 3 www.chami.com

3. 
   

   • Mooie gebruiksvriendelijke interface.
   • Het is mogelijk om van een foto een favicon te maken of deze zelf te tekenen.
   • Groot kleurenpalet om te tekenen.
   • Er is geen voorvertoning.
   • Alles is in het Engels.
   • Er is geen galerij met kant-en-klare pictogrammen.

4. 
   

   • Handige interface.
   • Niets extra's.
   • Er is geen galerij met kant-en-klare pictogrammen.
   • Je kunt niet zelf tekenen.
   • U kunt de afbeelding niet bijsnijden tijdens het genereren.

5. 
   

   • Handige mooie interface.
   • Niets extra's.
   • Het is mogelijk om zelf te tekenen of te genereren vanuit een afbeelding.
   • Er is een galerij met kant-en-klare pictogrammen.
   • U kunt de grootte van het pictogram behouden wanneer u het maakt, of het comprimeren.
   • Voorbeeld.
   • U kunt een geanimeerd pictogram maken.
   • Een enorm aantal kleuren om te tekenen.
   • Alles is in het Engels.

6. 
   

   • Er is keuze uit pictogramformaten 16x16 en 32x32.
   • Er zijn geen extra functies, alleen het maken van een favicon van een afbeelding.
   • Er is geen voorvertoning.

7. 
   

   • Voorbeeld.
   • Grote collectie kant-en-klare iconen.
   • Er is een optie om de afbeelding bij te snijden.
   • Alles is in het Engels.
   • Er staan ​​fouten op de site.
   • Onhandige interface.

8. 
   

   • U kunt de pictogramgrootte 16x16, 32x32, 48x48 en 64x64 kiezen.
   • Alles is in het Engels.

9. 
   

   • Niets extra's.
   • Het is mogelijk om de grootte van het pictogram te kiezen.
   • Je kunt jezelf tekenen of online een favicon maken van een foto.
   • Er is geen optie om de afbeelding bij te snijden.
   • Er is geen voorvertoning.

Ik heb je kennis laten maken met slechts 10 online services, maar er zijn er nog veel meer. Naar mijn mening zijn dit de meest populaire van allemaal. Als je andere gebruikt, schrijf ze dan in de opmerkingen, het zal voor mij en andere lezers interessant zijn om er meer over te weten te komen.

En nu, zoals beloofd, TOP-5 handige en hoogwaardige diensten, naar mijn mening.

Dit is mijn top vijf. Ik wil weten welke service u op de eerste plaats zet en welke op de laatste? Ik hoor graag de antwoorden in de reacties.

PS Als je nog geen favicon voor jezelf hebt bedacht, neem dan zeker een kijkje op de site faviconka.ru. Daarop vind je meer dan 2.000 kant-en-klare iconen voor elke smaak. Ik hoop dat het artikel nuttig voor je was en dat je je dienst hebt gevonden om online een favicon te maken.

Een integraal onderdeel van moderne websites is het Favicon-pictogram, waarmee u snel een bepaalde bron kunt identificeren in de lijst met browsertabbladen. Het is ook moeilijk om je 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 dankzij speciale programma's als met behulp van online services worden gemaakt. Overigens zijn de laatste voor dergelijke doeleinden veel populairder, en we zullen in dit artikel een aantal van dergelijke bronnen met u bespreken.

Grafisch werk is niet de meest populaire categorie van webservices, maar als het gaat om het genereren van pictogrammen, is er zeker genoeg om uit te kiezen. Volgens het werkingsprincipe kunnen dergelijke bronnen worden onderverdeeld in die waarin u zelf een afbeelding tekent, en sites waarmee u een reeds voltooide afbeelding in een 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 64×64.

Dus als u een hele set van hetzelfde type pictogrammen van verschillende groottes moet maken, zult u voor deze doeleinden niets beters vinden dan X-Icon Editor.

Methode 2: Favicon.ru

Als u een favicon-pictogram met een resolutie van 16x16 voor een website moet genereren, kan de Russischtalige online service Favicon.ru ook als een uitstekende tool dienen. Net als in het geval van de vorige oplossing, kun je hier zelf een pictogram tekenen, elke pixel afzonderlijk inkleuren of een favicon maken van de voltooide afbeelding.

Als gevolg hiervan wordt een ICO-bestand op uw pc opgeslagen, een afbeelding van 16 x 16 pixels. De service is perfect voor degenen die alleen een afbeelding naar een klein pictogram hoeven te converteren. Het is echter niet verboden om verbeeldingskracht te tonen in Favicon.ru.

Methode 3: Favicon.cc

Vergelijkbaar met de vorige, zowel in naam als in het werkingsprincipe, maar zelfs meer geavanceerde pictogramgenerator. Naast het maken van normale afbeeldingen van 16×16, maakt de service het gemakkelijk om een ​​geanimeerde favicon.ico voor uw site 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 service 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 optie voor favicon-pictogramgenerator voor websites. Het is mogelijk om vanuit het niets een icoon te maken of op basis van een specifieke afbeelding. Onder de verschillen kan men de functie van het importeren van afbeeldingen van webbronnen van derden en een nogal stijlvolle, beknopte interface onderscheiden.

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, 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 voor het converteren van afbeeldingen naar ICO. Als gevolg hiervan kunt u pictogrammen krijgen met een resolutie tot 256 × 256 pixels.

Zoals je kunt zien, is het maken van een ICO-pictogram met behulp van de Online-Convert-website helemaal niet moeilijk, en het is gedaan in slechts een paar muisklikken.

Een nieuwe les in de stijl van een workshop en deze keer leren we de geheimen van de favicon. favicon - een klein pictogram dat wordt weergegeven in bladwijzers en de browserbalk. Als u een eigen website heeft en zelfs in kleine dingen gunstig wilt vergelijken met anderen - favicon vereist. Het voordeligste is natuurlijk dat het tussen de bladwijzers staat, tegen de achtergrond van een vervaagde lijst met adressen zonder enige grafische identificatie. Onze les gaat echter niet zozeer over hoe je een favicon aan de browserregel bevestigt, maar over hoe je je eigen favicon tekent in Photoshop.

In welk formaat moet het favicon worden opgeslagen?

Het hangt allemaal af van de browser. Voor Microsoft Verkenner passend pictogramformaat ICO. Dit formaat kwamen we al tegen toen we de cursor maakten. Voor andere browsers van Google Chrome voordat Apple Safari normale pasvorm gif of PNG. favicon kan doorschijnend zijn. Om dit te doen, moet het worden opgeslagen in doorschijnend PNG en converteer vervolgens naar het formaat ICO. Je kunt het in een goed programma doen IcoFX. Er zijn echter veel sites van derden voor het genereren van een favicon, en de meest voor de hand liggende daarvan is www.favicon.ru

Hoe plaats je een favicon op een website?

Hoe weet je dat? favicon zal het werken? Er moet aan 4 voorwaarden worden voldaan.

• Het bestand moet worden genoemd - favicon.
• Favicon-grootte: 16 op de 16px
• De beste plaats voor een favicon is de hoofdmap van de site.
• Schrijf het adres van het pictogram in de metatags koptekst in de site-index.

In HTML ziet het er als volgt uit:

U kunt verschillende pictogrammen voor verschillende browsers maken, bijvoorbeeld één in de indeling ICO, en de andere in PNG en dit alles wordt aangegeven via de tag koppeling . Moderne browsers zoeken meestal zelf naar een bestand in de rootsite genaamd favicon, voor de zekerheid kan het echter geen kwaad om de exacte links aan te geven.

Maak een favicon in Photoshop

Creëren favicon erg makkelijk. Wil jij hetzelfde doen? favicon zoals Vkontakte of Odnoklassniki? Mooi zo favicon Je kunt het niet doen door grote afbeeldingen te verkleinen in allerlei "generators" van favicons, die overvloedig aanwezig zijn op internet. Het favicon is erg klein. Eigenlijk zijn we een soort van pixelkunst, die zijn eigen kenmerken heeft. Je kunt geen brief schrijven en het gewoon reduceren tot 16px .

Vind leuk favicon zal wazig en wazig zijn, omdat de randen van de letter een paar pixels groter worden wanneer het formaat wordt gewijzigd. word een beetje anti-alias, wat meestal een goede zaak is, maar in het geval van pixelart zijn dergelijke overgangen gewoon niet nodig. Aan de andere kant is het de moeite waard om buitensporige "gescheurde" rondheid te vermijden, anders worden hallo gifs 1999.

Maak een bestand van grootte 16 x 16px . We zullen een heel eenvoudige doorschijnende maken favicon met in de vorm van een brief, met een beetje diepte. De diepte wordt gecreëerd door de schaduw en het verloop.

Teken de achtergrond

Waarom zie je in de intro van deze les een enorme gladde en gelikte favicon? Omdat ik het verhoogd heb voor de intro van de les. Hoe ben ik erin geslaagd om de afbeelding te vergroten? 16px? Heel eenvoudig, ik werk altijd in vector als het mogelijk is om het te gebruiken en als het zinvol is. En de vector brengt gemakkelijk elke transformatie over en verliest niet aan kwaliteit.

Kies een hulpmiddel Tool Afgeronde rechthoek. Selecteer in het instellingenpaneel de modus waarmee u in vector kunt tekenen. Vink in het vervolgkeuzemenu van het paneel het vinkje aan - Snap naar pixels. Dit is nodig zodat vectorpaden naar pixels snappen en er niet "tussenin" tekenen.

We hebben een oppervlak favicon en doorschijnende randen zorgen voor een gladde ronding. Nu is het tijd om van de witte achtergrond af te komen, die hebben we niet nodig. Schakel de zichtbaarheid ervan uit. Of dubbelklik op de laag, maak er een gewone laag van en verwijder deze.