Как сделать анимированный фавикон. Сервисы готовых фавиконов

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

И конечно, как всегда, во всех подробностях опишу, в принципе не сложный, процесс установки фавикона на сайт.

Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного». Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.

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

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

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

Фавиконы в виде обычной картинки

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

Давайте рассмотрим такой пример. Вот хочу я создать сайт по тематике — «Туризм и путешествия» , так какую же картинку я могу подобрать для фавикона. Буду руководствоваться двумя ранее известными мне правилами.

Правило №1 .

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

Правило №2 .

Картинка должна быть квадратной и весом не более 150 kB.

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

Теперь мне надо ее преобразователь в формат.icon и уменьшить до размеров 32х32 пикселя.

Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com .

Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon» :

И после обработки получаем два две картинки 32х32 и 16х16. Одна картинка это иконка для рабочего стол а вторая для адресной строки, закладок и поисковых систем.

Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16 уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂

Из этого следует. что существует еще одно требование к картинке для фавикона.

Правило №3. .

Объект на картинке должен иметь небольшой размер в реальном мире. Для фавикона не годятся изображения самолетов, кораблей, воздушных шаров и т.д.

Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:

Отлично, посмотрим, что получается после обработки:

Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon» .

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

Как сделать анимированный фавикон

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

На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:

После того, как рисунок готов нажимаем — «Использование анимации» и выпадет панель со следующими функциями:

Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:

Чуть ниже можно посмотреть на результат и скачать готовый файл:

Как выглядит мой «шедевр»? 🙂

Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.

Как сделать фавикон в Photoshop

Наверное у Вас в Фотошоп отсутствует формат. icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку — C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате.icon

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

Как установить фавикон на сайт

Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента , туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.

Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом надо прописать следующее:

Вот в принципе и все, фавикон на сайт установлен!

Сервисы готовых фавиконов

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

До встречи!

С уважением, Виталий Кириллов

Здравствуйте, уважаемые читатели. Сегодня мы с вами познакомимся с одним из элементов раскрутки сайта, а именно с фавиконом (favicon). Узнаем что это такое, для чего он нужен и научимся его создавать и устанавливать на сайт. Также из данной статьи вы узнаете как сделать его анимированным.

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

Вот так выглядит фавикон в браузере:

А вот так он выглядит в поисковой системе Яндекс:

Создание фавикона является одним из методов раскрутки сайта, т.к. это является одним из элементов бренда вашего сайта, делающий ваш сайт узнаваемым в сети. По сути это обычная картинка размером 16x16 пикселей, файл с картинкой имеет расширение.ico. Удачный фавикон может способствовать увеличению трафика на ваш сайт. Каким же образом он это делает? А все очень даже просто. Если на вашем сайте имеется интересная и полезная информация по какой-то тематике, то посетители сайта обычно стараются запомнить эти сайты по каким либо отличительным признакам. К этим признакам относятся конечно же в первую очередь URL адрес (или по другому домен сайта), например, . Именно поэтому при создании сайта желательно, что-бы у сайта был легко запоминающийся домен. Будет еще лучше, если название домена будет иметь отношение к основной тематике сайта. Другим отличительным признаком является название сайта. Например, мой блог называется "Советы по созданию и продвижению сайтов". Даже если посетители забудут название домена моего блога, а запомнят только название блога, то набрав это название в поисковике они с большой долей вероятности смогут найти его в поисковике. Успешность поиска по названию сайта будет конечно же зависеть от нескольких факторов. Во первых желательно, чтобы название было уникальным и во вторых это уровень трастовости самого сайта. Т.к., если сайт очень молодой (как, например, мой), или для сайта не было проделано работ по SEO оптимизации в поисковых системах, то его сложно будет найти в поисковике даже по точному названию сайта. Ну и еще одним отличительным признаком конечно же является фавикон. Пользователь, увидев в поисковой выдаче фавикон знакомого ему сайта, с большой долей вероятности может перейти на ваш сайт, если он знает, что на вашем сайте может находится нужная ему информация, даже если ваш сайт не находится в ТОП 3 поисковой выдачи. Естественно, для этого нужно, чтобы ваш сайт находился не далее третьей страницы поисковой выдачи, т.к. пользователи обычно очень редко ищут далее третьей страницы.

Давайте теперь перейдем от теории к практике. Я вам покажу как я создавал анимированный фавикон для своего блога. Получился конечно не шедевр, но мне нравится. И так для этого мы будем использовать хороший на мой взгляд онлайн сервис http://www.favicon.cc, который даже не требует регистрации.

Здесь вы можете выбрать понравившийся из более 175 тысяч готовых фавиконов. Для этого в левом меню выбираете "Latest favicons" (в этом случае они будут отсортированы по дате создания), или "Top tated favicons" (в этом случае они будут отсортированы по рейтингу) или выбрав внизу в разделе "Tag Cloud" (облако тегов) подходящую тему.

Кстати вы также можете создать фавикон из готового рисунка, импортировав его со своего компьютера. Для этого из левого меню выбираете "Import image", далее нажимаете на кнопку "обзор" и выбираете нужный нам рисунок на вашем компьютере. Рисунок импортируете максимально простой, в противном случае получиться бесформенное пятно размером 16 на 16 пикселей.

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

Далее я решил сделать его анимированным, а именно, чтобы буквы меняли цвет. Для этого я выбрал внизу "Append new frame" (добавить новый кадр). У меня добавился еще один пустой frame (кадр). Чтобы еще раз не рисовать буквы я нажал на "Copy previous frame" (скопировать предыдущий кадр). У меня стало два одинаковых кадра. Теперь во втором кадре я просто перекрасил буквы в другой цвет.

Сразу под рисунком вы можете выбрать из выпадающего меню периодичность в секундах чередования кадров. Еще чуть ниже (под кнопкой Delete frame, удалить текущий кадр) расположено другое выпадающее меню, в котором по умолчанию выбрано значение loop forever (зациклить чередование кадров). В этом меню вы можете выбрать другой параметр, например, выбрать только определенное количество чередований кадров (до 20-ти).

Еще чуть ниже в разделе "Preview" можно увидеть как будет выглядеть ваш шедевр в реальном размере. После того, как вы закончите сохраняете его к себе на компьютер нажав на кнопку "Download favicon".

Установка фавикона на сайт.

Установка фавикона на сайт Joomla или Wordpress достаточно проста. Достаточно просто скопировать полученный файл в корневую папку вашего шаблона. Для моего сайта на joomla путь выглядит так:

сайт\templates\папка_с_вашим_шаблоном\favicon.ico.

Для сайта на Wordpress файл с иконкой копируем сюда:

site.ru/wp-content/themes/папка_с_вашим_шаблоном/favicon.ico

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

Если вы заметили, то google не отображает фавиконы сайтов. А в Яндексе фавикон вашего сайта появится не сразу после установки, а после того как поисковик проиндексирует его. Обычно через пару апдейтов поисковой выдачи.

Пока поисковый робот обнаружит файл фавикона и проиндексирует его может пройти время. Поэтому для ускорения процесса можно (и даже нужно) помочь роботу в поиске данного файла. Для этого на всех страницах сайта (обычно это делается в шаблоне сайта) прописываем примерно такую строчку между тегами и :

Атрибут type будет разным в зависимости от типа файла фавикона:

• image/x-icon или image/vnd.microsoft.icon для формата ICO;
• image/gif для формата GIF;
• image/jpeg для формата JPEG;
• image/png для формата PNG;
• image/bmp для формата BMP.

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

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

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

Идем в Яндекс или Гугл и в картинках набираем, например, осенняя анимация:

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

Чтобы вам отображались только анимированные картинки, они должны иметь расширение.gif, поставьте фильтр в поиске:

Я скачала больше 46 анимированных смайликов и среди них могу выбрать любой, какой мне понравится. чтобы добавить на открытку. Следует обратить внимание на названия файлов - у меня попались с русскими буквами и пробелами в названиях. Да и вообще, такие названия для фавикона не подойдут, ведь их надо нам надо прописывать в коде открытки, и лучше если название этой картинки будет как можно короче:

Для того, чтобы переименовать нужный вам файл, кликните по нему правой кнопкой мыши, и в выпавшем меню выберете: "Переименовать". Пропишите коротенькое название латинскими буквами или цифрами без пробелов:

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

Для этого в левой части программы, где отображаются папки на вашем компьютере находите нужный вам файл, кликаете по нему правой кнопкой мыши - переименовать:

Вы просто добавляете расширение.ico - вот и все, наш фавикон для сайта готов.

Теперь мы можем добавить его в нашу открытку. Этот файл необходимо скопировать в папку с нашей открыткой. Его не нужно добавлять ни в какие папки, а просто, чтобы он находился рядом с файлом открытки:

Теперь остается прописать небольшую строчку в коде открытки:

между тегами :

Для этого можно воспользоваться файловым менеджером FileZilla:

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

Вот результат, что получилось:

Скачать анимированные смайлики небольшого размера, которые можно легко переделать в иконки можно по ссылке: https://yadi.sk/d/-Q-imw0ekgVca - можно целым архивом, можно понравившийся.

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

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

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

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

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

Хотелось бы узнать - есть ли у вас желание поучаствовать в зимнем марафоне? Жду Ваших комментариев по этому поводу.