Complete Favicon Solution

by Phoe Chan on 21. Feb, 2009 in Web Designs

ကၽြန္ေတာ္တို႔ေတြ ဟိုးအရင္တုန္းက icon လုပ္ခ်င္ရင္ icon လုပ္တဲ႔ Software ကိုသံုးရတယ္။Photoshop ကိုသံုးၿပီး Design ဆြဲၿပီးရင္ Icon Creator Software (Axialis IconWorkshop) ကိုသံုးၿပီး။ Icon ေတြကို Generate လုပ္ရတယ္။ (Axialis IconWorkshop) ဆိုတာေတာ္ေတာ္ေကာင္းပါတယ္ icon ေတြသီးသန္႔လုပ္တဲ႔ Software ပါ။ဒါေပမယ္႔ ကၽြန္ေတာ္႔အတြက္ေတာ႔ အဲေလာက္မလိုဘူးေလ ကၽြန္ေတာ္က icon professional လုပ္တဲ႔သူလည္းမဟုတ္ေတာ႔၊ photoshop မွာပဲ Design ဆြဲ ၿပီးရင္ photoshop မွာပဲ icon format နဲ႔ Save ခ်င္တာ၊ အခုေတာ႔ကၽြန္ေတာ္႔ ဆႏၵေတြျပည္႔သြားတယ္ Myanmar IT Professional ရဲ႕ ကိုစိုင္းရဲ႕ post တစ္ခုမွာ photoshop ကေန icon format နဲ႔ Save လို႔ရတဲ႔ Extension ကိုေပးထားတယ္။ကၽြန္ေတာ္လည္းစမ္းသံုးၾကည္႔တယ္ iconလုပ္ရတာေတာ္ေတာ္လြယ္ကူသြားတယ္။ဒါနဲ႔ Favicon ကိုအလြယ္လုပ္လို႔ရတဲ႔ Tutorial ကိုေရးျဖစ္သြားတာ။
Step (1)

ပထမဦးဆံုး Photoshop မွာ icon format နဲ႔ save လို႔ရေအာင္ icon format Plugin ကို download လုပ္ပါမယ္။ ဒီမွာ Download လုပ္ပါ။ icoformat.rar ရပါလိမ္႔မယ္ ၿပီးရင္ သူရဲ႕ Read me ရဲ႕ညြန္ၾကားခ်က္အတိုင္းလုပ္ပါ။ညြန္ၾကားခ်က္ကေတာ႔ icoformat.8bi file ကို copy လုပ္ၿပီး C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats ရဲ႔ Folder ေအာက္မွာ paste လုပ္ပါ။ photoshop ကိုဖြင္႔ထားရင္ photoshop ကို Restart လုပ္ပါ။ေျပာခ်င္တာကဖြင္႔ထားရင္ ပိတ္ၿပီးေတာ႕ျပန္ဖြင္႔ပါ။ ကၽြန္ေတာ္က photoshop CS 3ကိုသံုးထားလို႔ C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins ျဖစ္ေနတာပါ။တကယ္လို႔ CS,CS2 or CS4 ျဖစ္ေနရင္ေတာ႔ Adobe Photoshop CS3 ျပထားတဲ႔ေနရာမွာ photoshop CS,CS2 or CS4 ေျပာင္းေပးလိုက္ပါ၊ ဒါဆို plugin ထားတဲ႔ Folder ထဲကိုေရာက္မွာပါ။ ကဲဒါဆိုေနာက္တစ္ဆင္႔ထက္တက္လိုက္က်ရေအာင္ :)

Step (2)

File name ကို Favicon လို႔ထားပါ။ Favicon လို႔ေပးရတာက web browser ေတြရဲ႕ Address bar ထိပ္မွာေပၚေစခ်င္လို႔ဒီနာမည္ေပးရတာပါ see this image

ေနာက္တစ္ဆင္႔က ေတာ႕ icon လုပ္က်မယ္ေပါ႔ဗ်ာ ပထမဆံုး photoshop မွာ new file ယူSize က ေအာက္ကပံုမွာျပထားတဲ႔အတိုင္း 16×16ယူလိုက္ပါ။ Color mode မွာ RGB ၊ Resolution မွာ 72 ထားၿပီးEnter ႏိုပ္လိုက္ေတာ႕။ :)

Step (3)

New File ယူၿပီးရင္ေတာ႔ စိတ္ႀကိဳက္ icon design တစ္ခုကို ဖန္တီးေပေတာ႔ ကၽြန္ေတာ္ကေတာ႔ အလြယ္လုပ္လိုက္တယ္။ဒီလိုမ်ဳိးေလးေပါ႔

စိတ္ႀကိဳက္ဆြဲၿပီးသြားရင္ ေတာ႔ Save as မွာ icon format နဲ save ပါ။

ေနာက္ဆံုး favicon.ico file ကိုရပါမယ္။ ကဲ ကိုယ္႔ icon ေလူးကို Address bar မွာေပၚေအာင္လို႔ေနာက္တစ္ဆင္႔တက္လိုက္က်စို႔။

Step (4)

ခင္ဗ်ားတို႔တည္ေဆာက္ထားတဲ႔ HTML pages ေတြရဲ႔ Head tag အတြင္းမွာဒီ Code ေလးကိုထဲ႔ပါ။

<head>
<link rel=”shortcut icon” href=”favicon.ico” >
</head>

ၿပီးရင္ အခုဏလုပ္ထားတဲ႔ Favicon.ico file ကို hosting ရဲ႕ Root folder ေအာက္မွာ upload လုပ္ပါ။ ေအာက္ကပံုထဲကအတိုင္း upload လုပ္ပါ။ Hosting ေတာ္ေတာ္မ်ားမ်ားကေတာ႕ root folder ဆိုတာ မ်ားေသာအားျဖင္႔ public_html or htdocs folder ကိုေျပာတာပါ။

ကၽြန္ေတာ္ကေတာ႔ www.000webhost.com ကိုသံုးတယ္။ နည္းနည္း error မ်ားေပမယ္႔ user ကို hosting experience ပိုရတယ္။ ကၽြန္ေတာ္ကေတာ႔ ဒီ Hosting ကိုပိုႀကိဳက္တယ္ ဒီ Hosting ကိုသံုးၿပီးရလိုက္တဲ႔ experience ကေတာ႔မနည္းဘူး အရင္တုန္းက www.byethost.com ကိုသံုးတာ။ error နည္းတယ္ normal user ေတြကေတာ႔ www.byethost.com နဲ႔ပိုအဆင္ေျပပါလိမ္႔မယ္၊ တကယ္လို႔ www.000webhost.com ကိုသံုးရင္လည္းကၽြန္ေတာ္႔ စီမွာ အကူအညီေတာင္းလို႔ရပါတယ္ ကၽြန္ေတာ္လည္းသိသေလာက္ေျဖေပးပါ႔မယ္ :)

Animated Favicon လုပ္ခ်င္ရင္

တစ္ခ်ဳိ႕ favicon ေတြမွာ ေတြ႔ဘူးမွာပါလုပ္ေနတာေလ မျမင္ဘူးရင္လည္းဒီမွာၾကည္႔
အဲလိုလုပ္ခ်င္ရင္ Head tag ၾကားထဲမွာ ဒီ code ေလးထဲ႕လိုက္ပါ။

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon.gif” type=”image/gif” >

ကၽြန္ေတာ္ကေတာ႔ Adobe Flash ကိုသံုးပါတယ္။ ခင္ဗ်ားတို႔ စိတ္ႀကိဳက္ Animation Software သံုးၿပီး GIF format နဲ႔ လုပ္ပါ။ဒါဆိုရင္ animation ပါတဲ႔ favicon ရမွာပါ။ file size ကေတာ႔ 16×16 ျဖစ္ပါတယ္။ file name ကို animated_favicon.gif ေပးလိုက္ပါ။ၿပီးရင္ hosting ရဲ႕ Root folder ေအာက္မွာ upload လုပ္ပါ။ဒါဆိုရင္ animated favion ေလးရမွာပါ။ ကံဆိုးတာကေတာ႔ Internet Explore မွာ animated favicon ေတြဟာ မ run ပါဘူး။

Beautiful Icon Collection

ကၽြန္ေတာ္ online မွာ ဖတ္ေနက် magazine တစ္ခုရိွပါတယ္။ http://www.smashingmagazine.com/ ျဖစ္ပါတယ္။ အဲဒီမွာ icon လွလွေလးေတြ free ေပးတဲ႕ site ေတြကို စုေဆာင္းေပးထားပါတယ္။ icon လွလွေလးေတြကို download လုပ္ႏိုင္ေစဖို႔ ဒီမွာ ဝငိၾကည္႔လိုက္ပါ။ View Detail »

Favicon မေပၚလွ်င္ Troubleshooting လုပ္ေဆာင္ခ်က္

(၁) Favicon က upload လုပ္တိုင္းခ်က္ခ်င္းမေပၚတက္ပါဘူး၊ အနည္းဆံုး၄နာရီေလာက္ေန တစ္ခါတစ္ေလ ၄ရက္ေလာက္ၾကာတက္ပါတယ္။ Browser ကို လည္း cache ရွင္းေပးပါ။ Cache ရွင္းတာကေတာ႔ ထံုးစံအတိုင္း (Ctrl + F5) ေပါ႔ဗ်ာ။

(၂) favicon file name ကိုေသခ်ာစစ္ေဆးပါ (favicon.ico) name ျဖစ္ရပါမယ္။

(၃) favicon file size က 16×16 ျဖစ္ရပါမယ္။

(၄) index.html file နဲ႔ အျခား html files ေတြ မွာ <link rel=”shortcut icon” href=”favicon.ico” > code ကို head tag (<head>…….. </head>) ထဲမွာထည္႔ေရးရပါမယ္။
wordpress မွာဆိုရင္ေတာ႔ index.html header.php file မွာေရးရင္လံုေလာက္ပါတယ္။

ကဲေပ်ာ္ရႊင္ႏိုင္ပါေစဗ်ာ :)

About Author

My name is chan min maung and my close friends call me phoe chan.Phoe chan is a one of the top professional web designers in Myanmar.Phoe chan was born in Myanmar West Bago Division,Pyay Town in 1983 .Phoe chan had got A.G.T.I (Information Technology) in Pyay Technological University.Phoe chan had created many tutorials such as Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, HTML, XHTML, CSS, Javascript, PHP, WordPress, Joomla,CMS,web hosting service and web developement. Phoe chan is love the design and knowledge sharing.That is his hobby.


Tags: , ,

5 Responses to “Complete Favicon Solution”

  1. Tauk Tun Win 19. Mar, 2009 at 6:39 am #

    Thank you. . .

  2. Ma Zar 22. Mar, 2009 at 9:20 pm #

    ေမာင္ေလးေရ

    ဒီBlogထဲကစာေလးဖတ္ၿပီးအခ်ိိန္တိုေလးအတြင္းမွာ
    ဖန္းတီးခြင္႔ရတဲ႔အတြက္ေက်းဇူးပါဘဲကြယ္

    ေက်းဇူး
    :)

  3. gunner 29. Apr, 2009 at 10:12 pm #

    တကယ္ကို tutorial ေလးက တန္ဖိုးရွိတြားပီ…ေက်းဇူး

  4. Hmangyi 13. Jun, 2009 at 2:31 am #

    အခ်ိန္ရရင္ Tutorial မ်ားမ်ားေရးေပးပါအံုး။
    ေက်းဇူးအမ်ားၾကီးတင္ပါတယ္။

  5. zinmar 29. Mar, 2010 at 2:31 am #

    ေက်းဇူးအမ်ားၾကီးတင္ပါတယ္။အခုလိုမ်ိဳးလက္ေတြ႔စမ္းသပ္ခြင္႔ရေအာင္လို႕ေ၇းေပးတာေက်းဇူးတင္ပါတယ္။ေနာက္ကို လည္းဗဟုသုတရ ေစမယ္႔အရာေလး ေတြကိုမ်ားမ်ားေရးေပးပါေနာ္။အၾကံတစ္ခုေလာက္ေပးခ်င္ပါတယ္။ link ေတြေပးရင္ user friendly ၿဖစ္ေအာင္အဆင္႕ဆင္႕ေရးေပးပါ ေနာ္။ ဥပမာ download လုပ္ခိုင္းတဲ႕ေနရာမွာ ဘယ္ စာမ်က္ႏွာရဲက ဘယ္ေအာက္မွာ ရွိတယ္ဆိုတာမ်ိဳးေပါ႕။ေစတနာနဲ႕အၾကံအဥာဏ္ ေပးတာပါေနာ္။
    ေရးထားတဲကစာေတြအရမ္းေကာင္းတယ္ တို႕လည္းဗဟုသုတရ တယ္။ေနာက္လည္းမ်ားမ်ားေရးေပးပါေနာ္။

Leave a Reply