header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Membuat Favicon Website Ternyata Mudah

Publish: 21 Februari 2013 | Author & Copyright: Johan | Status: FREE tutorial Dreamweaver

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.

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 :
setting lembar kerja favicon
gambar : setting lembar kerja favicon

2. Sekarang desain favicon favoritmu di photoshop , disini saya menggunakan Rounded Rectangle Tool dan Text Tool
Contoh :
rounded rectangle tool dan gambar favicon
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
save as di photoshop
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 ke www.favicon.cc
import image
gambar : import image

Klik Browse, lalu pilih file favicon hasil photoshop. Klik Upload
upload gambar favicon.jpg
gambar : upload gambar favicon.jpg

Sekarang download hasil convert favicon.ico
download favicon.ico
gambar : download favicon.ico

Tempatkan file hasil save di direktori utama website. Misal jika website kita bernama www.ilmugrafis.com , maka letakkan di tempat anda menempatkan file - file halaman seperti index dll.
direktori website dan favicon
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 :
penempatan tag html favicon.ico
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.
contoh favicon website
gambar : contoh favicon website

Hasilnya nanti akan terlihat seperti di atas. Sampai ketemu di tutorial web desain yang lainnya. Terima kasih semoga bermanfaat. Kunjungi juga Blog IlmuGrafis untuk berita dan info menarik seputar desain grafis. Terima kasih semoga bermanfaat

Tutorial Dreamweaver sebelumnya :
« Membuat Drop Down Menu Sederhana di Website

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 

author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi ilmugrafis

PHP 1
Pemrograman PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop

webmaster collection
Desain Website Dreamweaver 2

Dalam CD Tutorial ini diajarkan cara membuat website secara lebih detail dari seri sebelumnya



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

BLENDER 3D
Blender Dasar

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain
Donasi

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker