Главная » Создание сайта » Первые шаги » Cмена стандартной иконки сайта favicon.ico на свою

Cмена стандартной иконки сайта favicon.ico на свою

19.01.2012 в 22:43
Автор: Prochtenniy   

favicon.ico - Это иконка сайта отображающаяся с левой стороны браузерной строки (рис. 1).


Рисунок 1


Иконку favicon.ico многие владельцы сайтов стараются изменить для того чтобы она отображала к примеру логотип сайта или его тематику. Сайт с собственной иконкой, красиво будет смотреться, а также иконка сайта может помочь запомнить сайт пользователю или привлечь его внимание!

Замена стандартной иконки favicon.ico на свою

Для того чтобы приступить к процессу изменения иконки сайта, необходимо найти или изготовить изображение (иконку) на которую будем менять стандартную. Для этого можно воспользоваться интернетом, где найти уже готовые изображения (Набор иконок). Или можно воспользоваться фото-редакторами, в которых создать изображение самому. Главное чтобы изображение иконки имело расширение ico. Если Вы нашли подходящее изображение с другим расширением или фото-редактор не поддерживает сохранение изображение с расширением ico, это не страшно, ниже в инструкции будет описание того как можно изменить любое расширение иконки на ico.

1. После того как изображение найдено или создано, необходимо зайти на сайт favicon.ru, добавить Вашу картинку с компьютера или указать прямую ссылку на иконку в интернете. Затем нажать на кнопку "Создать favicon.ico" (рис 2).


Рисунок 2


Далее Вас перекинет на страницу с результатом (созданным favicon.ico). Здесь Вы даже сможете посмотреть как она будет выглядеть и если Вам понравится результат, нажатием на ссылку "Скачать favicon.ico!" сохраните её на компьютер (рис 3).



Рисунок 3


2. После того как иконка favicon.ico создана, её нужно загрузить в файловый менеджер. Для того чтобы зайти в файловый менеджер, в админ-баре нажмите (Управление) и затем выберите (Файловый менеджер) (рис. 4). Или можете зайти в файловый менеджер через панель управления (рис. 5)


Рисунок 4


Рисунок 5


После того как Вы зашли в файловый менеджер, нажмите на кнопку "Загрузить файл" (рис. 6) и загрузите свою иконку.


Рисунок 6


После загрузки иконки favicon.ico, стандартная иконка uCoz будет заменена. Для того чтобы посмотреть как будет смотреться Ваша иконка favicon.ico на сайте, нужно нажать на кнопку "Посмотреть файл" (рис. 7). И обновить страницу (рис. 8)


Рисунок 7


Рисунок 8


После обновления страницы, стандартная иконка favicon.ico будет изменена на Вашу (рис. 9)


Рисунок 9


+ Дополнительная информация:

- Иконку сайта можно заменить и другим способом. Для этого нужно прописать в коде страниц сайта в верхней части между <head></head> (рис. 10 ) код в котором указать ссылки на иконку:

Code
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">



Рисунок 10


Такой способ замены иконки сайта может пригодится к примеру в модуле "Каталог сайтов", где подставив адрес добавленного сайта, можно будет отображать иконку favicon.ico добавленного сайта в каталог.

- Под фото-редактором в данном примере подразумевался photoshop. Так же можете попробовать воспользоваться онлайн генераторами favicon.ico (Пример)

favicon, favicon.ico, фавикон, иконка сайта, иконка


Рейтинг: -15  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 28798          Комментариев: 14

Похожие инструкции

16.08.2014 в 12:12      0  

Помогите пожалуйта,  не понимаю, на какую страницу вставлять (во всех браузерах кроме ИЕ все нормально)
<link rel="icon" href="/favicon.ico" type="image/x-icon">                          
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
На Все!!!!!????
Я несколько страниц посмотрела, не вижу там Head - никаких smile
Очевидно, что то не то делаю!!
Напрмер - вот главная:
<table align="center" cellpadding="1" cellspacing="1" style="width: 580px;">
 <tbody>
 <tr>
 <td>$IMAGE1$</td>
 <td>
 <h1 style="text-align: center; color: rgb(85, 85, 85); font-family: Arial; font-size: 12px; background-color: rgb(239, 239, 239);"><span style="color: rgb(0, 0, 128);"><font face="Monotype Corsiva" style="font-size: 36pt;"><b>Practice Best</b></font></span></h1>

 <h1 style="text-align: center; color: rgb(85, 85, 85); font-family: Arial; font-size: 12px; background-color: rgb(239, 239, 239);"> </h1>

 <h2 style="text-align: center; color: rgb(85, 85, 85); font-size: 12px; background-color: rgb(239, 239, 239);"><em><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;"><strong style="line-height: 1.6;"><span style="color: rgb(0, 0, 128); line-height: 1.6;">Лучшие обучающие решения</span></strong></span></span></em></h2>
 </td>
 </tr>
</tbody>
</table>

<h1 style="text-align: center; color: rgb(85, 85, 85); font-family: Arial; font-size: 12px; background-color: rgb(239, 239, 239);"><strong><span style="font-size: 12px;"><span style="font-family: arial,helvetica,sans-serif;"><span style="color: rgb(0, 0, 128);">Каждый день знания и опыт наших сотрудников </span><span style="color: rgb(0, 0, 128); line-height: 1.6;">способствуют </span></span></span></strong><strong style="line-height: 1.6;"><span style="color: rgb(0, 0, 128); line-height: 1.6;">развитию бизнеса и увеличению прибыли партнеров </span></strong></h1>

Дальше тоже нет...
16.08.2014 в 12:24      0  

Теги:
Код
<head></head>
находятся в шаблонах, в панели управления сайтом в "Дизайн" - "Управление дизайном (шаблоны)".
02.08.2014 в 07:26      0  

Помогите пожалуйста! Вроде всё сделал как написано. Ничего не меняется.
02.08.2014 в 20:39      0  

Почистите кеш браузера. Перезагрузите браузер. Это если сделали все правильно.
19.09.2012 в 12:15      0  

Опять двадцать пять! Пятый раз вижу подобную инструкцию
30.06.2012 в 16:22      +3  

Уф, Господа авторы - не быть вам Техническими писателями.
Зачем в инструкции по смене иконки даются указания, КАК создать иконку. Для создания иконки есть масса вариантов. Дайте ссылку и народ разберется.
А главное в инструкции это 1 предложение!
"Назовите файл иконки, которую желаете поместить взамен стандартной, как favicon.ico и загрузите в файловый менеджер"
И все!!!
11.03.2012 в 12:17      0  

таких инструкций были десятки, не понимаю почему выбрали именно эту

Valensija

Спам
31.01.2012 в 09:48      0  

Для новичка смена иконки- это смешно. Для него важнее общая настройка сайта и работа с модулями. Иконка-это уже последующий этап.Нужно вообще для новичков в инструкциях обходиться без кодов. Я поставлю -.
21.01.2012 в 14:34      0  

Так же можете попробовать воспользоваться онлайн генераторами favicon.ico

Плохая идея , как правило самый надёжный и простой вариант для изнотовления иконки это Ms Paint и для преобразования в формат ICO - встроенный редактор Total Commander . Даёт 100% корректный формат ICO в отличии от многих Online создателей иконок ...
21.01.2012 в 07:43      0  

Сделал всё как надо.В каталоге файлового менеджера новая иконка есть, запись прежней иконки тоже не пропала. Только вот замены иконки не происходит, хоть манипуляцию проводил чисто из технического интереса.
23.06.2012 в 19:08      0  

Во первых иконка обновляется в течении некоторого времени, во вторых почистите кеш и куки,проверьте правильно ли указан путь к фавикон, если сделали всё правильно всё у вас будет показывать нормально.
20.01.2012 в 22:06      0  

От новичка в uCoz.
Тема достаточно полно раскрыта в разделе первые шаги.
Почти один в один читал многократное повторение данной информации.
Обратил внимание в инструкции на рисунок №10.
По информации на форуме, это действие предназначено в первую очередь для того, чтоб ИЭ показывал иконку, так как в обычном режиме он может её "не замечать".
20.01.2012 в 20:34      0  

Если бы мне попалась такая статья, когда я начинал, то помогла бы. Информативно!
1 2 »