Hogyan hozzunk létre egy teljes készlet favicon a site minden típusú eszközöket
Icon webhely - fontos részét képezi a webhelyen. Gyakran azonban a hírhedt favicon gondolunk az utolsó pillanatban, és illessze be a link tag vonal, minden a lehetőséget ikonok. Néha tekinthető elégséges ahhoz, hogy favicon fájlt a gyökere a helyén, mert a modern böngésző képes önállóan megtalálja és csatlakoztassa a ikonra. És néha elfelejtjük a favicon nem.
Favicon asztali
Kezdjük a szokásos dolgokat. Szinte az összes változat az asztali böngészők alapuló méret 16 × 16 ikonok. 32 × 32 és 48 × 48 formátumban vagy .png Ico (régebbi verziói csak IE .ico).
Favicon Androidra
- 36 × 36 - monitorhoz 0,75 sűrűségű faktor
- 48 × 48 - monitorhoz, amelynek sűrűsége 1 arányú
- 72 × 72 - monitorhoz sűrűségű faktor 1,5
- 96 × 96 - monitorhoz a tömítettség faktor 2
- 144 × 144 - monitorhoz, amelynek sűrűsége 3 arány
- 192 × 192 - monitorhoz a tömítettség faktor 4
Android látja az ikonok png formátumban. valamint alapul manifest.json fájl tartalmazhat számos különböző kozmetikai paramétereket. Ennek hiányában lehetőségeket ikonok az Android, a rendszer épül az alma-touch-ikon jelenik meg.
Favicon az Apple mobil eszközök
Mivel az Android, az Apple eszközök különböző PPI különböző eszközök, köztük az úgynevezett Retina-kijelzők. Különböző változatai képernyőfelbontás és OS verziók számos különböző ikonok közül:
- 57 × 57 - az iPhone nincs retina kijelző és az iOS 6.0 és az alábbiakban
- 60 × 60 - az iPhone nélkül retina kijelző és IOS 7,0
- 72 × 72 - a IPAD nem retina kijelző és IOS 6,0 és alatt
- 76 × 76 - a IPAD nem retina kijelző és IOS 7,0
- 114 × 144 - a iPhone retina kijelző és IOS 6,0 és alatt
- 120 × 120 - a iPhone retina kijelző és iOS 7.0
- 144 × 144 - IPAD a retina kijelző és IOS 6,0 és alatt
- 152 × 152 - IPAD a retina kijelző és iOS 7.0
- 180 × 180 - 6 iPhone Plus c IOS 8,0
egyéb favicon
- IE10 a Windows 8 előírja a háttér színét
- IE11 a Windows 8 és 10 vesz egy kicsit más ikonok lehetőségeket, valamint a beállítások alapján az XML fájl browserconfig.xml
- Safari for Mac OS X El Capitan igényel SVG ikon rögzített lapok
- 96 × 96 - a Google TV
- 228 × 228 - Opera Coast
Hogyan kell beállítani és csatlakoztassa az összes ezt a sokszínűséget?
Logikus azt feltételezni, hogy a kapcsolat minden ezt a sokszínűséget favicon lenne szükség a sok erőfeszítés. Mi egy ésszerű kérdés: van olyan eszköz, amely automatizálja ezt a folyamatot? És persze, hogy létezik. Azok számára, akik saját front-end design használ a feladat-vezetők, mint Grunt és korty, vannak speciális plug-inek (róluk röviden a cikk végén). Mi is használjuk az online megoldást, amely lehetővé teszi a kényelmes testre összes paramétert, és azonnal látni az eredményt.
Online generátor lehetővé alapján csak az egyik a képek (a kívánt méretet a forráskód legalább 260 × 260), hogy hozzon létre egy ikon a webhely minden típusú böngészők és eszközök.
A letöltés után az ikonok akkor megjelenik egy oldal, ahol tudunk szabni a nagy részletességgel ikon mindegyik platformra, és azonnal látni az eredményt.
Tab beállításokat iOS, tudjuk meg a háttérszínt az ikonok, és azt is jelzik, a méret a behúzás ikonokat a területen belül. Dedikált képet fül lehetővé teszi, hogy letölthető egy másik változata az ikon egy adott típusú készülék (hasonlóan az Android, a Windows és a Mac OS)
Az android beállítások egy kicsit érdekes. Lehetőség van az iOS változat adja a háttér színe és padding is lehetőségük van egy átlátszó hátteret a cég minden árnyék szabvány ikonok az operációs rendszer. Lehetőség van megadni egy adott alkalmazás nevét. A Beállítások fülön tudjuk meg egy URL-t, amely megtartja az alkalmazás.
Rögzített fülek Safari 9 Mac OS X alatt El Capitan új verziója az SVG ikonokat.
A csempézett a Windows rendszer egy kicsit bonyolultabb. Ezután adja meg a háttér színe feltétlenül szükséges, és a színe a logó a legtöbb esetben a legjobb, ha választani fehér.
Vége a globális beállításokat lehet végezni az utolsó beállítások ablakban. Itt lehet megadni az elérési utat a könyvtárba, ahol fekszenek az összes fájl keletkezett a favicon, válassza az összenyomódás mértékét a helytakarékosság, válasszon egy méretezési algoritmus, stb
Bevezetése egy sablon
Miután kanyargó a beállításokat az igényeinknek, mi végre generálni ikonok. A megjelenő ablakban látni fogjuk több lehetőség csatlakozni ikonok. Ha csatlakozni az ikonok megszokott módon a HTML fájlt, a javasolt archív, csak le kell tölteni, és helyezzen be egy speciálisan létrehozott kódot a fej címkék webhelyén.
Aztán meg lehet próbálni a funkcionalitás a favicon itt.
Code feladat-vezetők Grunt és Culp
Most, hogy megértsék a elveinek generáció favicon megjelenítéséhez a webhely különböző eszközök, tudjuk automatizálni a folyamatot Feladatkezelőben. Ez elég ahhoz, hogy vigyázzon a generációs Grunt és Culp fülre. Attól függően, hogy mit használ, és tanulmányozza a javasolt kódex részletesen, hogy továbbra is használja a saját projektek és automatizálja a termelési folyamat anélkül, hogy online forrás.
A mi projektek használjuk Gulp
1. Telepítse a plug-korty valós favicon
2. A kód beillesztése a gulpfile.json
3. Cserélje TODO: Út a mester képet az utat a forráskódot, ahonnan jön létre ikonokat. Például eszközök / images / master_picture.png
4. Cserélje TODO: Út a könyvtárba, ahol tárolni az ikonok a könyvtár elérési útját, ahol a generációs idő alapján kerül sor az ikonok. Például dist / images / ikonok
5. Helyezze TODO: listája a HTML-t, ahol az injekciót favicon jelöléseket a fájl elérési útját, amelynek során a favicon végrehajtása a kód kerül beillesztésre. Például, [ 'dist / *. Html', 'dist / misc / *. Html']
6. Helyezze TODO: Út a könyvtárba, ahol tárolni a HTML fájlokat az elérési utat a könyvtárba, ahol a HTML fájlok tárolására.
7. generálása parancsikonok
8. Integrálja ikonok a sablon
következtetés
Ezek a látszólag hétköznapi intézkedések lehetővé teszik a webhely nézni az eszközök között még adaptív.
Ui néhány nyalánkság
Ha azt szeretnénk, hogy megtanulják, hogyan kell látni a favicon a webhely keresők Yandex és a Google, akkor kihasználja a speciális szolgáltatások:
Amennyiben mydomain.com - a domain a webhelyen.
Szinte minden oldalon van egy szakasz vélemények és alakját az írás. A szükségesség Egy ilyen szakasz van írva okos könyvek a tervezési internetes források, mondván, hogy azért, mert akkor kap visszajelzést a felhasználóktól. Ez csak a visszajelzést a túloldalon.
Szinte minden cég, termék, és még inkább a hivatal copywriters gyakran van szükség. Nem számít, hogy ez a helyzet a szövegíró, tartalom menedzser, PR-szakember, vagy egy egyszerű menedzser, gyakran egy - írja a szövegeket. Látszólagos egyszerűsége ellenére, jó írás változatos szövegek nem biztosítanak mindenkinek.
Sok kezdődő copywriters félnek, hogy közvetlenül a hivatal. Ezek nem biztos, hogy tudja kezelni a terhelést, és általában alkalmasak a poszt, így a tanácsadás vezető kollégái küldött a csere. Maga az ötlet az ilyen cserék inspiráló: a munka szabadúszóként, hogy építsenek egy szabad menetrend, nem kötődik egy helyen. De a rózsaszín szemüveg leesik után az elsőrendű vagy egyszerű matematikai feladat.