網頁圖示的製作方式

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

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

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

  2. Aw, this was a very nice post. Spending some time and actual effort to create a great article… but what can I say… I put things off a whole lot and don’t seem to get nearly anything done.

  3. ForrestVal表示:

    пин ап: пин ап зеркало – pin up

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

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

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

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

  8. LeroyAcuff表示:

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

  9. LeroyAcuff表示:

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

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

  11. Robertdef表示:

    пин ап вход пин ап казино пин ап вход

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

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

  14. Unquestionably believe that which you said. Your favorite justification appeared to be on the net the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries that
    they plainly do not know about. You managed to hit the
    nail upon the top as well as defined out the whole thing without having side-effects , people
    can take a signal. Will likely be back to get more.
    Thanks

  15. Gabrielwaimb表示:

    пин ап http://pinupkz.tech/# pin up казино
    пин ап казино онлайн

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

  17. Robertdef表示:

    pin up az pin-up kazino pinup az

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

  19. DonaldRer表示:

    pin up azerbaijan: pin up 306 – pin up casino

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

  21. By interacting with these dolls, patients can gradually learn toラブドール オナニー navigate social cues and build confidence in a low-risk environment.

  22. Тут делают продвижение стратегия с роботами стратегия с роботами

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

  24. ForrestVal表示:

    пин ап казино зеркало: пин ап казино вход – pin up зеркало

  25. В магазине сейфов предлагают взломостойкие сейфы 2 класса сейфы второго класса

  26. В магазине сейфов предлагают сейфы второго класса купить сейф 2

  27. Gabrielwaimb表示:

    пинап кз http://pinupaz.bid/# pinup az
    пинап кз

發佈留言

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