Favicon – изкуство в 16px
Нека започнем от тук – какво е Favicon и да продължим с малко разяснения как да си направим такъв.
Не знам точно кога започнаха масово да се слагат Favicon-и по сайтовете, но мисля че беше преди две три години някъде, а вече почти няма сайт в който да няма.
Какво всъщност е Favicon – това е малката иконка, която се появява преди името на сайта в адрес бара на браузера, и представлява малко ico файлче с точно определени размери 16×16 пиксела, което се намира в главната директорията на съответният уеб сайт. Идеята му мисля че е ясна.
Все пак ако използвате Photoshop, а щом се намирате в моя блог вероятността е голяма, ще видим как можем да създадем Favicon с Photoshop.
Проблемът е там, че Photoshop не може да запазва .ico файлове, a favicon-ите, трябва да са в такъв формат!
Решението е един плъгин, който може да изтеглите от тук. Този плъгин трябва да отиде в C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats, рестартирайте Photoshop и вече след Save as ще може да запазвате и .ico файлове.
За да вмъкнете favicon-а в сайта си, трябва да добавите този код <link rel=”shortcut icon” href=”favicon.ico” /> , в хедъра на index-а, което предполага, че .ico файла трябва да се намира в root директорията, където се намира и index файла на сайта/блога ви.
Smashing Magazine имат няколко поста, които говорят достатъчно за изкуството в тези малки картинки.
Ето и един сайт, който лесно ще генерира Favicon от “обикновен файл”.
Коментари
6 коментара на “Favicon – изкуство в 16px”
остави своето мнение
Favicon-ката е много важна. Помага много за brand-инга.
Днес получих спам в пощата си и забелязах фаворитната. През файърфокса тя е анимирана
dupeta.net
Нещо по въпроса?
В кода четем
href=”./favicon.ico” type=”image/vnd.microsoft.icon”
и признавам, че ми е интересно, как е постигнато.
поздрави
Ще дам пример с проста структура – имаш index.html и в същата директория в която е той слагаш и favicon-a. До тук всичко е нормално, но за да е анимирана има една подробност.
Фавиконката нека e gif, не и променяй формата на ico, а само го допиши в името на файла преди разширението, както ще видиш по-долу в source-a. И съответно кода трябва да изглежда така.
link href=”favicon.ico.gif” type=”image/gif” rel=”icon” /
като пред и зад този ред трябва да има <>
Може да има и други финтове да излъжеш браузъра, но аз това съм тествал и работи. И имаи на ум, че този ефект само Firefox може да го възпроизведе засега.
неработи
хм странно
явно код в коментар може да счупи дизайна понякога