Favicon adalah icon kecil yang ada di dekat url browser. Mungkin bagi sebagian orang dianggap kurang penting namun sebetulnya favicon memberikan nilai tersendiri bagi web atau blog kita. Dengan Favicon maka website kita punya hiasan icon kecil yang imut dan menambah daya tarik website dan blog. Ok sekarang sy tidak perlu berpanjang lebar karena panjang x lebar nanti jadinya LUAS.
1. Buat Lembar kerja baru, Caranya : Klik File >> New ,
Setting seperti di bawah ini :
gambar : setting lembar kerja favicon
2. Sekarang desain favicon favoritmu di photoshop , disini saya menggunakan Rounded Rectangle Tool dan Text Tool
Contoh :
gambar : rounded rectangle tool dan gambar favicon
3. Save As dengan Format JPEG atau JPG atau bisa juga PNG, Bingung denga Format Gambar, Klik Extensi Image File
Tekan CTRL + Shift + S, namai dengan favicon
gambar : save as di photoshop
Simpan di komputer / Laptop anda.
gambar : import image
Klik Browse, lalu pilih file favicon hasil photoshop. Klik Upload
gambar : upload gambar favicon.jpg
Sekarang download hasil convert favicon.ico
gambar : download favicon.ico
Tempatkan file hasil save di direktori utama website. Misal jika website kita bernamawww.ilmugrafis.com , maka letakkan di tempat anda menempatkan file - file halaman seperti index dll.
gambar : direktori website dan favicon
<link rel="shortcut icon" href="favicon.ico">
tempatkan di antara tag <head> </head>
Contoh :
gambar : penempatan tag html favicon.ico
setelah itu save (CTRL + S) lalu upload (favicon.ico + file php / html website yang telah diberi favicon tag) ke server. Pilih Overwrite untuk menumpuk file di server dengan yang baru. Selesai hasilnya bisa dilihat di browser waktu online / mengakses website.
gambar : contoh favicon website
Hasilnya nanti akan terlihat seperti di atas. Sampai ketemu di tutorial web desain yang lainnya. Terima kasih semoga bermanfaat. Terima kasih semoga bermanfaat.
Source
Cara membuat Favicon Website ? Mudah, begini caranya :
Langkah Pertama adalah Membuat Favicon di Photoshop
Buka Photoshop, ikuti langkah dalam tutorial Membuat Favicon website di Photoshop di bawah ini:1. Buat Lembar kerja baru, Caranya : Klik File >> New ,
Setting seperti di bawah ini :
gambar : setting lembar kerja favicon
2. Sekarang desain favicon favoritmu di photoshop , disini saya menggunakan Rounded Rectangle Tool dan Text Tool
Contoh :
gambar : rounded rectangle tool dan gambar favicon
3. Save As dengan Format JPEG atau JPG atau bisa juga PNG, Bingung denga Format Gambar, Klik Extensi Image File
Tekan CTRL + Shift + S, namai dengan favicon
gambar : save as di photoshop
Simpan di komputer / Laptop anda.
Langkah Kedua yaitu Cara Merubah JPEG atau JPG ke format ICO
Ok sekarang tinggal mengkonvert file JPEG atau JPG tadi ke extension ICO. Caranya masuk kewww.favicon.ccgambar : import image
Klik Browse, lalu pilih file favicon hasil photoshop. Klik Upload
gambar : upload gambar favicon.jpg
Sekarang download hasil convert favicon.ico
gambar : download favicon.ico
Tempatkan file hasil save di direktori utama website. Misal jika website kita bernamawww.ilmugrafis.com , maka letakkan di tempat anda menempatkan file - file halaman seperti index dll.
gambar : direktori website dan favicon
Sekarang Cara Memanggil Favicon (Favico.ico) ke website
Gunakan Tag html ini :<link rel="shortcut icon" href="favicon.ico">
tempatkan di antara tag <head> </head>
Contoh :
gambar : penempatan tag html favicon.ico
setelah itu save (CTRL + S) lalu upload (favicon.ico + file php / html website yang telah diberi favicon tag) ke server. Pilih Overwrite untuk menumpuk file di server dengan yang baru. Selesai hasilnya bisa dilihat di browser waktu online / mengakses website.
gambar : contoh favicon website
Hasilnya nanti akan terlihat seperti di atas. Sampai ketemu di tutorial web desain yang lainnya. Terima kasih semoga bermanfaat. Terima kasih semoga bermanfaat.
Source
1 komentar:
Click here for komentar카린 놀이터: What's your favorite game in store? 우리카지노 마틴 우리카지노 마틴 우리카지노 쿠폰 우리카지노 쿠폰 gioco digitale gioco digitale 다파벳 다파벳 ボンズ カジノ ボンズ カジノ william hill william hill 372 Lucky Nugget - Lucky Nugget - Casinoinjapan
ConversionConversion EmoticonEmoticon