Hogyan hozzunk létre egy Favicon a Blog

van a blog egy egyéni favicon? Ha nem, akkor tényleg kellene. Ma megtudjuk, mi a favicon, miért van szüksége rá, és végül hogyan hozhat létre favicont blogjához vagy webhelyéhez.

még mindig rengeteg blogot látok egy nélkül, tehát ha a blogod az egyik közülük, Tegyél magadnak egy szívességet, és hozz létre egyet az alábbi oktatóanyag segítségével. Megígérem, hogy nem fog sokáig tartani, és ez is egyfajta szórakoztató!

Frissítve: 11/4/2020

közzététel: Ez a bejegyzés affiliate linkeket tartalmazhat (a * jelöli), ami azt jelenti, hogy kis jutalékot kaphatok, ha úgy dönt, hogy vásárol a linkemmel. Nagyra értékelem a támogatást, és soha nem ajánlom termékek nem állok magam.

először is, mi az a Favicon?

a Favicon, ejtsd kedvenc-ikon, rövid Kedvencek ikon, amely azért kapta a nevét, mert megjelenik a listán a honlapon könyvjelzők, más szóval, a kedvenc weboldalak. A Favicons a logomark egy kis verziója, amely böngésző fül ikonként, könyvjelző ikonként vagy parancsikonként jelenik meg.

a Favicons egy gyors módja annak, hogy a felhasználók első pillantásra felismerjék webhelyét. Vessen egy pillantást az alábbi böngésző fülekre. Felismeri a legtöbb weboldalt, amelyet itt nyitok meg?

miért kell létrehozni egy Favicont?

ha nem rendelsz egyéni favicont a blogodhoz vagy a webhelyedhez, vagy egy általános ikon, vagy egyáltalán nincs ikon hozzárendelve. A legrosszabb esetben a blogod a hosting cég faviconját használja. A legjobb esetben minden böngésző saját dolgot rendel az Ön számára: a Chrome hozzáad egy kis földgömböt (lásd a fenti képet), a Safari hozzáadja a webhely URL-jének első kezdőbetűjét egy szürke mezőbe (lásd az alábbi képet), a Firefox pedig semmit sem ad hozzá. Másik út, beszélj unalomról!

nézze meg újra a fenti böngésző füleket. Miután felismerhető ikonok megkönnyíti, hogy kattintson oda-vissza gyorsan weboldalak között nem igaz? Ha webhelyet ment a könyvjelzőihez, akkor a favicon is megjelenik a könyvjelzők listájában. Ez megkönnyíti, hogy gyorsan megtalálja, amit keres. A favicon beépítésével segítsen olvasóinak gyorsan megtalálni blogját a fülükön vagy a könyvjelzőkön.

van egy másik hely, fogadok, hogy nem gondolt arra, hogy hol jelennek meg a faviconok: ha vannak olyan webhelyei, amelyeket gyakran látogat a telefonján, bármikor hozzáadhatja őket a telefon kezdőképernyőjéhez parancsikonként. Ha olvasói szeretik gyakran látogatni az Ön webhelyét, érdemes hozzáadni egy parancsikont a kezdőképernyőről, így feltétlenül azt szeretné, ha egy szép megjelenésű ikon lenne, amely kitűnne a már hozzáadott alkalmazásikonok közül.

és itt van egy új lap oldal a Safariból. Kép a honlapon parancsikont itt. Nem akarja, hogy blogját egy unalmas szürke ikon képviselje, mint például az alábbi “C” ikon?

Hogyan tervezzünk egy Favicont a blogodhoz

néhány tervezési szabály a Favicon létrehozásához

először beszéljünk néhány bevált gyakorlatról a favicon tervezéséhez.

1. a faviconnak észrevehetőnek és azonnal felismerhetőnek kell lennie
   a favicon felismerhetőségének legjobb módja az, ha a logót használja kiindulópontként. Még akkor is, ha a blogod még nem szuper híres, ez rendben van. A következetes tervezési elemek és témák használata a márkaépítésben segít abban, hogy kitűnjön a többi közül, és segítsen az embereknek végül felismerni a márkáját.Itt van egy pár lehetőség, hogy fontolja meg, mint a design a favicon:
   • az Ön logója vagy logomarkja
   • az Ön logójának egyszerűbb változata
   • egy szimbólum vagy ikon, amely a márkáját képviseli
   • a márkanév kezdőbetűi (vagy csak az első kezdőbetűi) – győződjön meg róla, hogy a kezdőbetűk stílusa megegyezik az eredeti logó tervezésével és stílusával
   • egy egyszerű fotó – az utóbbi időben láttam bloggereket, akik profilfotóikkal favicon
2. a favicon kell használni egy nagyon egyszerű design
   vessen egy jó pillantást a favicons a böngésző lapok most. Mit veszel észre? Kicsik! A tipikus favicon 16 x 16 képponton jelenik meg. Ezért fontos, hogy a logó vagy a márkaelem nagyon egyszerűsített változatát használja. A részletes és bonyolult grafika nem méretezhető ilyen apró méretben. Valószínűleg homályos rendetlenségnek fognak kinézni.
3. győződjön meg róla, hogy a favicon jól illeszkedik a világos és sötét háttérhez
   az olvasók preferenciáitól függően a böngésző fülei lehetnek fehérek, feketék, világosak vagy sötétszürkék. Ezért győződjön meg arról, hogy olyan favicont hoz létre, amelynek színei jól kontrasztosak mind a világos, mind a sötét háttérrel.Néhány favicon átlátszó háttérrel rendelkezik, és azért működik, mert színeik jól kontrasztosak bármilyen háttérrel. Ha a grafika túl világos vagy túl sötét, segíthet egyszínű kör vagy négyzet hozzáadása a grafika vagy a logó mögé, hogy kitűnjön és olvasható legyen bármely színes lapon.
4. nézze meg a böngésző lapjait inspirációért
   kattintson az interneten, és nézze meg a kedvenc webhelyein használt faviconokat. Figyelje meg, hogy világos vagy sötét háttérrel működnek-e. A grafika átlátszó háttérrel rendelkezik, vagy színes négyzeten vagy körön van?

Favicon inspiráció

Faviconok átlátszóság használata

figyelje meg, hogy ezek az ikonok Hogyan tűnhetnek ki sötét vagy világos háttéren, kivéve az utolsót, ‘Mondj igent. Ezt valószínűleg egy fehér négyzetre kellett volna helyezni. Kicsit nehéz megmondani, de a negyedik ikonnak, a lótuszvirágnak nagyon finom fekete körvonala van. Így könnyen láthatja, még akkor is, ha világos színű lapokon nézik meg.

Faviconok színes háttérrel

ezeket a faviconokat négyzet alakú vagy lekerekített négyzet alakú háttérrel tervezték, hogy mind a sötét, mind a világos füleken jól láthatóak legyenek.

Faviconok kezdőbetűket használva

ezen kezdőbetűk némelyike színes hátteret, mások Átlátszót használ. Akárhogy is, ellenőrizze, hogy olvasható-e.

Favicons profilfotó használata

a profilfotó használata új trendnek tűnik. Ha ezt az utat választja, feltétlenül használja ugyanazt a profilfotót az összes online profiljában, hogy az azonnal felismerhető legyen.

Hogyan hozzunk létre egy Favicont a blogodhoz

hozzon létre egy Favicon fájlt lépésről lépésre

1. készítse el a grafikát egy képszerkesztőben
   olyan képszerkesztő segítségével, mint a Photoshop (iratkozzon fel ingyenes próbaverzióra)*, Pixlr, BeFunky vagy Canva,* hozza létre favicon fájlját 512 x 512 pixel felbontásban. Annak ellenére, hogy csak 16-nál jelenik meg 66 a böngésző lapjain, nagyobb méretben is megjelenik a fent említett egyéb alkalmazásokban.
2. a Favicon előnézete apró méretben
   ha elkészült egy grafikus favicon létrehozásával, kicsinyítse a képet, amíg a grafika apró lesz, körülbelül akkora, mint a böngészőben látható faviconok. Még mindig olvasható? Van ennek értelme? Ha igen, nagyszerű, folytassa a következő lépéssel.
3. fájl mentése
   először mentse el a grafikát szerkeszthető fájlként a szoftverprogramba, hogy szükség esetén visszatérhessen és finomhangolhassa.Ezután mentse el PNG fájlként.
4. Favicon létrehozása.ico fájl
   használjon favicon generátort a PNG fájl konvertálásához ICO fájlba. Ez a lépés szükséges, mivel egyes böngészők csak az ICO fájlokat fogják olvasni.

alternatívák tervezése saját a semmiből

ha azt szeretnénk, egy gyors és egyszerű módja annak, hogy hozzon létre egy szöveget vagy kezdőbetűi favicon, használja a szöveget > ICO favicon generátor. Gyorsan létrehoztam ezt a DYOB számára:

használhatja az Emoji > ICO favicon generátort is, ha valóban meg akarja könnyíteni magát.

végül adja hozzá új Faviconját a blogjához vagy webhelyéhez

WordPress

a favicon hozzáadásának legegyszerűbb módja egy saját házigazdájú WordPress blogban Az, ha bejelentkezik az irányítópultra. Ezután lépjen a megjelenés > Testreszabás elemre, majd kattintson a Webhelyazonosság fülre. A webhely ikon szakaszban válassza ki az új favicont.ICO fájlt feltölteni.

és bumm, kész vagy, nézd meg a böngészőben! Ne feledje, hogy előfordulhat, hogy néhányszor frissítenie kell, és/vagy törölnie kell a gyorsítótárat a böngészőben, mielőtt megjelenik.

favicon hozzáadása a WordPress.com blog.

Squarespace

nagyon könnyű hozzáadni egy favicont a Squarespace-hez is.

Blogger

jelentkezzen be blogjába, majd kattintson a Beállítások elemre a bal oldali oszlopban. Ezután kattintson a gombra Favicon az alap szakasz alatt. Ezután töltse fel a faviconját.ICO fájl, mentés és bumm!

tesztelje az új Faviconját

ha tesztelni szeretné, hogy néz ki a favicon különböző platformokon és beállításokban, használja ezt a Favicon-ellenőrzőt. Ha szerkeszteni szeretné az ikonok megjelenését bármelyik platformon, mondjuk iOS (iPhone), akkor a generátor segítségével optimalizálhatja őket az egyes beállításokhoz. Ezután kövesse az utasításokat, hogy mindet hozzáadja a blogjához.

most tanultad meg, hogyan kell létrehozni egy Favicont

Gratulálunk! Saját blogjának megtervezésekor ügyeljen arra, hogy ne hagyjon ki semmilyen részletet, még a legkisebbeket sem. Egyéni favicon hozzáadása nem csak segít az olvasóknak abban, hogy gyorsan megtalálják blogját a fülükön vagy könyvjelzőikben, hanem azt is mutatja, hogy érdekli a márkajelzés következetessége.

Most rajtad a sor

tudassa velem a megjegyzésekben, ha bármilyen kérdése van a favicon létrehozásával kapcsolatban, vagy ha segítségre van szüksége a márka számára létrehozandó favicon típusának azonosításához. Ellenkező esetben kérjük, ossza meg velünk faviconját a megjegyzésekben!
és ha élvezte ezt a bemutatót, kérjük, ossza meg az aláírásom alatti ikonok egyikére kattintva!
ez a bejegyzés eredetileg 8/14/2013-án jelent meg, frissítve 2/11/2015-én, majd ismét 11/4/2020-án.