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

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

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

favicon

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

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

favicon02

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

favicon03

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

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

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

favicon05

favicon06

favicon07

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

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

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

<link href="favicon.gif.ico" rel="shortcut icon">  между тегами <head></head>:

favicon10

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

favicon09

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

favicon11

О том, как загружать открытку на хостинг с помощью файлового менеджера есть подробный урок в мастер-классе "Золотая осень", в котором и была сделана эта открытка: https://internet-ledi.ru//zolotaya_osen/

Вот результат, что получилось: https://internet-ledi.ru//osen

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

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

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

Призовые места достанутся тем. кто выполнил все условия марафона - https://internet-ledi.ru//zolotaya_osen/marafon.html И одно из условий - открытка должна быть сделана в  html редакторе. Их работ, которые были сделаны в более продвинутых визуальных конструкторах будет выделена только одна работа.

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

https://internet-ledi.ru//zolotaya_osen/uchastniki_marafona.html

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

https://internet-ledi.ru//zolotaya_osen/uchastniki_marafona.html

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

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

Страница 1 из 11
  • Виктр говорит:

    Хорошая статья…. Такой же принцип можно будет, думаю, применить и для сайтов. Только почему ничего не написано про размеры гиф-картнок (не обязательно смайликов). На сколько мне известно на фавиконы подходят только размеры 16*16, 24*24 и 32*32

    • Людмила говорит:

      Я уже писала по поводу размера фавикона в одной из предыдущих публикаций, и ссылка на эту публикацию есть в начале статьи. Но подогнать под стандартные размеры очень легко картинки в формате jpeg или png, а вот с форматом gif немного сложнее, у меня не получается редактировать размер таких картинок. Поэтому выхода два — искать готовую картинку нужного размера в интернете — для этого можно прописать нужный размер, но выбор будет очень ограничен, или создавать самому — в чем тоже не вижу смысл — терять много времени на фавикон, тем более для открытки, которая буквально завтра потеряет свою актуальность. Другое дело для сайта, блога, особенно если фавиконом будет служить ваш логотип, тогда уже можно посидеть сделать самому или заказать.

  • lana shatko говорит:

    добрый вечер, програмка понравилась , а как она называется?спасибо

  • lana shatko говорит:

    добрый вечер, програмка понравилась, а как она называется? спасибо

  • Марина говорит:

    Спасибо, полезная информация. А гифки можно редактировать в онлайн сервисах,типа ezgif.com и в online-image-editor.com. В последнем еще можно рамку красивую пришлепнуть или надпись отрезать

    • Людмила говорит:

      И Вам спасибо, Марина, иногда очень нужно подредактировать изображение с расширением .gif, но кроме, как уменьшить непосредственно в конструкторе, я ничего с ними не делала, а их, оказывается, тоже можно редактировать. Добавила сайты в свою коллекцию онлайн-сервисов

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Авторизация на сайте
Магазин
katalog
КАК УБЕРЕЧЬ СВОЙ КОМПЬЮТЕР ОТ ВНЕЗАПНОЙ СМЕРТИ
plus_i_minus4
turbobanner220
Как спасти от краха свой онлайн бизнес
Подпишись на новости сайта: