網頁圖示的製作方式

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

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

13,609 Responses

  1. DouglasOpero表示:

    The legendary Spanish racer Fernando Alonso https://formula-1.fernando-alonso.cz returns to Formula 1 after several years.

  2. StacySwers表示:

    Jon Jones https://ufc.jon-jones.cz a dominant fighter with unrivaled skill, technique and physique who has conquered the light heavyweight division.

  3. Henrytal表示:

    An article about the triumphant 2023 Ferrari https://ferrari.charles-leclerc.cz and their star driver Charles Leclerc, who became the Formula world champion 1.

  4. I’ve been browsing on-line greater than three hours
    these days, yet I never found any fascinating article like yours.
    It is beautiful price sufficient for me.
    In my view, if all website owners and bloggers made excellent content material as you did, the internet
    might be a lot more helpful than ever before.

    Here is my blog xentermine vs phenq

  5. Amazing blog! Do you have any recommendations for aspiring writers?
    I’m hoping to start my own site soon but I’m a little lost on everything.
    Would you propose starting with a free platform like WordPress or go for a paid option? There are so many choices
    out there that I’m completely confused .. Any suggestions?
    Many thanks!

    Feel free to visit my web site … red boost powder

  6. memek enak表示:

    Heya i’m for the first time here. I came across this board
    and I find It truly useful & it helped me out much. I hope
    to give something back and aid others like you helped
    me.

  7. Raymondemimi表示:

    Witness the thrilling story of Jiri Prochazka’s https://ufc.jiri-prochazka-ufc.cz rapid rise to the top of the UFC’s light heavyweight division, marked by his dynamic fighting style and relentless determination.

  8. Derrickdonee表示:

    The inspiring story of the ascent of the young actress Anya Taylor https://queensmove.anya-taylor-joy.cz to fame after her breakthrough performance in the TV series “The Queen’s Move”. Conquering new peaks.

  9. Edwardkic表示:

    An indomitable spirit, incredible skills and five championships – how Kobe Bryant https://losangeles-lakers.kobe-bryant.cz became an icon of the Los Angeles Lakers and the entire NBA world.

  10. GarryVok表示:

    The inspiring story of Zendaya’s rise https://spider-man.zendaya-maree.cz, from her early roles to her blockbuster debut in Marvel Cinematic Universe.

  11. Dariusexews表示:

    Carlos Vemola https://oktagon-mma.karlos-vemola.cz Czech professional mixed martial artist, former bodybuilder, wrestler and member Sokol.

  12. You’ve provided a fresh take on this issue.구글상위노출

  13. obviously like your web-site however you have to check the
    spelling on quite a few of your posts. A number of them are
    rife with spelling issues and I find it very bothersome to inform the truth nevertheless I will definitely
    come back again.

    Feel free to surf to my blog post Buy Ozempic Online Cross-Border

  14. Davidzoola表示:

    Follow Liam Neeson’s career https://hostage.liam-neeson.cz as he fulfills his potential as Brian Mills in the film “Taken” and becomes one of the leading stars of Hollywood action films.

  15. Spot on with this write-up, I seriously believe this web
    site needs far more attention. I’ll probably be back again to
    read more, thanks for the information!

  16. RobertDix表示:

    Emily Olivia Laura Blunt https://oppenheimer.emily-blunt.cz British and American actress. Winner of the Golden Globe (2007) and Screen Actors Guild (2019) awards.

  17. Calvintok表示:

    Try to make a fascinating actor Johnny Depp https://secret-window.johnny-depp.cz, who will become the slave of his strong hero Moudriho Creeps in the thriller “Secret Window”.

  18. Richardbop表示:

    Jackie Chan https://peakhour.jackie-chan.cz from a poor boy from Hong Kong to a world famous Hollywood stuntman. The incredible success story of Jackie Chan.

  19. RobertSmola表示:

    Fascinating event related to this Keanu Reeves helped him in the role of the iconic John Wick characters https://john-wick.keanu-reeves.cz, among which there is another talent who has combat smarts with inappropriate charisma.

  20. Situs Penipu表示:

    Remarkable! Its truly awesome paragraph, I have got much clear idea regarding from
    this piece of writing.

  21. Keithamasp表示:

    The fascinating story of Antonio Rudiger’s transfer https://real-madrid.antonio-rudiger-cz.com to Real Madrid and his rapid rise as a key player at one of the best clubs in the world.

  22. ZacheryHoono表示:

    The fascinating story of Marcus Rashford’s ascent https://manchester-united.marcus-rashford-cz.com to glory in the Red Devils: from a young talent to one of the key players of the team.

  23. Kennethunomo表示:

    The story of how the incredibly talented footballer Riyad Mahrez https://alahli.riyad-mahrez-cz.com reached new heights in career, moving to Al Ahly and leading the team to victory.

  24. CurtisJek表示:

    Romelu Lukaku https://chelsea.romelu-lukaku-cz.com, one of the best strikers in Europe, returns to Chelsea to continue climbing to the top of the football Olympus.

  25. pkv games表示:

    It’s amazing for me to have a site, which is
    useful for my experience. thanks admin

  26. I enjoy what you guys tend to be up too. This kind of clever work and reporting!
    Keep up the great works guys I’ve included you guys to blogroll.

  27. Bcezwq表示:

    where can i order durex gel – where can i buy latanoprost zovirax sale

發佈留言

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