среда

Favicon для сайта. Легко и быстро

iconpng1Давно уже хотел себе сделать фавикошку для своего сайта tellme.org.ua то все времени никак не было, а поза вчера, сел и сделал, хотя мыслей делать его не было вообще, все произошло настолько спонтанно.. Справа, и есть мой фавикон. Ниже расскажу подробности их творения..



Favicon – это маленькая иконка вашего сайта, которая отображается в браузерах возле адресной строки, дабы пользователь смог визуально отличить ваш сайт среди других, не только по его адресу
12
Это панель моих закладок, название сайтов я специально убрал, потому что мне хватает и значков. А там где надо, текст еще присутствует. Этим я экономлю свое пространство на панели, и могу поместить больше нужного.

Ну в целом я думаю разобрались, что это такое. Теперь поговорим, о том как их делать. Расскажу как делал фавикон я:
  • В фотошопе создал новый документ, размерами 32*32px
Почему 32 на 32? Я сохранял его потом в формате .PNG, для тех, кто хочет сохранять в формате .ICO, создавайте файл с расширениями 16*16 .
  • С помощью своих возможностей нарисовал вышестоящую картинку. Использую инструмент векторных фигур, под горячей клавишей U, заливкой и текстом T
В идеале, начинайте рисовать в документе с большими разрешениями, ну например 200 на 200, так вам будет легче с деталями, но потом когда будете сжимать к меньшим пропорциями, проследите за мелочами.
  • Обратите внимание на фоновый цвет – у меня его нету, фоновый слой я удалил.
А чтобы прозрачность осталось, сохранять нужно по следующему алгоритму: Save for Web и выбираете формат PNG, я его предпочитаю. Он сохраняет прозрачность и хорошее качество цветов. GIF – тоже можно, но только в случае если в вашем файле не так много цветов, до 256, так как там ограниченная палитра, придется урезать цвета.
  • Все на этом этапе фавикон готов, можно полюбоваться.
Далее нужно его прописать на сайте
Следующий код нужно вставить между тегами <head> </head>
<link rel="icon" type="image/png" href="/someimage.png" />
Обратите внимание на то, что я выделил полужирным стилем.
PNG – это формат вашего фавикона, может быть и .ICO
/someimage.png – абсолютный пусть к файлу фавикона. Может находится и на другом сайте, главное чтобы доступ был

В принципе это все, под конец еще кину пару ссылок для ознакомления:
ru.wikipedia.org/wiki/Favicon – сами понимаете, википедия, от туда я взял код для сайта, ибо сам не помню:)
favicon.cc – для тех, кому сложно нарисовать в фотошопе, могут прямо на сайте это сделать. И сохранить себе на комп. Все достаточно просто.

6 коммент.:

TiamatInc комментирует...

Только почему-то я его не наблюдаю у блога. Или это не для него делался фавикон?

Yurbasik комментирует...

tellme.org.ua - для него делал!

axel комментирует...

у меня у твоего favico края какие то неточные... некрасивые короче..

Yurbasik комментирует...

скинь принтскрин, не знаю, проверял несколькими способами, все отлично

Romires комментирует...

интересно, а в блогспот можно свою фавиконку поставить?

Юрчик комментирует...

В принципе да, нужно только хорошенько в html редакторе покопаться

Отправить комментарий