Verkkosivustollesi brändin kehittämisstrategia on tärkeä muutettaessa kävijöitä asiakkaiksi. Mitään pieniä yksityiskohtia ei pidä unohtaa. Tähän sisältyy tarve luoda favicon-kuvakkeet, ja ilmainen favicon-generaattori voi auttaa sinua tekemään niitä.
Faviconit ovat pieniä kuvakuvakkeita, jotka näkyvät verkkosivuston otsikon vieressä selainikkunan välilehdessä.
Koska voit käyttää niitä myös työpöytäsovelluksen kuvakkeina, tarvitset ainakin muutaman erikokoisen, jotka voidaan sisällyttää favicon ICO-tiedostotyyppiin. Useimmissa tapauksissa voit asettaa PNG-tiedoston myös favicon-kuvakkeeksi.
Faviconit ovat välttämättömiä, koska käyttäjät etsivät jatkuvasti tietoja useilta verkkosivustoilta kerrallaan välilehdillä. Faviconit auttavat käyttäjiä tunnistamaan sisällön ja tuotemerkin nopeammin houkuttelevamman käyttökokemuksen saamiseksi.
Joten tässä on 15 ilmaista favicon-generaattorin online-työkalua sekä lisätietoja favicon-kuvakkeiden luomisesta ja asentamisesta.
Kaivataan sisään.
Contents
- 1 Favicon-generaattorin ICO-tiedoston parhaat käytännöt
- 2 Parhaat ilmaiset Favicon-generaattorit: Online-työkalut
- 2.1 1) Favicon.io
- 2.2 2) Favicon-Generator.org
- 2.3 3) Oikea Favicon-generaattori
- 2.4 4) Favicon.cc
- 2.5 5) FaviconGenerator.com
- 2.6 6) Favicomatic
- 2.7 7) Ionos Favicon -generaattori
- 2.8 8) Verkkosivusto Planet Favicon Generator
- 2.9 9) RedKetchup Favicon -generaattori
- 2.10 10) Genfavicon
- 2.11 11) FavIcon.pro
- 2.12 12) Faviconr
- 2.13 13) ICOConvert
- 2.14 14) Wizlogo Favicon -generaattori
- 2.15 15) FavICO
- 3 Kuinka asentaa Favicon-kuvake
- 4 Käärimistä
Favicon-generaattorin ICO-tiedoston parhaat käytännöt
Kun haluat luoda favicon-kuvakkeita, ensimmäinen askel on oppia niistä enemmän, mukaan lukien heidän vaatimukset ja parhaat käytännöt.
Termi “favicon” on ”suosikkikuvakkeen” portmanteau. Nämä olivat kuvakkeita, jotka aivan kuten tänään, esitettiin verkkosivustolla selaimen yläosassa.
Paitsi, ne näkyivät alun perin, kun käyttäjä lisäsi verkkosivuston suosikkeihinsa. Nykyaikaiset selaimet viittaavat tähän kansioon kirjanmerkkeihisi.
Favicon-kuvakkeen on oltava tietyn kokoinen. Muussa tapauksessa selaimet ja laitteet eivät käytä niitä.
Tarvittavat vähimmäiskoko ovat:
- 16 × 16 pikseliä selaimille
- 32 × 32 pikseliä työpöydän tehtäväpalkissa
- 96 × 96 pikseliä työpöytäsovelluksen favicon-kuvakkeille
- 180 × 180 pikseliä iOS- ja Android-laitteille
Muista, että voit valita välillä 16 × 16 px ja 32 × 32 px. Jos et ole liian huolissasi tuotemerkistä, yhden näistä kuvakokoista riittää.
Katso lisätietoja Favicon-huijari.
Kun teet favicon-kuvakkeen, on hyvä idea noudattaa myös näitä parhaita käytäntöjä:
- Niiden tulisi olla yksinkertaisia eikä liian tyyliteltyjä, jotta ne olisivat helppo nähdä pienissä koossa.
- Valitse yksi tai kaksi väriä värimaailmalle. Korkeintaan enintään kolme väriä.
- Favicon-kuvakkeiden tulee olla joko 8-bittisiä tai 24-bittisiä värejä.
- Favicon-kuvakkeiden muotoilu ei saisi sisältää paljon rivejä tai kirjaimia.
- Vaikka taustalla voi olla läpinäkyvä tausta, on tärkeää huomata, että Apple-laitteet eivät salli sitä.
- Favicon-kuvakkeiden tulee vastata nykyistä tuotemerkkiäsi ja logoasi.
Luo nopeasti logo, jos sinulla ei ole sellaista
Kuten aiemmin mainittiin, on hyvä idea kiinnittää favicon-kuvake tuotemerkkiisi ja nykyiseen logoon. Jos sinulla ei ole jo sellaista, voit tehdä sen nopeasti esimerkiksi TailorBrand-logovalmistaja.
Se voi luoda sinulle logon AI: n avulla. Kun olet vastannut joihinkin yksinkertaisiin ja nopeisiin kysymyksiin haluamastasi logotyypistä, mukaan lukien kirjasin, ja rekisteröityessään ilmaiseksi tilille, syntyy useita korkealaatuisia, ammattimaisia ja moderneja logoja.
Jos löydät haluamasi logon, voit päivittää premium-tiliin ladataksesi sen. Voit kuitenkin ladata favicon-kuvakeversion logosta ilmaiseksi.
Olemme ilmoittaneet 15 ilmaista online-logonvalmistajaa, jos haluat tutustua myös muihin vaihtoehtoihin.
Parhaat ilmaiset Favicon-generaattorit: Online-työkalut
Jos haluat luoda omia favicon-kuvakkeita, jotka ovat yksinkertaisempia, tai haluat vain lähettää kuvan ja saada sen sopivan kokoiseksi ja muuntaa ICO-kuvatiedostoksi, tässä on useita ilmaisia favicon-generaattoreita.
Ne eivät ole erityisessä järjestyksessä, koska ne ovat kaikki hienoja vaihtoehtoja, joilla voit luoda favicon-kuvakkeen muutamalla napsautuksella. Kun olet tehnyt favicon jollain näistä online-vaihtoehdoista, he voivat ladata ja käyttää ilmaiseksi.
1) Favicon.io
Tällä ilmaisella favicon-generaattorilla voit luoda favicon-kuvakkeita tekstistä, kuvasta tai hymiöstä.
Tekstipohjaisella vaihtoehdolla voit valita taustan värin ja muodon, fonttiperheen ja koon sekä fontin värin. Favicon-generaattori käyttää Google-fontteja, joissa on saatavilla yli 800 kirjasinta.
Vaihtoehtoisesti voit lähettää tiedoston favicon-generaattorille muuntaaksesi sen sopivaan kokoon. Tai voit ladata hymiöpikakuvake jättimäisestä vaihtoehtoluettelosta.
Luotu favicon toimii kaikilla selaimilla ja useilla alustoilla.
2) Favicon-Generator.org
Tämä ilmainen favicon-generaattori antaa sinulle mahdollisuuden ladata kuvatiedosto ja valita selainten vakiokoko 16 × 16 px tai isompi koko, joka sopii Androidille, Microsoftille ja iOS: lle..
Sinulla on mahdollisuus säilyttää nykyiset kuvan mitat sen sijaan, että koon pienentäminen neliöksi. Muista vain, että pitämällä tämä vaihtoehto valittuna tai valittuna voi vääristää suosikkisi lopputulosta.
Joten on parasta varmistaa, että kuvasi on jo melko lähellä neliötä.
3) Oikea Favicon-generaattori
Tämä ilmainen favicon-generaattori on melko ainutlaatuinen, koska se on yksi harvoista luettelossa, joka sisältää selaimen simulaattorin esikatselun osan, jotta voit nähdä, miltä favicon-kuvake näyttää, kun se on mitoitettu ja muunnettu.
Voit myös saada kokoja kaikille selaimille, alustoille ja useimmille tekniikoille.
Tällä favicon-generaattorilla on kuitenkin vain mahdollisuus valita kuva muunnettavaksi favicon-kuvakkeeksi.
4) Favicon.cc
Tämän ilmaisen favicon-generaattorin avulla voit joko ladata kuvan favicon-kuvaan tai voit luoda oman favicon-kuvakkeen piirtämällä yhden hiirellä.
Voit valita värit, joita haluat käyttää värinvalitsimella, tai vaihtaa favicon-kuvakkeen läpinäkyvyyttä.
On myös mahdollisuus luoda favicon-kuvakkeita animaatiolla. Käytettävissä ovat myös asetukset, kuten animaation asettaminen silmukkaan, muokkaaminen ja poistaminen.
Tällä favicon-generaattorilla on myös esikatselutila, joten voit nähdä, miltä favicon näyttää, kun se on valmis.
5) FaviconGenerator.com
Tämä on yksinkertainen ilmainen favicon-generaattori, jossa voit ladata kuvan ja valita sen koon, jonka haluat. Se on hyvin yksinkertainen, mutta hyvä vaihtoehto, kun haluat tehdä favicon-kuvakkeen nopeasti ilman, että tarvitset asioita ja vaihtoehtoja.
Tämän generaattorin avulla voit myös tehdä verkkokalvopetoksia, jotka toimivat Apple-kosketuslaitteiden kanssa. Se vaatii vähän ylimääräistä työtä, mutta kaikki ohjeet ovat yksityiskohtaiset heidän verkkosivullaan.
6) Favicomatic
Favic-o-Matic tuottaa favoneja, sekä ICO: ta että PNG: tä (myös läpinäkyviä).
Voit lähettää kuvan tällä ilmaisella favicon-generaattorilla ja valita sitten, lataanko 16 × 16 ja 32 × 32 pikselin ICO-tiedosto vai sisällytetäänkö eri kokoja, jotka ovat yhteensopivia kaikkien laitteiden kanssa.
On myös lisäasetuksia, kuten mahdollisuutta muokata taustaväriä ja joitain lisäyhteensopivuusvaihtoehtoja.
7) Ionos Favicon -generaattori
Ionos Favicon -generaattorin avulla voit piirtää favicon-kuvakkeen, käyttää nimikirjaimia tai lähettää kuvan, jota haluat käyttää faviconin tekemiseen.
Tuloksena on suosikki, joka toimii kaikilla selaimilla ja laitteilla. Siinä on myös mukava esikatselualue, jolla voit nopeasti nähdä, miltä faviconisi näyttää liveltä.
8) Verkkosivusto Planet Favicon Generator
Tämä ilmainen favicon-generaattori tarjoaa vaihtoehdot ladata kuva (joko JPG, PNG tai GIF) tai valita ilmaisesta esivalmistettujen faviconien galleriasta.
Voi olla tärkeätä huomata, että jos haluat luoda favicon-kuvakkeita yrityksellesi, haluat todennäköisesti luoda favicon, joka on logosi tai vastaava siihen. Kun teet tämän, se tarjoaa entistä yhtenäisemmän ja mieleenpainuvamman ilmeen.
Joten esivalmistettujen kuvien valitseminen ei välttämättä sovi, varsinkin kun muut sivustot voivat käyttää täsmälleen samaa valitsemasi kuvaa.
9) RedKetchup Favicon -generaattori
Tälle generaattorille on mahdollisuus ladata kuva tai luoda se tekstillä.
Jos luot favicon-kuvakkeita tekstillä, asetuksia on paljon, mukaan lukien fonttiperheen, fontin koon, taustan värin, tekstin värin vaihtaminen, ja siellä on säädettävä asteikko, joka vaihtaa neliön ja ympyrän välisen rajan. Joten, voit skaalata reunan pyöristetyillä reunoilla, joiden pyöristys vaihtelee.
Laitteiden yhteensopivuudelle on myös muita vaihtoehtoja.
10) Genfavicon
Tämä ilmainen favicon-generaattori on ainutlaatuinen, koska kun lähetät kuvan, sinulla on mahdollisuus rajata, jotta siitä tulee favicon.
Siellä on myös esikatseluikkuna, josta näet uuden favicon-kuvakkeen näyttävän reaaliaikaisena käyttäjän selaimessa.
Voit valita kokovaihtoehtojen välillä: 16 × 16, 32 × 32, 48 × 48, 64 × 64 ja 128 × 128 kuvapistettä.
11) FavIcon.pro
Tässä on toinen nopea vaihtoehto ilmaiseksi favicon-generaattoriksi. Kun lähetät kuvan faviconiksi, voit valita käytettävän kuvan koon: 16 × 16, 32 × 32, 48 × 48, 64 × 64 ja 128 × 128 pikseliä.
FavIconin avulla voit muuntaa JPG-, GIF-, PNG-tiedostot ICO-tiedostotyypeiksi ja voit käyttää sitä muuntamaan sovelluskuvakkeita, työpöydän kuvakkeita ja faviconeja verkkosivustoillesi.
12) Faviconr
Faviconr on toinen yksinkertainen ja nopea vaihtoehto ilmaiselle favicon-generaattorille.
Lataa joko JPG-, PNG- tai GIF-tiedosto ja valitse, haluatko läpinäkyvän taustan (voit luoda läpinäkyviä favoneja vain, jos lähdetiedostosi on myös läpinäkyvää PNG- tai GIF-tiedostoa). Napsauta painiketta, tallenna tiedosto ja olet valmis.
13) ICOConvert
Tämä ilmainen favicon-generaattori on melko ainutlaatuinen, koska ladattuaksesi kuvan, jonka haluat tehdä favicon, voit rajata sen ja muotoilla sen.
On olemassa vaihtoehtoja rajata reuna eri muotoihin, mukaan lukien neliö, sydämen muotoinen, neliön ulkopuolella oleva neliö, ympyrä, kallistettu sydämen muoto tai neliö, ja mahdollisuus valita valkoinen reunus.
Voit myös ladata favicon ICO- tai PNG-tiedostona, jossa on useita kokovaihtoehtoja, mukaan lukien 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 96 × 96, 128 × 128, 192 × 192 , ja 256 × 256 pikseliä. Voit myös luoda favicon-kuvakkeita Windows 7-, 8-, Vista- ja XP-tietokoneille.
Tämä ilmainen favicon-generaattori sisältää vaihtoehtoja myös tiedostojen pakkaamiseksi ja muuntamiseksi PNG: stä SVG: ksi.
14) Wizlogo Favicon -generaattori
Wizlogo on toinen yksinkertainen vaihtoehto ilmaiseksi favicon-generaattoriksi. Sinun tarvitsee vain valita ladattava kuva ja valita sitten joko 32 × 32 ICO-tiedosto tai favicon-kuvake webille, iOS: lle, Windowsille ja Androidille. Ja olet valmis.
Wizlogoa voidaan käyttää myös ilmaisena logonvalmistajana.
15) FavICO
FavICO on viimeinen perusvaihtoehto ilmaiselle favicon-generaattorille. Lataa kuva, jota haluat käyttää faviconin tekemiseen. Valitse sitten 16 x 16 tai 32 × 32 pikselin koko ja paina Luo. Ja siinä se on.
Kuinka asentaa Favicon-kuvake
Kun olet käyttänyt yhtä ilmaisista favicon-generaattoreista favicon-kuvakkeen luomiseen, voit asentaa sen, jotta se voidaan näyttää verkkosivustollasi.
Lataa tavallisten tai muiden kuin WordPress-sivustojen favicon-kuvake ensin palvelimen juureen.
Sitten, alkaen
käytä index.html-tiedoston tunnistetta, käytä alla olevaa virallista koodia W3C: lta:... ...
Muista vain vaihtaa ”https://example.com/myicon.png” todellisella linkillä favicon-kuvakeesi.
Vaihda myös ”image / png” heijastamaan faviksiksi käyttämäsi kuvatiedoston tyyppiä.
Tässä ovat kuvatyypit, jotka korvaavat “image / png” -sovelluksen, jotka ovat yhteensopivia favicon luomisen yhteydessä:
- PNG-kuvatiedosto – kuva / png
- GIF-kuvatiedosto – kuva / gif
- ICO-kuvatiedosto – kuva / x-kuvake
- SVG-kuvatiedosto – kuva / svg + xml
Älä unohda tallentaa tiedostoa.
Edellä luetellut ilmaiset favicon-generaattorit luovat useimmissa tapauksissa myös tarvitsemasi koodin, joka vastaa valitsemiasi asetuksia, kuten animaatioita tai yhteensopivuutta. Joten jos tämä koodi ei toimi, voit viitata favicon-generaattoriin, jota käytit verkkosivustollesi faviconin luomiseen.
Favicon-kuvakkeen asentaminen automaattisesti WordPressiin
WordPress-sivustoille voit luoda favicon-kuvakkeen käyttämättä yhtä yllä luetelluista ilmaisista favicon-generaattoreista..
Voit käyttää mitä tahansa haluamaasi kuvaa, kunhan sen leveys on vähintään 512 px.
Asenna se automaattisesti kirjautumalla itse isännöimään WordPress-sivustoon ja siirtymällä järjestelmänvalvojan hallintapaneeliin Ulkonäkö> Mukauta.
Kun Customizer on latautunut, napsauta Sivustotunnus vasemmalla olevassa valikossa. Sitten alla Sivuston kuvake, klikkaus Valitse kuva.
Napsauta ponnahdusikkunassa Lataa tiedostot välilehti, sitten päälle Valitse Tiedostot. Valitse haluamasi kuva tietokoneeltasi.
Klikkaus valita, rajaa sitten kuva tarvittaessa ja napsauta Rajaa kuvaa. Tai voit jättää kuvan sellaisenaan ja napsauttaa Ohita rajaaminen.
Tallenna sitten muutokset napsauttamalla Julkaista -painiketta räätälöinnissä.
Asenna Favicon WordPress-sivustoille manuaalisesti
Asennaksesi favicon, joka on ICO-tiedosto WordPressille, lataa favicon ensin verkkosivustosi juurelle sekä nykyisen teeman juureen..
Varmista, että tiedoston nimi on “favicon.ico” tai muuten favicon-kuvaketta ei näytetä.
Tämän pitäisi tehdä temppu, mutta jotkut vanhemmat selaimet eivät ehkä huomaa faviciasi, joten yhteensopivuuden varmistamiseksi voit suorittaa lisävaiheen.
Löydä header.php-tiedostosi SFTP: n tai palveluntarjoajan ohjauspaneelin kautta.
Avaa se ja etsi koodirivi, joka on samanlainen kuin alla oleva esimerkki:
... ...
Sitten, korvaa se alla olevalla koodilla tai lisää se, jos sitä ei ole siellä:
... ...
Tallenna tiedosto ja olet valmis.
Käärimistä
Jotain niin pientä kuin favicon-kuvake voi aluksi vaikuttaa merkityksettömältä, mutta se auttaa tuotemerkin tunnustamisessa ja käyttökokemuksessa. Näiden ilmaisten favicon-generaattoreiden tulisi tehdä temppu luoda omia favicon-kuvakkeita lisätäksesi verkkosivustoosi.
Jotain olemme kaivanneet? Jätä kommentti alle.