網頁圖示的製作方式

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

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

32,090 Responses

  1. Robertfap表示:

    https://tadalmed.shop/# Cialis en ligne

  2. DavidBredo表示:

    металлические пины значки значки из металла на заказ

  3. Way cool! Some extremely valid points! I appreciate you penning this post and the rest of the website is
    extremely good.

  4. mostbet_fsMl表示:

    служба поддержки мостбет номер телефона https://mostbet3025.ru .

  5. Robertfap表示:

    http://kamagraprix.com/# Acheter Kamagra site fiable

  6. kzoehqadn表示:

    La diferencia entre estos juegos y los deberes tradicionales, es que los juegos de fútbol que hemos elaborado son realmente divertidos. Cualquier niño o niña que sea aficionado a este deporte disfrutará pasando las pantallas de los diferentes juegos. ¿Qué sucedió en la tanda de penaltis de la Eurocopa de 2008? Por España lanzaron 5 jugadores diestros (Villa, Cazorla, Senna, Güiza y Cesc), los cuales, curiosamente, lanzaron solo dos de los cinco penaltis hacia su lado natural (Villa y Cazorla, anotando los dos) y tres hacia su lado no natural (Senna que marca, Güiza que falla el suyo y Cesc que clasifica a España a semifinales). Valverde, desatado, comentó las sensaciones en una tanda así: “Para todo aquel que haya tirado un penalti es un desahogo. Muchos nervios en la caminata, muchas cosas que se te pasan por la cabeza… Tienes mucha gente detrás, pero gracias a Dios hemos ganado”.
    http://www.gothicpast.com/myomeka/posters/show/81832
    This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data. El juego de Lucky Jet está disponible en versión “demo” o gratuita en la mayoría de los casinos en línea que lo incluyen en su repertorio. Jugar en esta modalidad puede traer beneficios para los jugadores, en especial para los novatos en las dinámicas a la hora de hacer apuestas. Por ejemplo: Al igual que otros juegos de explosión en línea, en este se ve a un valiente enmascarado que despega con su jetpack por los cielos. En algún momento casi se adentra en los enormes reinos del espacio. Las nubes pasan por debajo de él y las estrellas centellean en el cielo mientras vuela. Y debido a este tema único, Lucky Jet se ha incorporado a los catálogos de algunas de las mayores plataformas de casino online.

  7. Robertfap表示:

    https://tadalmed.shop/# Acheter Cialis

  8. QQ88 COM表示:

    I’m curious to find out what blog platform you happen to be working with?
    I’m having some minor security issues with my latest site and I
    would like to find something more risk-free. Do you have any recommendations?

  9. 1win_lsEr表示:

    1хставка лайв https://1win8007.ru/ .

  10. With havin so much written content do you ever run into any problems of plagorism or copyright violation? My website has a lot
    of completely unique content I’ve either written myself
    or outsourced but it appears a lot of it is
    popping it up all over the internet without my permission. Do you know any ways to help protect against content from being stolen? I’d
    certainly appreciate it.

  11. Robertfap表示:

    http://kamagraprix.com/# Kamagra Commander maintenant

  12. Robertfap表示:

    http://tadalmed.com/# cialis prix

  13. That is a great tip especially to those fresh to the blogosphere.
    Simple but very precise information… Appreciate your sharing this one.
    A must read post!

  14. Bernardshoor表示:

    Kamagra Oral Jelly pas cher: kamagra 100mg prix – acheter kamagra site fiable

  15. 69VN表示:

    Highly energetic blog, I liked that bit. Will there be a part 2?

  16. BillieLet表示:

    Acheter Cialis: cialis generique – cialis prix tadalmed.shop

  17. 1win_tgEr表示:

    скачать lucky jet 1win https://1win8007.ru/ .

  18. Attractive section of content. I just stumbled upon your site and in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I will be subscribing to your augment and even I achievement you access consistently fast.

  19. visit now表示:

    Thank you for the good writeup. It actually used to be a leisure account
    it. Glance complicated to far added agreeable from you!
    However, how can we be in contact?

  20. BradleyJaire表示:

    Acheter Cialis: Tadalafil 20 mg prix sans ordonnance – Acheter Cialis 20 mg pas cher tadalmed.shop

  21. Robertfap表示:

    https://tadalmed.com/# cialis prix

  22. маркетплейс для реселлеров профиль с подписчиками

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

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