Když začnu vyprávět lidem o významu favikona pro jejich celkovou strategii on-line brandingu, obvykle říkají to samé: "Nechceš tohle značkové zboží trochu daleko?"
Moje odpověď obvykle jde: "Ne, pokud máte vážné úsilí o vlastní značku!"
Je pravda, favicony jsou velmi malé věci, pravděpodobně nejméně důležité místo na webu, ale je to pozornost na detaily, které dělají stránky vystupovat; a i když to zní blázeně, favicony jsou velmi důležité z hlediska značky.
Vzhledem k tomu, že služba WDD je webová stránka orientovaná na designérské publikum, můj odhad je, že mnozí z vás již vědí, jaké favicony jsou a jak je vytvářet; ale tento článek vám může stále pomoci pochopit, proč byste je měli dělat, a také sloužit jako dobrá stránka zdrojů.
Sdílím velký seznam zdrojů, které se týkají favikonu níže, a proto si můžete vzít záložku pro budoucí použití. Oh, a pokud ano, všimněte si favicon WDD přímo v seznamu záložek;)
Jen v případě, že nejste návrhář nebo jakýkoli druh černého pásu ve favicon-arts, tento článek se týká pravděpodobně všechno, co budete potřebovat vědět o těchto nepolapitelných čtverečcích o rozměrech 16 × 16 pixelů, a dokonce i o některých zajímavých favicuriosities . Tak si užívejte!
Favicony jsou malé čtvercové obrazy obvykle 16 × 16 pixelů, které prohlížeče používají k zobrazení grafického znázornění navštíveného webu na levé straně adresního řádku prohlížeče. Pravděpodobně jste viděli mnoho favikonů dříve, i když nevíte, jaké to jsou. V případě pochybností vám pomůže obrázek níže.
Dva příklady favicons v prohlížeči prohlížeče Google Chrome.
Pokud máte zájem o porozumění historii internetu, je zajímavé:
Slovo favicon je portamentau vyrobený ze slov "oblíbený" a "ikona" a byl pojmenován jako takový, protože byl nejprve podporován programem Microsoft Internet Explorer 5 a jen v případě, že nepoužíváte IE, tuto funkci prohlížeče pro bookmarking se nazývá oblíbené.
V raných dnech internetu byly nástroje, jako je Google Analytics, pouhé sny v myslích několika webových fanoušků, takže v tomto okamžiku bylo divné, že favicony byly použity jako způsob, jak odhadnout návštěvnost webových stránek počítání počtu návštěvníků, kteří záložku navštívili. (To je další zajímavý úryvek v historii internetu!)
Ale zajímavé skutečnosti stranou, hlavním důvodem, proč dnes máme favicony, je zlepšení uživatelských zkušeností. Funkce Favicons se používají ve všech moderních prohlížečích v adresním řádku, na panelu odkazů, v oblasti pro záložky a na kartách procházení. Kromě toho několik prohlížečů také zobrazuje favicony při každém vytvoření odkazu pro příslušné webové stránky na ploše a mobilním zařízení.
Určitě je hlavním důvodem mít favicon zřejmé zlepšení v uživatelské zkušenosti. Webové stránky bez jednoho budou zobrazovat obecný symbol prohlížeče ve všech bodech interakcí, které jsem zmínil výše, a pokud vám záleží na vašem uživatelském zážitku, musíte se o favicony starat.
Ale nemůžu se vyhnout tomu, abych viděl věci skrz šňůru značky, svou oblast odbornosti, takže si myslím, že favicony jsou ještě důležitější z pohledu značky. Opět se tolik bodů vzájemného působení nepoužívá ke zvýšení povědomí o značce je zločin. Pravda je, že hledání kreativních způsobů, jak zlepšit své online značky, je vždy náročná úloha a mít favicon je jednoduchý a snadný způsob, jak to dosáhnout. Takže seberte jednoho svého přítele!
Vytvoření webové stránky favicon je snadné jako koláč. Ve skutečnosti ani nemusíte být návrhářem, který by to udělal. Určitě to pomůže, pokud jste, protože můžete své dovednosti dát do práce a vytvořit něco, co opravdu vyčnívá, ale i my méně technicky zdatní, to dokážeme udělat asi za 5 minut nebo méně, a to pomocí správných nástrojů.
Webové stránky v seznamu níže vám umožní vytvořit favicon jednoduše tím, že nahrajete již existující obrázek. Takže pokud chcete vytvořit značku favicon pro vaši značku, stačí jen nahrát své logo na jedno z následujících stránek a stáhnout soubor favicon. Snadné peasy, citrónovou šťavnatost.
Zde je seznam generátorů Favicon, který hledáte:
Webové stránky výše se liší v závislosti na výsledném souboru, který získáte. zejména pokud jde o velikost a rozšíření souboru. Pokud hledáte možnost co nejkompatibilnějšího souboru, důrazně doporučuji stahovat obrázky velikosti 16 × 16 pixelů ve formátu "ico".
Pokud potřebujete nějakou inspiraci, vyzkoušejte níže uvedené favionové galerie:
Jakmile budete mít favikon pečlivě navržen, instalace na váš server by neměla trvat déle než pár minut ve dvou jednoduchých krocích. K tomu budete potřebovat přístup ke kořenové složce vašeho webu a nástroj pro úpravu textu, abyste mohli změnit kód HTML vašeho webu.
Budete muset nahrát soubor "favicon.ico" na váš server. Chcete-li to provést, přejděte na svůj FTP server do adresního řádku prohlížeče. vaše adresa URL by měla vypadat podobně jako tato:
ftp://[email protected]
Stiskněte klávesu enter a prohlížeč vás vyzve k zadání uživatelského jména a hesla před tím, než udělí přístup k souborovému serveru. Jakmile jste, vložte soubor "favicon.ico" do kořenové složky a budete hotovi.
Nyní budete muset stránku HTML stránky upravovat, aby prohlížeče našli váš favikový obrázek. Udržujte okno FTP otevřené, vyhledejte a stáhněte soubor "index.html" nebo "header.php" ze svého serveru a postupujte podle níže uvedených kroků:
Pokud je váš web z prostého HTML, vložte kód níže do oblasti HEAD souboru "index.html" a nezapomeňte změnit adresu "yoursite.com" pro vlastní adresu vašeho webu.
Pokud používáte aplikaci WordPress, vložte níže uvedený kód do oblasti HEAD vašeho souboru "header.php".
S tím udělal, nahrát soubor zpět tam, kde jste ho dostali. Jsi hotový!
Ve skutečnosti je většina moderních prohlížečů dostatečně chytrá, aby našla váš soubor favicon i bez jakéhokoli kódu, ale pouze tehdy, pokud má obrázek favicon 16 × 16 pixelů, byl pojmenován jako "favicon.ico" a je uložena v kořenové složce složky webových stránek.
S tak velkým množstvím nástrojů, které vám pomohou vytvořit favicon, proč byste chtěli udělat silnou cestu a vytvořit ji ve Photoshopu? No, pokud jste designér a chcete získat to nejlepší z vaší favicon, jistě to je profesionální způsob, jak to udělat. Trik je, že aplikace Photoshop nativně nepodporuje soubory ico, takže je třeba stáhnout tento plugin z Telegraphics .
Ujistěte se, že jste ho nainstalovali dříve, než budete postupovat níže. Photoshop nebude fungovat bez něj.
Podívejte se na možnost "ICO" v poli Photoshop "Uložit jako" a potvrďte, že je plugin nainstalován.
Vytvořte nový dokument ve Photoshopu výběrem položky nabídky "Soubor" a vyberte možnost "Nový" a nastavte plátno na 64 × 64 pixelů. Proč? Vzhledem k tomu, že velikost 16 × 16 konečných faviků je tak malá, budete mít větší plátno, na kterém budete pracovat, a pomůže vám tak získat tvůrčí šťávu. Poté vložte své logo do dokumentu a uvolněte svou magickou jednorožeckou tvůrčí sílu.
Jakmile skončíte, jednoduše zvolte nabídku "Obraz" a vyberte možnost "Velikost obrazu" a snížit obraz na 16 × 16 pixelů. Nezapomeňte kliknout na tlačítko "Resample Image" a zvolit "Bicubic Sharper", aby se ujistil, že se obraz nezmění při změně velikosti. Pokud se vám nelíbí konečný výsledek, jednoduše zrušte své poslední změny pomocí "AltCtrl / AltCmd + Z" a pokračujte v práci na návrhu, dokud nebudete s ním spokojeni.
Abyste mohli dokončit favicon, stačí kliknout na menu "File" a na následující volbu "Save As", tam si pamatujete, že si pojmenujete soubor jako "favicon.ico". Opět je to hotovo!
Favicons jsou jednou z těch malých věcí, které obvykle nevěnujeme příliš pozornost, ale pravda je tak daleko, že nejsou zanedbatelná, jsou velmi důležitou součástí webu, a to jak z hlediska uživatelského rozhraní, tak z hlediska značky, pohledu.
Někteří říkají, že velké věci přicházejí v malých rozměrech a myslím, že to platí i pro favicony, protože každý webdesigner a / nebo specialista na branding, kteří vždycky mají čas přidat favicon do svých klientských stránek, i když klient nemá představu o tom, co je favicon, demonstruje velkou profesionalitu a pozornost detailům; což je kvalita, kterou ocení každý klient.
Vytváříte favicony pro své klienty? Jsou příliš potíže za příliš malou odměnu? Dejte nám vědět své myšlenky v komentářích.