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


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

Анимированная иконка в Адресной строке браузера Internet Explorer.

Странно, за что только не возьмёшься в области Веб, почти всегда создаётся впечатление, что вступаешь на terra incognita.

Отчасти это связано с моей дремучестью, но почему я не смог найти в сети нормальное руководство на тему: «Как создать иконку и установить её на сайт»…

В этой статье я попытался ответить на вопросы, возникшие при создании иконки и ярлыков, размещении их на сайте и проверке отображения этих элементов Веб-дизайна в разных браузерах. https://oldoctober.com/

Надеюсь, что эта статья сэкономит кому-нибудь один день жизни. :)


Самые интересные ролики на Youtube

Смотреть на Youtube Смотреть на Youtube Смотреть на Youtube Смотреть на Youtube

Близкие темы.

Как добавить логотип или водяной знак к изображению? FAQ.

В этой статье есть свежая информация о кэше современных версий популярных браузеров.



Часто задаваемые вопросы (FAQ).

  1. Что такое иконка и ярлык, принадлежащие Веб странице, и какими они бывают?
  2. Какого размера должны быть изображения, которые входят в состав файла favicon.ico?
  3. Каково назначение изображений входящих в состав файла favicon.ico?
  4. Почему я не вижу на Рабочем столе и в Файловом менеджере ярлык ссылки на Веб страницу?
  5. Как и в какой программе можно сохранить несколько изображений в одном файле ICO?
  6. Как создать анимированную иконку для сайта?
  7. Как анимированные иконки отображаются в разных браузерах?
  8. Как создать эскиз для иконки и ярлыков?
  9. Каков размер и формат исходных изображений для иконок?
  10. Как подготовить изображение для программы IcoFX чтобы сохранить прозрачность?
  11. Как создать и отредактировать GIF-анимированную картинку в программе Photoshop?
  12. Как создать файл формата ICO в программе IcoFX?
  13. Какой HTML код необходимо прописать, чтобы браузер начал показывать иконку?
  14. А что если не вставлять никакой код, а иконку разместить?
  15. Почему в браузере иконка отображается, а ярлык на Рабочем столе и в Проводнике – нет?
  16. Как будут отображаться иконки в браузерах, если иконок сразу две - в формате GIF и ICO?
  17. Почему браузер не показывает впервые установленную или обновлённую иконку?
  18. Как очистить кэш популярных браузеров, чтобы увидеть новую иконку?
  19. Где конкретно хранятся иконки в кэше разных браузеров?
  20. Отображение иконок в популярных CMC (движках).
  21. Отображение анимированных иконок в поисковых машинах.

Что такое иконка и ярлык, принадлежащие Веб странице, и какими они бывают?

Иконка 16x16px в Адресной строке браузера.

Когда мы открываем страницу сайта, имеющего иконку, то наш браузер скачивает набор картинок, упакованных в файл в формате ICO.

После этого, изображение иконки появляется в Адресной строке браузера.

Если мы сохраним адрес странички в Закладках (Избранном), то иконка появляется и там.


Набор иконок и ярлыков в файле favecon.ico.

Кроме этого, в набор изображений упакованных в файл формата ICO входят картинки бо’льшего размера, нежели те, что демонстрирует браузер. Эти картинки используются в качестве ярлыков при сохранении странички в виде ссылки на Рабочем столе или в Файловом менеджере. https://oldoctober.com/


Часто, файл, в который упакованы иконка и ярлыки, называется favicon.ico. Название это не обязательное, но желательное.

Перейти к меню статьи.



Какого размера должны быть изображения, которые входят в состав файла favicon.ico?

Набор иконок и ярлыков в файле favecon.ico.

Обычно в файле favicon.ico, используемого в Веб, всего три изображения размерами: 16x16, 32x32, и 48x48 пикселей.

Количество и параметры изображений входящих в состав файла ICO зависят от его назначения.

Например, в комплект системных ярлыков MAC ОС входят изображения следующих размеров: 16x16, 32x32, 48x48, 125х125, 256x256, 512х512 пикселей.

В ОС Windows используется другой комплект, размерами: 16x16, 32x32, 48x48, 256x256 пикселей.

Перейти к меню статьи.



Каково назначение изображений входящих в состав файла favicon.ico?

Назначение отдельных изображений, которые мне лично удалось идентифицировать для Windows, следующее:

Иконка 16x16px в Адресной строке браузера.

16x16 пикселей – иконка для сайта, которая отображается в Адресной строке браузера.


Иконка 16x16px в закладках браузера.

16x16 пикселей – иконка для сайта, которая отображается в Закладках (Избранном) браузера.


Ярлык 32х32px. на Рабочем столе.

32x32 пиксела – ярлык, который можно разместить на рабочем столе.


Ярлык 48х48px в Файловом менеджене в режиме Эскизы старниц.

48x48 пикселей – ярлык в Файловом менеджере в режиме отображения "Эскизы страниц".


Ярлык 48х48px в Файловом менеджене в режиме Плитка.

48х48 пикселей – ярлык в Файловом менеджере в режиме отображения "Плитка".


Ярлык 32х32px в Файловом менеджене в режиме Значки.

32х32 пикселя – ярлык в Файловом менеджере в режиме отображения "Значки".


Ярлык 16х16px в Файловом менеджене в режиме Список и Таблица.

16х16 пикселей – ярлык в Файловом менеджере в режиме отображения "Список" и "Таблица".


Перейти к меню статьи.



Почему я не вижу на Рабочем столе и в Файловом менеджере ярлык сохранённой ссылки на Веб страницу?

Перетаскивание ярлыка из Адресной строки.

Ярлык можно разместить на рабочем столе или в Файловом менеджере только в том случае, если он был добавлен путём перетаскивания ярлычка (иконки) из адресной строки браузера или из Закладок (Избранного) на Рабочий стол или в Файловый менеджер.

При обычном способе сохранения страницы «Сохранить» (Save) или «Сохранить как» (Save As), изображение в ярлыке будет соответствовать изображению ярлыка браузера назначенного в операционной системе «По-умолчанию».


*Перетащить ярлычок из браузера Google Chrome можно только из Закладок (Избранного).

Перейти к меню статьи.



Как несколько изображений сохранить в одном файле ICO?

Набор иконок и ярлыков в файле favecon.ico.

Формат ICO является контейнером, в который можно упаковать несколько изображений. Если открыть файл с расширением ICO в многоформатном вьювере, то можно увидеть все эти изображения в виде многостраничного документа.

Естественно, что все специализированные программы для создания иконок тоже могут работать с каждым отдельным изображением включённым в файл формата ICO.


Если у вас уже имеется исходное изображение, то из него можно изготовить несколько иконок разного размера и упаковать их в один файл при помощи какой-нибудь программы для создания иконок.

Я для этого использовал первую попавшуюся в сети бесплатную программу – IcoFX. Ко всему прочему, программа оказалась мультиязычной. :)

06.2012г. К сожалению, программа IsoFx стала платной, что подтверждает некогда сделанный в её пользу выбор. Но, Вы всё ещё можете скачать бесплатную версию этой программы.


Скачать портативную программу IsoFX 1.6 (1,2 мБ). Пароль на архив: oldoctober.com


В приведённом примере, я буду использовать именно эту программу, чтобы создать иконку в формате ICO (точнее, создать иконку и несколько ярлыков).


*Маленькая справка. На сегодняшний день, последняя версия программы IcoFX не поддерживает создание ярлыков размером свыше 254х254 пикселя. Но, это может иметь значение только при создании больших системных ярлыков (512х512px.) для последних версий MAC ОС.

Перейти к меню статьи.



Как создать анимированную иконку для сайта?

Анимированная иконка в Адресной строке браузера.

Некоторые браузеры, например Firefox, могут показывать анимированные иконки.

Чтобы анимированную иконку увидел браузер, нужно дополнительно разместить на хосте файл в формате GIF-анимациии и прописать соответствующий код в целевой Веб странице.


Перейти к меню статьи.



Как анимированные иконки отображаются в разных браузерах?

Firefox прокрутит анимацию в адресной строке столько раз, сколько заложено в настройках файла GIF (1-32 раза) и остановится на последнем кадре GIF-анимации. Если в настройках GIF-анимации указать "Forever", то Firefox покажет анимацию только один раз и, опять таки, остановится на последнем кадре.


Opera и Chrome покажет в адресной строке только первый кадр GIF-анимации.


Internet Explorer не увидит файл GIF-анимации и вместо него покажет иконку из файла в формате ICO.

Первый и последний кадр анимации должны быть одинаковые.

Для того чтобы иконка, созданная в формате GIF-анимации, показывалась во всех браузерах одинаково, следует первый и последний кадр GIF-анимации также делать одинаковыми.


Перейти к меню статьи.



Как создать эскиз для иконки и ярлыков?

Наверное, можно попытаться нарисовать картинку и прямо в программе для создания иконок, но возможностей у таких программ гораздо меньше, чем у специализированных графических редакторов вроде Photoshop-а.

Что же касается программы IcoFX, о которой идёт речь в статье, то в ней тоже можно создать полноценное исходное изображение или отредактировать имеющееся. Программа имеет интуитивно понятный, для любого пользователя знакомого с графическими редакторами, интерфейс.

Единственное непонятка, которая бросилась мне в глаза, так это инструмент стирания. Чтобы стереть ненужные пиксели (обнажить прозрачность), нужно использовать инструмент Selection и клавишу Delete.

Однако вряд ли стоит глубоко изучать возможности ещё одного растрового редактора, если вы немного знакомы с Photoshop-ом.

Перейти к меню статьи.



Каков размер и формат исходных изображений для иконок?

Исходное изображение для иконок и ярлычков лучше выбрать размером не менее 256х256 пикселей.

Если для эскиза изготовленного в стороннем растровом редакторе выбрать точный размер 256х256 пикселей, то не придётся делать лишнюю интерполяцию в программе IcoFX.

В программу IcoFX можно загрузить изображение в форматах: ico, bmp, jpg, gif, cur, png, icns, jp2. Затем можно сгенерировать изображения необходимых вам размеров и сохранить их в виде файла с расширением ICO.


Изображение, представляющее собой GIF-анимацию, можно также сначала создать в размере 256х256 пикселей, а затем уменьшить до размера иконки 16х16 пикселей в той же программе, где оно создавалась.

Ресайз с 256 до 15 пикселей.

При подготовке исходного изображения следует учитывать, что при ресайзе до размера 16х16 пикселей, мелкие детали изображения не сохранятся. Поэтому лучше использовать только крупные и контрастные детали.

Нарисовать иконку сразу в размере 16х16 пикселей довольно сложно. Мои попытки в этом направлении не увенчались успехом.

На картинке иллюстрация того, как меняется изображение при ресайзе с 256 до 16 пикселей.


Перейти к меню статьи.



Как подготовить изображение для программы IcoFX чтобы сохранить прозрачность?

Иконка на Рабочем столе с прозрачным фоном и без.

Для того чтобы сохранить прозрачность в программе Photoshop, нужно, при сохранении Save For Web, выбрать формат GIF или PNG и поставить галочку Transparency.

(Программа IcoFX понимает файлы и в формате BMP с Альфа каналом, что также позволяет сохранить прозрачность.)

На картинке две иконки на Рабочем столе, с сохранённой прозрачностью и без.

Перейти к меню статьи.



Как создать и отредактировать GIF-анимированную картинку в программе Photoshop?

В последних версиях программы Adobe Photoshop нет встроенной программы Image Ready, однако функция работы с GIF-анимацией сохранилась.

Для создании GIF-анимации достаточно открыть палитру Window > Animation.

А вот открыть изображение в формате GIF-анимации для редактирования чуточку сложнее.

Выбор команды File - Import - Video Frames to Layers.

Для того чтобы открыть файл с GIF-анимацией, нужно сначала выбрать команду File > Import > Video Frames To Layers.


Окно Load.

Затем в окошке Load ввести полное название (с расширением) целевого файла.

При этом нужно иметь в виду, что сам целевой файл, в окошке Load, виден не будет. Поэтому, точное название файла лучше скопировать, например, из окна Проводника, где он виден будет.

Можно также вместо названия файла ввести "*" (звёздочку), и тогда все файлы начнут отображаться в окне выбора.


Выбор команды File - Import - Video Frames to Layers.

В окне Video Frames To Layers ничего менять не требуется.


Теперь остаётся только воспользоваться палитрой Animation, чтобы отредактировать анимированный GIF.

Перейти к меню статьи.



Как создать файл формата ICO в программе IcoFX?

На скриншотах иллюстрация самого короткого пути при создании файла в формате ICO в программе IcoFX.

Импорт изображения.

Когда исходное изображение имеется, то его можно загрузить в программу IcoFX по команде File > Import Image (Ctrl+M).


Вибираем исходное изображение.

Выбираем исходное изображение. Я использовал созданное в Photoshop-е изображение в формате PNG (256 цветов) размером 256х256 пикселей с сохранённой прозрачностью.


Выбираем параметры.

Моё изображение имеет размер 256х256 пикселей и 256 цветов, потому я и выбираю эти значения.


Добавляем новое изображение.

Добавляем новое изображение.


Добавляем 48х48.

Выбираем параметры. Ставим птицу в чекбокс "Создать новое изображение из выбранного изображения" и выбираем размер 48х48 пикселей.


Дабавляем картинку.

Снова добавляем новое изображение.


32х32 пикселя.

Выбираем исходное изображение размером 256х256 пикселей и новое размером 32х32 пиксела.
Повторяем операцию.

Добавляем ещё одно изображение в комплект.


Добавляем в набор 16х16 пикселей.

В этот раз выбираем размер нового изображения равным 16х16 пикселов, а исходное изображение оставляем прежним - 256х256 пикселов.


Удалаем лишнее.

Теперь можно удалить из набора наше исходное изображение размером 256х256 пикселей, чтобы не увеличивать сильно вес результирующего файла.


Сохраняем.

Сохраняем результат наших непосильных трудов.


OK.

После нажатия OK в папке должен появиться файл favicon.ico.


Перейти к меню статьи.



Какой HTML код необходимо прописать, чтобы браузер начал показывать иконку?

Я слабо разбираюсь в коде, но то, что здесь написано - проверено в четырёх самых популярных браузерах: IE 8, Opera 9, Firefox 3, Chrome 2.


Коды для вставки иконки и ярлыков на страницы сайта нужно прописывать между тегами <head> и </head> каждой целевой страницы.


Каждая страничка сайта может иметь свою индивидуальную иконку и ярлыки, если это необходимо.


Адрес файла иконок может быть относительным, вида:

href="/favicon.ico"

или абсолютным:

href=”http://site.com/favicon.ico”

Чтобы любой браузер демонстрировал иконку в Адресной строке и Закладках (Избранном), нужно добавить следующий код:


<link href="http://site.com/favicon.ico" rel="icon" type="image/x-icon"/>


Чтобы иконка отражалась в качестве ярлыка на Рабочем столе и Файловом менеджере, нужно вставить в страничку следующий код:


<link href="http//site.com/favicon.ico" rel="shortcut icon"/>


Чтобы браузер мог показать анимированную иконку, нужно вставить следующий код:


<link href="http://site.com/favicon.gif" type="image/gif" rel="icon"/>


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


<link href="http://site.com/favicon.ico" rel="shortcut icon"/>

<link href="http://site.com/favicon.gif" type="image/gif" rel="icon"/>


Это связано с тем, что большинству браузеров достаточно указать на анимированную иконку, а Internet Explorer, хотя и не видит favicon.gif, но показывает иконку по команде rel="shortcut icon".


Подробнее об особенностях отображения анимированных иконок в разных браузерах можно прочитать здесь и здесь.


*favicon – можно заменить произвольным названием (может пригодиться при присвоении индивидуальных ярлыков отдельным страничкам в пределах одного сайта).

*http://site.com/favicon.ico - адрес файла иконок-ярлыков на хосте.

Перейти к меню статьи.



А что если не вставлять никакой код, а иконку разместить?

Если в корневом каталоге вашего сайта лежит файл с иконой и ярлыками с точным названием favicon.ico, то Internet Explorer присвоит иконку всем страницам сайта, если вы ему не укажете другой адрес, прописав соответствующий код.

К сожалению, другие браузеры этот файл просто так не заметят.

Перейти к меню статьи.



Почему в браузере иконка отображается, а ярлык на Рабочем столе и в Проводнике – нет?

Если для демонстрации иконки использовать код:


<link href="http://site.com/file_name.ico" rel="icon" type="image/x-icon"/>


То, чтобы Internet Explorer мог добавлять к ссылке ярлыки при перетаскивании, нужно добавить код:


<link href="http://site.com/file_name.ico" rel="shortcut icon"/>

Перейти к меню статьи.



Как будут отображаться иконки в браузерах, если иконок сразу две - в формате GIF и ICO?

Если в Веб страницу вставлен код:


<link href="http://site.com/favicon.gif" rel="icon" type="image/gif"/>

то Firefox и Chrome будут искать корректное изображение в формате GIF, и если его не найдут, то ничего и не покажут до тех пор, пока вы не уберёте код. После чего Firefix и Chrome начнут показывать в Адресной строке иконку прописанную в коде:


<link href="http://site.com/favicon.ico" rel="shortcut icon"/>

Opera, не найдя по указанному адресу файл в формате GIF, сообразит и покажет иконку из файла в формате ICO.

Internet Explorer индифферентен к GIF-у и с самого начала будет показывать иконку в формате ICO.

Перейти к меню статьи.



Почему браузер не показывает впервые установленную или обновлённую иконку?

Известно, что браузеры кэшируют изображения для ускорения загрузки страниц и снижения объёма трафика. По этой причине, чтобы увидеть иконку на однажды загруженной странице, требуется удалить изображение этой иконки из кэша браузера.

Если очистка кэша и перезагрузка страницы не дали результата, то следует попробовать вместе с кэшем очистить и другие временные данные и перезагрузить уже сам браузер.

Перейти к меню статьи.



Как очистить кэш популярных браузеров, чтобы увидеть новую иконку?

Internet Explorer - Сервис > Свойства Обозревателя > Общие > Удалить > Очистить >

> Временные файлы Интернета.

> Журнал.

Перезагрузить браузер.


Firefox - Инструменты > Личные Данные >

> Очистить Кэш.

Перезагрузить страницу.


Opera -

Инструменты > Удалить личные данные > Более подробные параметры >

> Удалить время посещения закладок

Перезагрузить страницу.


Chrome - Настройки и управление Google Chrome (гаечный ключ) > Удаление данных о просмотренных страницах >

> Очистить кеш.

Перезагрузить браузер.

Перейти к меню статьи.



Где конкретно хранятся иконки в кэше разных браузеров?

Internet Explorer

C:\Documents and Settings\Имя пользователя\Local Settings\Temporary Internet Files

Иконки открыты для просмотра.


Firefox

C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Mozilla\Firefox\Profiles\Цифры и буквы.default\Cache

Отдельные файлы нельзя рассмотреть в Файл-менеджере.

Адрес можно уточнить, если набрать в адресной строке самого Firefox-а: about:cache

Эта же команда позволяет просмотреть отдельные файлы кеша.

Если же установить расширение CacheViewer и нажать Ctrl+Shift+C или выбрать команду Инструменты > Просмотреть кэш, то можно просмотреть картинки без лишних телодвижений.


Opera

C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Opera\Opera\profile\images

Здесь иконки можно рассмотреть в отдельной папке, и они, как и в IE, открыты для просмотра.

Набрав about:cache в адресной строке, можно увидеть URL и сами файлы не лазая по директориям.


Google Chrome

C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache

Отдельные файлы нельзя рассмотреть в Файл-менеджере.

Если ввести в адресную строку about:cache, то можно увидеть URL-кэшированных файлов.

Посмотреть на кэшированное изображение иконки можно открыв ссылку (только без приставки view-cache:).


Важно. Просматривая файлы по ссылкам, выданным после команды about:cache, нужно иметь в виду, что для чистоты эксперимента доступ в сеть нужно отключить.

Перейти к меню статьи.



Отображение иконок в популярных CMS (движках).


WordPress

Для добавления иконки/ярлыков нужно прописать код, о котором рассказывалось выше, в файл header.php между <head> и </head> и разместить файл иконок в формате ICO (и GIF) по адресу указанному в коде.

WordPress - начинает демонстрировать иконки сразу после добавления кода и закачки иконки на хост. При использовании кэша требуется его очистить.


PHPBB3

Чтобы добавить иконку/ярлыки, нужно прописать соответствующий код в файл overall_header.html между тегами <head> и </head> и разместить файл формата ICO (и GIF) по адресу указанному в коде.

Для отображения требуется очистить кеш форума.


- - - - - -

Не помешает поместить файл иконок-ярлыков, с точным названием favicon.ico, в корневой каталог сайта, если вы выбрали другое название для этого файла или директорию отличную от корневой директории. Некоторые браузеры и RSS клиенты воспользуются этим файлом не найдя другого адреса.


Пример вставки кода:


<head ... ... ...


(Тут всякий разный код, который трогать не нужно).


<link href="http://site.com/favicon.ico" rel="shortcut icon"/>

<link hre="http://site.com/favicon.gif" type="image/gif" rel="icon"/>

</head>


Пример размещения файлов на хостинге:

Размещиние файлов на хостинге.


Скринщот окна Total Commander.

Файлы favicon.ico и favicon.gif помешены в корневой каталог сайта.


Перейти к меню статьи.



Отображение анимированных иконок в поисковых машинах.

Прошло полгода со времени написания этой статьи и размещения иконок на сайте. На днях, обнаружив свою иконку где-то в дебрях Google, я решил посмотреть на неё и в Яндексе.

К своему удивлению обнаружил, что при очередном индексировании, Яндекс вытащил один из кадров из самой середины анимированной иконки. Проще говоря, теперь вместо иконки он показывает что-то непонятное.

Так что, пришлось пока убрать из корня анимированную иконку в формате GIF и соответствующую запись в хайдерах CMC движков. Кроме этого, добавил в хайдеры код:


<link href="http://site.com/file_name.ico" rel="icon" type="image/x-icon"/>

Приходится подстраиваться под Яндекс, которые каждый раз что-то новое отчебучивает. Он, кстати, при этой переиндексации потерял файлы моих Sitemap-ов вместе с большей частью сайта.

Жаль, что Yandex не берёт пример со старшего брата! :)

Перейти к меню статьи.




Муки творчества могут так замучить, что иногда требуются свежие идеи. Загляни по случайной ссылке, чтобы отвлечься. Если Вы решили покинуть сайт, то объявление спонсоров, не самое плохое место для перехода.


Нашли ошибку в тексте?Выделите ошибочный текст мышкой и нажмите Ctrl + Enter
Спасибо за помощь!

Комментарии (42)

АнтонИюль 11th, 2009 at 17:22

Спасибо за инструкцию. Все заработало :)
до этого точно несколько часов убил впустую))

ДенисАвгуст 16th, 2009 at 16:17

Анимация в favicon в наше время — дурной тон. Сейчас все браузеры используют вкладки, иконка получается ближе к тексту статей и мешает их читать, почти как реклама.

К тому же стиль оформления иконки и сайта уж очень различается :-)

adminАвгуст 16th, 2009 at 16:54

Денис

Сейчас все браузеры используют вкладки…

А что, раньше они не использовались? :)

К тому же стиль оформления иконки и сайта уж очень различается

С удовольствием посмотрю на альтернативный дизайн.

ТошаАвгуст 18th, 2009 at 13:57

Классная статья, автору респект. Хотелось бы добавить поддержку iPhone!
код следующий: link rel=»apple-touch-icon» href=»/customIcon.png»/
иконка должна быть 57х57 px

WSherlockWОктябрь 13th, 2009 at 10:03

Спасибо за полезную информацию.

дмитрийДекабрь 5th, 2009 at 09:46

да уж статья более чем исчерпывающая
спасиб за отличную рабоу
плохо одно — то что ваш сайт не раскручен и не все смогут его посетить

adminДекабрь 5th, 2009 at 11:23

дмитрий

Пожалуйста, Дмитрий!

Да нет, сайт раскрутился как-то и мой трафик уже перевалил за 15GB. Так что, для меня это теперь проблема, как его сделать самоокупаемым. А кто ж хочет сам себе создавать проблемы… :)

ЕленаЯнварь 13th, 2010 at 10:21

Большое спасибо за доступность изложения!

ВикторФевраль 26th, 2010 at 22:57

Почему при создании страницы редактором FrontPage прописанные Вами коды ярлыков страниц не работают и что надо сделать? Мучаюсь уже неделю. Спасибо.

adminФевраль 27th, 2010 at 09:53

Виктор
Не важно, в какой программе Вы прописывали код, важно, чтобы правильный код был на результирующей странице. То есть, нужно открыть страницу Вашего сайта в браузере, а затем посмотреть код. Например, в IE, это команда контекстного меню (правый клик в пустом месте страницы) «Просмотр HTML кода».

Кроме этого, нужно очистить кеш браузера. Как это сделать, написано выше.

Ну, и последнее. Некоторые CMC движки кешируют данные для ускорения доступа, нужно очищать кеш. Тоже самое делают провайдеры предоставляющие бесплатные площадки для создания блогов под своими доменами, тогда нужно просто подождать.
Кешировать данные так же может хозяин большой локальной сети для экономии трафика, создавая прокси сервер.

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

Денвер, это локальный сервер, который весит всего несколько метров и имеет встроенный механизм для старта и остановки. Он поддерживает базы данных и всё необходимое для работы сайта.
Я создал локальную копию сайта на Денвере и проверяю всё, прежде чем отправить на реальный хост.

АлександрМарт 29th, 2010 at 16:38

Огромное спасибо! Весьма полезный материал, потому как облазил разные ресурсы и везде всё так сухонько и мало описано. Такое ощущение, что описывают кодеры для кодеров, а не для людей. Юрий, еще раз Вас благодарю за труд!

С уважением, Александр

ВладимирИюль 21st, 2010 at 18:26

Спасибо. вообще искал как сделать иконку для DVD диска, чтобы отображался в приводе. Но нашел вот эту статью. Буду тестить.

adminИюль 21st, 2010 at 23:16

Владимир

Создайте файл с иконками в формате «name.iso» (имя произвольное). Откройте Notepad (Блокнот) и напишите там следующее:

[autorun]

ICON=name.ico

При этом, естественно, имя иконки должно везде совпадать.

Сохраните файл из Notepad-а под именем «autorun.inf».

Оба эти файла запишите в корневой каталог CD или DVD диска. Корневой каталог диска должен выглядеть вот так, только кроме этих файлов там будут другие данные, которые Вы запишите на диск:

(Тут скорее всего будут папки и другие файлы)

autorun.inf

name.ico

AlexОктябрь 5th, 2010 at 09:01

Спасибо автору !
Более понятного разъяснения я не встречал !

ЖуликОктябрь 12th, 2010 at 18:32

Спасибо огромное, всё время задавался вопросом \"Как же это у них получается\", всматривался в код и даже подобного не видел, но прочитав данную статью поверил и в свои силы. Спасибо, буду тестировать!

СергейОктябрь 29th, 2010 at 10:54

Огромное спасибо!
Более исчерпывающего материала нигде не встречал.

YaНоябрь 2nd, 2010 at 14:17

Спасибо за нормальный язык и интересный материал!

ильдусНоябрь 12th, 2010 at 15:44

спс за инфу, респект автору

testerixДекабрь 3rd, 2010 at 00:42

Спасибо! На редкость чётко и ясно.

lavrioДекабрь 23rd, 2010 at 23:43

Все понятно. Спасибо за простой и доступный текст.

АлександрЯнварь 22nd, 2011 at 03:00

Уважаемый админ. Спасибо за хорошие и полезные статьи.
С созданием иконки проблем нет. Загрузил в корневой каталог. В Фоксе анимация работает. В Хроме нет. Почему?
Самый важный вопрос. Сейчас многие сайты размещают дополнительную картинку между иконкой и началом командной строки в браузере. Примеры:





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

adminФевраль 8th, 2011 at 17:37

Александр

Второй раз отвечаю. Видно, первый раз, по ошибке, в Денвере ответил.

Это не иконка, а поле идентификатора, которое формирует Ваш Firefox. В других браузерах это поле будет выглядеть иначе. Оно кликабельно.

Всё дело в протоколе шифрования HTTPS. Если вы получите сертификат https, то у Вас тоже появится.

ОксанаФевраль 25th, 2011 at 15:20

Здравствуйте!
Я загрузила иконку в корневую файлового менеджера но название favicon.ico в моей загруженной становится favicon.ico.ico Пишет что такое имя файла уже существует, и поэтому наверное иконка не отображается в браузерной строке… Подскажите в чём дело???

adminФевраль 25th, 2011 at 15:33

Оксана

Я могу предположить, что в вашей операционной системе включена опция «Скрывать расширения для зарегистрированных типов файлов». А так как Вы не видите расширения, то записываете его повторно (вручную).

В Windows XP эта опция находится здесь: «Проводник > Сервис > Свойства папки > Вид > Скрывать расширения для зарегистрированных типов файлов. Нужно снять галочку из чекбокса.

ЖеняФевраль 28th, 2011 at 16:04

Здравствуйте, столкнулся с такой проблемой, мозила иконку показывает а ИЕ и Опера категорически отказываются, я уже все чистил, чек бокс отключил, прописывал путь к файлу по разно все равно находит картинку только Мозила, и что самое интересное, что в мозиле я ничего не чистил, а как только картинку поставил и сразу же браузер ее и показал. Сайт zhex.ru

adminФевраль 28th, 2011 at 16:40

Женя

Вашу иконку не видно ни в одном из популярных браузеров последних версий. Проблема в отсутствии самого файла с иконками по указанному в странице адресу.

ЖеняФевраль 28th, 2011 at 17:59

Иконку Опера и Мозила уже видят ИЕ пока что отказывается ее воспроизводить, да и иконка не прозрачная (

adminФевраль 28th, 2011 at 18:33

Женя

Вот, сейчас все видят: Chrome, Firefox, Opera, IE7, IE8.

IE6, как обычно, не видит, но у него всегда были с эти проблемы. Поьзователей IE6 всего1,5%, так что можно особо не беспокоиться.

ОльгаМарт 2nd, 2011 at 14:20

Огромное спасибо за статью! Всё понятно и ясно!
На первый сайт (www.optica.ru) иконку установила без проблем, видна во всех браузерах.
А вот со вторым сайтом-форумом (www.infrared.ru) проблемка возникла. Opera и IE показывают, а вот Fox не хочет. Кэш чистила много раз, перегружала, на форуме тоже кэш обновляла. В общем застряла. Может подскажите чего?
Спасибо!

ОльгаМарт 2nd, 2011 at 14:58

Да, и ещё вопрос. После индексации Яндекс так и не вытащил нашу иконку в результат поиска:( Почему?

adminМарт 2nd, 2011 at 16:26

Ольга

Проблема не в PHPBB, а в вашем браузере. Мой Firefox вашу иконку видит. Ярлык перетаскивается.

Яндекс вытащит фавикон со временем. Куда Вы так торопитесь… :)

ОльгаМарт 2nd, 2011 at 16:52

Спасибо! Буду ждать:)

KonstaМай 24th, 2011 at 21:03

Я просто в восторге ;) Столько всего перечтано на эту тему, но так просто и полно даже близко не встречал. Снимою шляпу :)

СветланаМарт 19th, 2012 at 23:36

Автору респект и искренняя благодарность!

МаринаИюнь 5th, 2012 at 12:52

Спасибо, разобралась с первого раза, сьэкономила не один день.

DjimИюнь 19th, 2012 at 11:37

Автору +5 и огромная благодарность. Очень качественная и подробная инфа. Ничего подобного в нете не находил.

adminИюнь 19th, 2012 at 21:40

Ребята, за спасибо, Вам всем спасибо! :)

Но, лучше бы хоть кто-нибудь сообщил, что ссылка на скачивание программы IsoFX уже вела на платную версию.

В связи с переходом на Windows 7, мне понадобилось вытащить несколько системных иконок из файла Shell32.ini и я хотел скачать программу IsoFX по своей же ссылке, но не тут то было! :)

Добавил в статью живую ссылку на бесплатную полнофункциональную версию программы.

СергейЯнварь 3rd, 2013 at 17:19

редко когда пользуюсь подобными мануалами, но в данном случае очень пригодилась! спасибо огромное!

ВалерийАпрель 29th, 2013 at 23:23

Спасибо.Всё получилось.

adminСентябрь 26th, 2013 at 13:41

Владимир писал:

Друзья, подскажите, как средствами html (CSS, JS) добиться чтобы на своём сайте при выборе контекстной команды «создать ярлык» у любого пользователя на его рабочем столе появлялся ярлык с оригинальной картинкой моего сайта, а не стандартный ярлык используемого пользователем броузера. Вот, сайт газеты «Московские новости» даёт оригинальную эмблему газеты

Не нужно ничего изобретать. Просто у газеты «Московские новости» есть иконка сайта. Добавьте иконку, как описано выше и ярлык вашего сайта на рабочем столе станет тоже красивым.

OksanaЯнварь 11th, 2016 at 07:20

Фавикон на свой сайт ставила через плагин. Все было окей. Но вот несколько недель назад пропал фавикон, точнее так — когда пишу статью в консоли, в редакторе видно, что есть фавикон, публикую статью и…фавикона нет. Это как так может быть. Понимаю, что через плагин ставить фавикон не рекомендуется. Но вот так он у меня установлен был и всегда был виден. Почему сейчас такое произошло, что при написании статьи его видно, а при публикации он пропадает. Простите, объяснила как могла. Надеюсь на ответ.

adminЯнварь 11th, 2016 at 09:16

Oksana писала: …когда пишу статью в консоли…

Я в это не верю, но если вдруг… То, Вы бы лучше за писанину в консоли волновались, а не за фавикон, если, конечно, вы серьёзно так делаете. WP тиражирует копии, которые собирает в базе данных и она разбухает. Если же заблокировать создание автоматических копий, то вы сможете в любой момент потерять всё то, что набрали. Чем Word плох, она оба языка понимает…

Что вы хотите от меня услышать, я не знаю. Чтобы получить ответ, нужно задать вопрос. Если же хотите совет, то просто пропишите в хайдер пару строчек кода. У меня этот код из статьи до сих пор так и работает.

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

Вы должны войти для отправки комментария.