Странно, за что только не возьмёшься в области Веб, почти всегда создаётся впечатление, что вступаешь на terra incognita. Отчасти это связано с моей дремучестью, но почему я не смог найти в сети нормальное руководство на тему: В этой статье я попытался ответить на вопросы, возникшие при создании иконки и ярлыков, размещении их на сайте и проверке отображения этих элементов Веб-дизайна в разных браузерах. Надеюсь, что эта статья сэкономит кому-нибудь один день жизни. Как добавить логотип или водяной знак к изображению? В этой статье есть свежая информация о кэше современных версий популярных браузеров. Когда мы открываем страницу сайта, имеющего иконку, то наш браузер скачивает набор картинок, упакованных в файл в формате ICO. Эти картинки используются в качестве ярлыков при сохранении странички в виде ссылки на Рабочем столе или в Файловом менеджере. Часто, файл, в который упакованы иконка и ярлыки, называется favicon. Название это не обязательное, но желательное. Обычно в файле favicon. Например, в комплект системных ярлыков MAC ОС входят изображения следующих размеров: Назначение отдельных изображений, которые мне лично удалось идентифицировать для Windows, следующее:. Ярлык можно разместить на рабочем столе или в Файловом менеджере только в том случае, если он был добавлен путём перетаскивания ярлычка иконки из адресной строки браузера или из Закладок Избранного на Рабочий стол или в Файловый менеджер. Формат ICO является контейнером, в который можно упаковать несколько изображений. Если открыть файл с расширением ICO в многоформатном вьювере, то можно увидеть все эти изображения в виде многостраничного документа. Естественно, что все специализированные программы для создания иконок тоже могут работать с каждым отдельным изображением включённым в файл формата ICO. Если у вас уже имеется исходное изображение, то из него можно изготовить несколько иконок разного размера и упаковать их в один файл при помощи какой-нибудь программы для создания иконок. Я для этого использовал первую попавшуюся в сети бесплатную программу — IcoFX. Ко всему прочему, программа оказалась мультиязычной. К сожалению, программа IsoFx стала платной, что подтверждает некогда сделанный в её пользу выбор. Но, Вы всё ещё можете скачать бесплатную версию этой программы. Скачать портативную программу IsoFX 1. В приведённом примере, я буду использовать именно эту программу, чтобы создать иконку в формате ICO точнее, создать иконку и несколько ярлыков. Чтобы анимированную иконку увидел браузер, нужно дополнительно разместить на хосте файл в формате GIF-анимациии и прописать соответствующий код в целевой Веб странице. Firefox прокрутит анимацию в адресной строке столько раз, сколько заложено в настройках файла GIF раза и остановится на последнем кадре GIF-анимации. Если в настройках GIF-анимации указать "Forever", то Firefox покажет анимацию только один раз и, опять таки, остановится на последнем кадре. Opera и Chrome покажет в адресной строке только первый кадр GIF-анимации. Internet Explorer не увидит файл GIF-анимации и вместо него покажет иконку из файла в формате ICO. Для того чтобы иконка, созданная в формате GIF-анимации, показывалась во всех браузерах одинаково, следует первый и последний кадр GIF-анимации также делать одинаковыми. Наверное, можно попытаться нарисовать картинку и прямо в программе для создания иконок, но возможностей у таких программ гораздо меньше, чем у специализированных графических редакторов вроде Photoshop-а. Что же касается программы IcoFX, о которой идёт речь в статье , то в ней тоже можно создать полноценное исходное изображение или отредактировать имеющееся. Программа имеет интуитивно понятный, для любого пользователя знакомого с графическими редакторами, интерфейс. Единственное непонятка , которая бросилась мне в глаза, так это инструмент стирания. Чтобы стереть ненужные пиксели обнажить прозрачность , нужно использовать инструмент Selection и клавишу Delete. Однако вряд ли стоит глубоко изучать возможности ещё одного растрового редактора, если вы немного знакомы с Photoshop-ом. Если для эскиза изготовленного в стороннем растровом редакторе выбрать точный размер х пикселей, то не придётся делать лишнюю интерполяцию в программе IcoFX. В программу IcoFX можно загрузить изображение в форматах: Затем можно сгенерировать изображения необходимых вам размеров и сохранить их в виде файла с расширением ICO. Изображение, представляющее собой GIF-анимацию, можно также сначала создать в размере х пикселей, а затем уменьшить до размера иконки 16х16 пикселей в той же программе, где оно создавалась. При подготовке исходного изображения следует учитывать, что при ресайзе до размера 16х16 пикселей, мелкие детали изображения не сохранятся. Поэтому лучше использовать только крупные и контрастные детали. Нарисовать иконку сразу в размере 16х16 пикселей довольно сложно. Мои попытки в этом направлении не увенчались успехом. Для того чтобы сохранить прозрачность в программе Photoshop, нужно, при сохранении Save For Web, выбрать формат GIF или PNG и поставить галочку Transparency. Программа IcoFX понимает файлы и в формате BMP с Альфа каналом, что также позволяет сохранить прозрачность. В последних версиях программы Adobe Photoshop нет встроенной программы Image Ready, однако функция работы с GIF-анимацией сохранилась. При этом нужно иметь в виду, что сам целевой файл, в окошке Load, виден не будет. Поэтому, точное название файла лучше скопировать, например, из окна Проводника, где он виден будет. Теперь остаётся только воспользоваться палитрой Animation, чтобы отредактировать анимированный GIF. На скриншотах иллюстрация самого короткого пути при создании файла в формате ICO в программе IcoFX. Я использовал созданное в Photoshop-е изображение в формате PNG цветов размером х пикселей с сохранённой прозрачностью. Ставим птицу в чекбокс "Создать новое изображение из выбранного изображения" и выбираем размер 48х48 пикселей. Выбираем исходное изображение размером х пикселей и новое размером 32х32 пиксела. Добавляем ещё одно изображение в комплект. В этот раз выбираем размер нового изображения равным 16х16 пикселов, а исходное изображение оставляем прежним - х пикселов. Теперь можно удалить из набора наше исходное изображение размером х пикселей, чтобы не увеличивать сильно вес результирующего файла. Я слабо разбираюсь в коде, но то, что здесь написано - проверено в четырёх самых популярных браузерах: IE 8, Opera 9, Firefox 3, Chrome 2. Адрес файла иконок может быть относительным, вида: Чтобы любой браузер демонстрировал иконку в Адресной строке и Закладках Избранном , нужно добавить следующий код:. Чтобы иконка отражалась в качестве ярлыка на Рабочем столе и Файловом менеджере, нужно вставить в страничку следующий код:. В случае использования анимированной иконки, в большинстве случаев, достаточно всего двух строчек кода, чтобы обеспечить максимальные возможности по демонстрации иконок в разных браузерах:. Это связано с тем, что большинству браузеров достаточно указать на анимированную иконку, а Internet Explorer, хотя и не видит favicon. Подробнее об особенностях отображения анимированных иконок в разных браузерах можно прочитать здесь и здесь. Если в корневом каталоге вашего сайта лежит файл с иконой и ярлыками с точным названием favicon. То, чтобы Internet Explorer мог добавлять к ссылке ярлыки при перетаскивании, нужно добавить код:. После чего Firefix и Chrome начнут показывать в Адресной строке иконку прописанную в коде:. Opera , не найдя по указанному адресу файл в формате GIF, сообразит и покажет иконку из файла в формате ICO. Internet Explorer индифферентен к GIF-у и с самого начала будет показывать иконку в формате ICO. Известно, что браузеры кэшируют изображения для ускорения загрузки страниц и снижения объёма трафика. По этой причине, чтобы увидеть иконку на однажды загруженной странице, требуется удалить изображение этой иконки из кэша браузера. Если очистка кэша и перезагрузка страницы не дали результата, то следует попробовать вместе с кэшем очистить и другие временные данные и перезагрузить уже сам браузер. Посмотреть на кэшированное изображение иконки можно открыв ссылку только без приставки view-cache: Просматривая файлы по ссылкам, выданным после команды about: WordPress - начинает демонстрировать иконки сразу после добавления кода и закачки иконки на хост. При использовании кэша требуется его очистить. Не помешает поместить файл иконок-ярлыков, с точным названием favicon. Некоторые браузеры и RSS клиенты воспользуются этим файлом не найдя другого адреса. Скринщот окна Total Commander. Прошло полгода со времени написания этой статьи и размещения иконок на сайте. На днях, обнаружив свою иконку где-то в дебрях Google, я решил посмотреть на неё и в Яндексе. К своему удивлению обнаружил, что при очередном индексировании, Яндекс вытащил один из кадров из самой середины анимированной иконки. Проще говоря, теперь вместо иконки он показывает что-то непонятное. Так что, пришлось пока убрать из корня анимированную иконку в формате GIF и соответствующую запись в хайдерах CMC движков. Кроме этого, добавил в хайдеры код:. Приходится подстраиваться под Яндекс, которые каждый раз что-то новое отчебучивает. Он, кстати, при этой переиндексации потерял файлы моих Sitemap-ов вместе с большей частью сайта. Жаль, что Yandex не берёт пример со старшего брата! Фавикон на свой сайт ставила через плагин. Но вот несколько недель назад пропал фавикон, точнее так — когда пишу статью в консоли, в редакторе видно, что есть фавикон, публикую статью и…фавикона нет. Это как так может быть. Понимаю, что через плагин ставить фавикон не рекомендуется. Но вот так он у меня установлен был и всегда был виден. Почему сейчас такое произошло, что при написании статьи его видно, а при публикации он пропадает. Простите, объяснила как могла. Я в это не верю, но если вдруг… То, Вы бы лучше за писанину в консоли волновались, а не за фавикон, если, конечно, вы серьёзно так делаете. WP тиражирует копии, которые собирает в базе данных и она разбухает. Если же заблокировать создание автоматических копий, то вы сможете в любой момент потерять всё то, что набрали. Чем Word плох, она оба языка понимает…. Что вы хотите от меня услышать, я не знаю. Чтобы получить ответ, нужно задать вопрос. Если же хотите совет, то просто пропишите в хайдер пару строчек кода. У меня этот код из статьи до сих пор так и работает. E-mail не предаётся огласке обязательно. You can use these tags: Оповещать о новых комментариях по почте. При копировании материалов с сайта, ссылка на копируемую статью обязательна! Сделай сам своими руками О бюджетном решении технических, и не только, задач. Как создать файл favicon. FAQ Как создать файл favicon. Нашли ошибку в тексте? Oksana Январь 11th, at Рубрики … Разное GSM Аудио — Видео Аудиотехника Бюджетная фотография Веб Еда Игрушки Измерения Источники питания Лайфхак Мой компьютер Обзоры и тесты техники Объявления Путешествия Воспоминания Работа с картинками Ремонт техники Сделай сам Технологии Что внутри? Популярные статьи Мощный паяльный фен своими руками Паяльник для пайки SMD компонентов из доступных деталей Цифровой осциллограф из компьютера Импульсный блок питания из сгоревшей лампочки Как рассчитать и намотать импульсный трансформатор? Стабильный регулятор мощности Как рассчитать и намотать силовой трансформатор? Простой микрофонный усилитель ЛУТ минус утюг Как разобрать разъёмы БП? Сварочный аппарат своими руками. Свежие комментарии миха к записи Контейнеры для холодильника своими руками. Мета Войти RSS записей RSS комментариев.
Сегодня мы с вами познакомимся с одним из элементов раскрутки сайта, а именно с фавиконом favicon. Узнаем что это такое, для чего он нужен и научимся его создавать и устанавливать на сайт. Также из данной статьи вы узнаете как сделать его анимированным. Если вы пользуетесь поиском Яндекса, то Вы, наверное, уже замечали, что поисковая система в поисковой выдаче напротив некоторых сайтов выводит маленькие значки. Вот эти значки как раз и называют фавиконами. Создание фавикона является одним из методов раскрутки сайта, так как это является одним из элементов бренда вашего сайта, делающий ваш сайт узнаваемым в сети. По сути это обычная картинка размером 16x16 пикселей, файл с картинкой имеет расширение. Удачный фавикон может способствовать увеличению трафика на ваш сайт. Каким же образом он это делает? А все очень даже просто. Если на вашем сайте имеется интересная и полезная информация по какой-то тематике, то посетители сайта обычно стараются запомнить эти сайты по каким либо отличительным признакам. К этим признакам относятся конечно же в первую очередь URL адрес или по другому домен сайта , например, http: Именно поэтому при создании сайта желательно, что-бы у сайта был легко запоминающийся домен. Будет еще лучше, если название домена будет иметь отношение к основной тематике сайта. Другим отличительным признаком является название сайта. Например, мой блог называется "Советы по созданию и продвижению сайтов". Даже если посетители забудут название домена моего блога, а запомнят только название блога, то набрав это название в поисковике они с большой долей вероятности смогут найти его в поисковике. Успешность поиска по названию сайта будет конечно же зависеть от нескольких факторов. Во первых желательно, чтобы название было уникальным и во вторых это уровень трастовости самого сайта. Ну и еще одним отличительным признаком конечно же является фавикон. Пользователь, увидев в поисковой выдаче фавикон знакомого ему сайта, с большой долей вероятности может перейти на ваш сайт, если он знает, что на вашем сайте может находится нужная ему информация, даже если ваш сайт не находится в ТОП 3 поисковой выдачи. Естественно, для этого нужно, чтобы ваш сайт находился не далее третьей страницы поисковой выдачи, так как пользователи обычно очень редко ищут далее третьей страницы. Давайте теперь перейдем от теории к практике. Я вам покажу как я создавал анимированный фавикон для своего блога. Получился конечно не шедевр, но мне нравится. И так для этого мы будем использовать хороший на мой взгляд онлайн сервис http: Здесь вы можете выбрать понравившийся из более тысяч готовых фавиконов. Для этого в левом меню выбираете "Latest favicons" в этом случае они будут отсортированы по дате создания , или "Top tated favicons" в этом случае они будут отсортированы по рейтингу или выбрав внизу в разделе "Tag Cloud" облако тегов подходящую тему. Кстати вы также можете создать фавикон из готового рисунка, импортировав его со своего компьютера. Для этого из левого меню выбираете "Import image", далее нажимаете на кнопку "обзор" и выбираете нужный нам рисунок на вашем компьютере. Рисунок импортируете максимально простой, в противном случае получиться бесформенное пятно размером 16 на 16 пикселей. Если же вам ничего не понравилось, или у вас уже имеется готовая задумка своего фавикона,тогда приступим к его созданию. Весь процесс сводится к закрашиванию квадратиков в разные цвета. Вот как это получилось у меня. Далее я решил сделать его анимированным, а именно, чтобы буквы меняли цвет. Для этого я выбрал внизу "Append new frame" добавить новый кадр. У меня добавился еще один пустой frame кадр. Чтобы еще раз не рисовать буквы я нажал на "Copy previous frame" скопировать предыдущий кадр. У меня стало два одинаковых кадра. Теперь во втором кадре я просто перекрасил буквы в другой цвет. Сразу под рисунком вы можете выбрать из выпадающего меню периодичность в секундах чередования кадров. Еще чуть ниже под кнопкой Delete frame, удалить текущий кадр расположено другое выпадающее меню, в котором по умолчанию выбрано значение loop forever зациклить чередование кадров. В этом меню вы можете выбрать другой параметр, например, выбрать только определенное количество чередований кадров до ти. Еще чуть ниже в разделе "Preview" можно увидеть как будет выглядеть ваш шедевр в реальном размере. После того, как вы закончите сохраняете его к себе на компьютер нажав на кнопку "Download favicon". Установка фавикона на сайт Joomla или Wordpress достаточно проста. Достаточно просто скопировать полученный файл в корневую папку вашего шаблона. Для моего сайта на joomla путь выглядит так:. Скопировать файл можно подключившись напрямую к сайту через FTP при помощи , например, программы filezilla, или при помощи файлового менеджера, который предоставляет ваш хостинг. Если вы заметили, то google не отображает фавиконы сайтов. А в Яндексе фавикон вашего сайта появится не сразу после установки, а после того как поисковик проиндексирует его. Обычно через пару апдейтов поисковой выдачи. Вы можете помочь проекту, рассказав о нем в социальных сетях: Подписаться на уведомления о новых комментариях. Создание сайта Сайт на Joomla Хостинг и домены Безопасность сайта. Оптимизация и продвижение сайта SEO оптимизация сайта SMO оптимизация сайта Раскрутка сайта и его продвижение. Инструменты вебмастера Полезные утилиты Онлайн сервисы Счетчики посещений. Заработок в интернете Платежные системы. Создаем анимированный favicon фавикон для сайта при помощи онлайн сервиса. RU Все права защищены. При копировании материалов сайта активная ссылка на сайт buildsiteblog.
https://gist.github.com/07850cbceacd9b6a77a14462d712d0f7
https://gist.github.com/2fc635633e659092610b7f3571eedbc3
https://gist.github.com/901113d5598798c35437360f12042b8d