Favicon – изкуство в 16px

Нека започнем от тук – какво е Favicon и да продължим с малко разяснения как да си направим такъв.

Не знам точно кога започнаха масово да се слагат Favicon-и по сайтовете, но мисля че беше преди две три години някъде, а вече почти няма сайт в който да няма.
Какво всъщност е Favicon – това е малката иконка, която се появява преди името на сайта в адрес бара на браузера, и представлява малко ico файлче с точно определени размери 16×16 пиксела, което се намира в главната директорията на съответният уеб сайт. Идеята му мисля че е ясна.

Все пак ако използвате Photoshop, а щом се намирате в моя блог вероятността е голяма, ще видим как можем да създадем Favicon с Photoshop.
Проблемът е там, че Photoshop не може да запазва .ico файлове, a favicon-ите, трябва да са в такъв формат!
Решението е един плъгин, който може да изтеглите от тук. Този плъгин трябва да отиде в C:Program FilesAdobeAdobe Photoshop CS3Plug-InsFile Formats, рестартирайте Photoshop и вече след Save as ще може да запазвате и .ico файлове.

За да вмъкнете favicon-а в сайта си, трябва да добавите този код <link rel=”shortcut icon” href=”favicon.ico” /> , в хедъра на index-а, което предполага, че .ico файла трябва да се намира в root директорията, където се намира и index файла на сайта/блога ви.

Smashing Magazine имат няколко поста, които говорят достатъчно за изкуството в тези малки картинки.
Ето и един сайт, който лесно ще генерира Favicon от “обикновен файл”.

Коментари през Facebook

6 Comments
  • SSH_ON
    March 3, 2008

    Favicon-ката е много важна. Помага много за brand-инга.

  • Profruit
    July 18, 2008

    Днес получих спам в пощата си и забелязах фаворитната. През файърфокса тя е анимирана
    dupeta.net
    Нещо по въпроса?
    В кода четем
    href=”./favicon.ico” type=”image/vnd.microsoft.icon”
    и признавам, че ми е интересно, как е постигнато.

    поздрави

  • ph1x
    July 19, 2008

    Ще дам пример с проста структура – имаш index.html и в същата директория в която е той слагаш и favicon-a. До тук всичко е нормално, но за да е анимирана има една подробност.
    Фавиконката нека e gif, не и променяй формата на ico, а само го допиши в името на файла преди разширението, както ще видиш по-долу в source-a. И съответно кода трябва да изглежда така.
    link href=”favicon.ico.gif” type=”image/gif” rel=”icon” /
    като пред и зад този ред трябва да има <>

    Може да има и други финтове да излъжеш браузъра, но аз това съм тествал и работи. И имаи на ум, че този ефект само Firefox може да го възпроизведе засега.

  • т
    June 12, 2009

    неработи

  • ph1x
    June 12, 2009

    хм странно

  • ph1x
    June 12, 2009

    явно код в коментар може да счупи дизайна понякога

Остави коментар

Your email address will not be published. Required fields are marked *