網頁圖示的製作方式

之前在馬老師舊的部落格就有教導過網站圖示的製作方式,不過因為部落格搬新家,也再把這個教學重新講解與製作一遍,如下圖所示,許許多多的網頁都有製作網頁圖示。

網站圖示的製作方式 示意圖1

這樣的圖示我們可以利用任何的美工軟體來設計,而我是在Fireworks中製作(個人覺得比較方便),首先開一個正方形的透明圖檔(寬、高相同),大小可以自訂,底色設為透明。

網站圖示的製作方式 示意圖2

底色透明的部分是希望可以製作一個去背的網站圖示,像上面範例奇摩的圖示就有去背,維基百科則沒有,接下來就看你怎麼樣設計這個圖示囉~

網站圖示的製作方式 示意圖3

製作完成後儲存成png的格式,進入這個網站將我們的PNG圖檔轉換成ICO圖檔,進入後按下選擇檔案,找到我們剛剛所儲存的PNG圖檔,接下來就按下轉換的按鈕。

網站圖示的製作方式 示意圖4

待轉換完成後在Click here to Download的文字上面按右鍵選擇另存目標。

網站圖示的製作方式 示意圖5

接下來在想出現此圖示的網頁上,輸入以下的HTML程式碼。

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

網頁圖示的製作方式 示意圖6

其中href代表這個圖檔的名稱和路徑,如果是整個網站的所有頁面都要有本圖示的話,那每一頁都必須要有這段語法喔!接下來預覽網頁就可以看到你所設計的網頁圖示了。

註:在網頁還沒上傳的情形之下I.E.會看不到這個圖示,大家可以用Chrome或Firefox來預覽

You may also like...

28,577 Responses

  1. Hi! I understand this is somewhat off-topic however I had to
    ask. Does operating a well-established website such as yours require
    a lot of work? I am completely new to running a
    blog but I do write in my journal daily. I’d like to start a blog so I can share my personal experience and views online.
    Please let me know if you have any suggestions
    or tips for new aspiring bloggers. Appreciate it!

  2. Malcolmseern表示:

    apotek pa nett Apoteket online Apotek hemleverans idag

  3. Malcolmseern表示:

    Kamagra online bestellen Kamagra online bestellen Kamagra online bestellen

  4. Джетон表示:

    Добро пожаловать в Jetton Casino – мир развлечений и больших выигрышей.
    В нашем казино вас ждёт широкий выбор игр, щедрые акции и
    незабываемые впечатления.
    Присоединяйтесь к нам и начните своё путешествие в
    мире азарта прямо сейчас.

    Почему выбирают jet ton скачать? Мы предлагаем честную игру, моментальные выплаты и круглосуточную поддержку.

    Каждый пользователь может рассчитывать на
    специальные акции и эксклюзивные награды.

    Коллекция лучших азартных
    развлечений от мировых провайдеров.

    Регулярные акции и персональные
    предложения.

    Быстрые выплаты и безопасные транзакции без задержек.

    Турниры с крупными призовыми фондами
    и возможность выиграть джекпот.

    Откройте для себя лучшие игровые возможности вместе с Jetton Casino. https://jetton-casinoempire.skin/

  5. HomerFaw表示:

    https://apotekonlinerecept.com/# Apotek hemleverans recept

  6. continuously i used to read smaller articles which as well
    clear their motive, and that is also happening with this piece of writing which I am reading here.

  7. Louislen表示:

    https://apotheekmax.com/# Betrouwbare online apotheek zonder recept

  8. HomerFaw表示:

    https://kamagrapotenzmittel.com/# Kamagra Oral Jelly

  9. Derekgroum表示:

    Apotheek online bestellen: Betrouwbare online apotheek zonder recept – Online apotheek Nederland zonder recept

  10. Cecilned表示:

    Посетите интернет-магазин https://sharpsting.ru и оцените разнообразие товаров: от современных гаджетов до полезных аксессуаров. Мы ценим каждого клиента и стремимся предоставить лучший сервис. Присоединяйтесь к числу наших довольных покупателей уже сегодня

  11. Michaeltor表示:

    Apotek hemleverans recept: Apotek hemleverans recept – apotek pa nett

  12. Derekgroum表示:

    apotek online recept: Apoteket online – apotek online recept

  13. Derekgroum表示:

    Apotek hemleverans recept: Apotek hemleverans idag – apotek online

  14. 899381 791204i just didnt want a kindle at initial, but when receiving one for christmas im utterly converted. It supply genuine advantages over a book, and makes it such a great deal additional convenient. i may well undoubtedly advocate this item: 864597

  15. Cecilned表示:

    Посетите интернет-магазин https://sharpsting.ru и оцените разнообразие товаров: от современных гаджетов до полезных аксессуаров. Мы ценим каждого клиента и стремимся предоставить лучший сервис. Присоединяйтесь к числу наших довольных покупателей уже сегодня

  16. Мебельный щит это один из популярных материалов

  17. Michaeltor表示:

    apotek online: Apotek hemleverans recept – apotek online recept

  18. шиномантаж люберцы шиномантаж люберцы .

  19. HomerFaw表示:

    https://apotheekmax.com/# online apotheek

  20. I used to be recommended this website by my cousin. I am not
    positive whether or not this publish is written by means of him as
    nobody else recognize such targeted approximately my difficulty.
    You’re wonderful! Thank you!

  21. kra30.cc表示:

    кракен площадка

  22. 1win_peKl表示:

    1win личный кабинет http://1win6001.ru/ .

  23. esta usa visa表示:

    Hello, after reading this amazing article i am also happy to share my
    experience here with colleagues.

  24. esta usa visa表示:

    Howdy very nice website!! Guy .. Beautiful
    .. Amazing .. I’ll bookmark your web site and take the feeds also?
    I’m glad to search out so many useful information here within the post,
    we want develop extra strategies in this regard, thank you for sharing.
    . . . . .

  25. esta usa visa表示:

    Today, while I was at work, my cousin stole my apple ipad
    and tested to see if it can survive a twenty five foot drop, just so she can be a youtube
    sensation. My iPad is now destroyed and she has 83 views.

    I know this is completely off topic but I had to share it with someone!

  26. JesseDex表示:

    пин ап зеркало: https://pinupkz.life/

  27. Jamesavata表示:

    pinup 2025 – пин ап казино

發佈回覆給「Derekgroum」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。