Учимся вместе ::: Сделай на компьютере ::: Сделаем сайту favicon

Привлечь внимание к своему сайту, сделать его более популярным — основная задача большинства владельцев интернет-ресурсов. Одной из распространенных новинок современного сайта является внедрение так называемых фавиконок (favicon, от favourite icon — любимая иконка). Разве вы не заметили, как однажды в вашем браузере возле ссылок на сайты начали появляться небольшие значки, символизирующие тематику сайта, а чаще всего являющиеся упрощенной минимизированной копией логотипа сайта? Например, вот такие:

\
 
\
 
\
 
\
 
\

Те же иконки начали возникать и в поисковых системах:

\

«Хочу такую!» - немедленно воскликнули миллионы разработчиков и владельцев сайтов. Ну что ж, сделаем ;)

Начнем с того, что нам необходима любая программа, способная сохранять изображения в формате .ico, таких программ великое множество, поэтому мы обратимся к старому доброму Adobe Photoshop, предварительно установив на него дополнительный плагин (прилагается ниже).

Далее все просто — создаем файл размером 16х16px (можно и большего размера, но тогда браузер будет самостоятельно уменьшать размер до 16х16px без сохранения пропорций, а таких вольностей не стоит ему позволять!). Рисуем в этом окне то, что в дальнейшем будет вашей иконкой. Например, сделаем favicon из логотипа Школьного университета.

Векторный логотип в формате .ai (Adobe Illustrator) добавляем в созданный нами выше файл Photoshop при помощи Place (File/Place...). Фотошоп автоматически подгоняет его размер под размер нашего окна (16х16), жмем Enter — вобщем-то все готово. Если требуется корректировка векторного изображения — во вкладке Layers двойным кликом жмем по пиктограмме соответствующего слоя, чем вызываем Adobe Illustrator, в котором и производим необходимые исправления.

\

 К этому слою можно применять различные стили и эффекты. Можно также создать отдельным слоем цветную подложку. А можно и вовсе нарисовать иконку полностью «с нуля». Когда шедевр будет готов, сохраняем его в формате .ico (Ctrl-Shift-S, из списка выбираем ICO (Windows Icon) — конечно, если предварительно был установлен вышеупомянутый плагин, в поле Filename набираем название favicon.ico, жмем кнопку Save).

\

 

В результате получаем необходимую иконку \

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

code

где path/favicon.ico — путь до иконки.

Ну вот собственно и все. В браузере иконка должна появиться сразу же (если этого не произошло, попробуйте перезагрузить страницу или очистить кэш), на Яндексе и прочих поисковиках — позднее (когда будет проиндексирована ваша страница).

 

\

 

 

Прим. Favicon может быть не только в формате .ico, но и в любом другом графическом формате. Правда в этом случае вы не увидите ее в Internet Explorer.

 

 

 

<<< Предыдущая работа

Вернуться в галерею "Учимся вместе"
Сделаем сайту favicon
Автор: anqi
Город: Томск
Скачать (26 Kb) [2]
Дата: 26.06.2008  11:29
Комментариев: 3
Просмотров: 169
Оценка: 3 (2|1|0|0|0) [2]

Вернуться на главную
  Работа опубликована администратором busy  
Вы не можете оценивать

КОММЕНТАРИИ К РАБОТЕ:
krikun* ::: комментарий от 12.10.2008 | 07:08
krikun Сведущий (ур.9)
Очки: 2984
Город: Усолье-Сибирское
Тв. работ: 13
Рег: 19.06.2008 (7896)
Не скажу, что очень пригодится, но на свой сайт сделаю.


--------------------
Лучше поздно чем никогда!!!
Сил* ::: комментарий от 27.09.2008 | 17:30
Сил Неофит (ур.7)
Очки: 1118
Город: с. Михайловка
Тв. работ: 23
Рег: 10.12.2006 (1744)
Спасиьо большое! Как раз хотел такую вещь попробовать сделать, но незнал как!


--------------------
Делай, что должен, и будь, что будет.
Yarick* ::: комментарий от 27.06.2008 | 20:29
Yarick Ученик (ур.11)
Очки: 5702
Город: Самара
Тв. работ: 82
Рег: 30.12.2007 (6467)
Урок хороший и полезный, но я это знал.