網頁圖示的製作方式

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

網站圖示的製作方式 示意圖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...

15,962 Responses

  1. Тут делают продвижение продвижение клиники seo. медицинских. сайтов

  2. DudleyRon表示:

    1вин казино скачать https://edulike.uz/

  3. Тут делают продвижение продвижение в поисковых системах медицинского сайта комплексное продвижение медицинских сайтов

  4. Профессиональный сервисный центр по ремонту моноблоков iMac в Москве.
    Мы предлагаем: ремонт аймаков на дому
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. Профессиональный сервисный центр по ремонту электросамокатов в Москве.
    Мы предлагаем: ремонт электросамокатов в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  6. Judi表示:

    Hello! I could have sworn I’ve been to this blog before but after checking
    through some of the post I realized it’s new to me. Anyhow,
    I’m definitely happy I found it and I’ll be bookmarking and checking back often!

  7. Kourtney表示:

    Hello, I think your blog might be having browser compatibility issues.
    When I look at your website in Safari, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, wonderful blog!

  8. Профессиональный сервисный центр по ремонту моноблоков iMac в Москве.
    Мы предлагаем: мастер по ремонту imac
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Тут делают продвижение разработка сайта медицинской клиники создание сайтов для клиники

  10. Spencer表示:

    Hello there! I could have sworn I’ve been to this website before but after going through some of the articles I realized it’s
    new to me. Anyhow, I’m certainly delighted I came across it and I’ll be bookmarking it and checking back often!

  11. Ремонт телефонов表示:

    Профессиональный сервисный центр ремонт телефонов цены ремонт телефонов в москве адреса

  12. Branden表示:

    Yes! Finally someone writes about >.

  13. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: ремонт крупногабаритной техники в воронеже
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  14. Una表示:

    Keep on working, great job!

  15. Madie表示:

    I couldn’t resist commenting. Exceptionally well written!

  16. Ремонт телефонов表示:

    Профессиональный сервисный центр ремонт телефонов москва дешево ближайший ремонт сотовых

  17. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: ремонт бытовой техники в воронеже
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. Тут делают продвижение seo медицинских сайтов сео медицина

  19. russiastarz表示:

    Зеркало сайта помогает обойти блокировки на https://888starz-russia.online

  20. Ремонт телефонов表示:

    Профессиональный сервисный центр качественный ремонт телефонов ремонт телефонов цены

  21. Essie表示:

    Hello there! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in trading links or maybe guest writing a blog
    post or vice-versa? My blog covers a lot of the same subjects as yours and I believe we could greatly benefit from each other.
    If you happen to be interested feel free to shoot me an email.
    I look forward to hearing from you! Wonderful blog by the way!

  22. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервисные центры по ремонту техники в воронеже
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  23. Devin表示:

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now
    each time a comment is added I get four e-mails with
    the same comment. Is there any way you can remove me
    from that service? Cheers!

  24. Robertdef表示:

    пин ап официальный сайт пинап казино пин ап зеркало

  25. Тут делают продвижение создание медицинского сайта разработка сайта медицинской клиники

  26. ForrestVal表示:

    пин ап кз: пин ап кз – пинап казино

發佈留言

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