Sozdaiblog.ru
Назад

Как сделать иконку для сайта на WordPress?

Опубликовано: 28.04.2012
Время на чтение: 8 мин
66
445

Привет всем друзьям и читателям — Sozdaiblog.ru!

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

Эта картинка называется – «Favicon.iso»(Фавикон), а по простому – «Иконка».

И сегодня, я Вам расскажу, как сделать иконку для сайта на WordPress.

Многие говорят, что фавикон не особо нужен, но я не могу с этим согласиться.

Возьмите, к примеру, любой сайт с фавиконом и добавьте в закладки браузера. После этого, сделайте то-же самое  для сайта  без него.

А теперь, посмотрите на закладки и скажите, какой сайт первым привлёк Ваше внимание?

Вот, то-то и оно.  Да и вообще, мне лично нравиться, как он смотрится в уголке моего браузера.

 

Как сделать Иконку для сайта на WordPress.

Сделать фавикон не сложно, для этого подойдёт любой графический редактор. Не знаю, как Вы, но я пользуюсь Adobe Photoshop.

Редактируете в редакторе, любую понравившуюся Вам картинку и сохраняете её в формате PNG или GIF, с размером 16х16px или 32х32px.

Теперь, её нужно загрузить на хостинг в папку с темой сайта.

Сделать это быстро, можно с помощью ftp-клиента.

Научиться обращаться с ftp-клиентом Вы сможете, прочитав статьи:

 

 

Вот такой путь должен получиться у вашей картинки:

 

  • domains/Ваш сайт /wp-content/themes/картинка.png

 

Далее нам нужно внести изменения в файле — «header.php».

Для этого заходим в админку WordPress, раздел – Внешний вид => Редактор:

 

 

И в правой колонке выбираем файл – «header.php»:

 

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

 

Тут, Вам нужно найти теги — <head> </head> (обычно они в начале) и перед закрывающим тегом </head> вставить следующий код:

 


 <link rel="shortcut icon" type="image/png" href="http://Имя вашего сайта /wp-content/themes/Картинка.png"/>

 

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

Вообще в Интернете очень много сайтов, с помощью которых можно сделать фавикон.

Вот один из них:

 

 

Заходите и загружаете любую картинку с компьютера или интернета, нажимаете – «Создать Favicon.iso»:

 

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

 

Сайт автоматически обработает и сгенерирует Вашу иконку, после чего предложит её скачать:

 

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

Как создать анимированный favicon.iso.

Для того чтобы создать анимированный favicon, Вам нужно найти, или сделать в графическом редакторе, анимированную картинку, но исключительно в формате – GIF.

Затем, по той же схеме прописать следующий код:

 

<link rel="shortcut icon" type="image/gif" href="http://Имя вашего сайта /wp-content/themes/Картинка.gif "/>

 

Делайте всё точно, как я описал и будет Вам счастье.

На этом всё!

Думаю я смог донести до всех, как сделать иконку для сайта.

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

Расскажите, а Вы используете иконку для сайта?

На сегодня всё. Удачи.

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Ирина
    Опубликовано: 25.06.2012 Ответить на сообщение

    По-моему удобнее всего делать иконку в favicon.cc...очень удобный сервис.

    • Денис Черников
      Опубликовано: 25.06.2012 Ответить на сообщение

      Здравствуйте, Ирина! Конечно можно! Похожих сервисов в интернете тьма тьмущая! Здесь, каждый выбирает то, что ему удобно!

      • Руслан
        Опубликовано: 05.01.2015 Ответить на сообщение

        Да ни фига я пробовал! Вордпресс говорит: Извините, тип этого файла не разрешён из соображений безопасности.

  • Надежда Пинчук
    Опубликовано: 02.07.2012 Ответить на сообщение

    Здравствуйте. Решила эту проблему проще, с помощью плагина. Картинку, конечно же, необходимо подготовить заранее.

    • Денис Черников
      Опубликовано: 03.07.2012 Ответить на сообщение

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

  • Svetlana
    Опубликовано: 21.07.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 21.07.2012 Ответить на сообщение

      Иконка, важна, как для посетителей, так и для роботов! Делайте обязательно!

      • Svetlana
        Опубликовано: 21.07.2012 Ответить на сообщение

        Ясно, пойду мучиться, может что получиться.

  • Руслан Альжанов
    Опубликовано: 31.07.2012 Ответить на сообщение

    Денис здравствуйте.Можно в favicon использовать свое фото?

    • Денис Черников
      Опубликовано: 31.07.2012 Ответить на сообщение

      Здравствуйте, Руслан!
      Конечно можно, но она будет очень маленькая, Вас видно не будет!

  • Елена
    Опубликовано: 26.11.2012 Ответить на сообщение

    Большое спасибо, Денис! Очень полезная информация. Недавно начала создавать свой сайт(наверно еще много Ваших статей пригодится).

    • Денис Черников
      Опубликовано: 26.11.2012 Ответить на сообщение

      Пожалуйста, Елена!
      Не торопитесь главное, изучайте всё пошагово.

  • Елена
    Опубликовано: 26.11.2012 Ответить на сообщение

    Спасибо за совет! Сегодня сделала фавикон на сайт, благодаря Вашей статье. (В предыдущем сообщении ошиблась с адресом почты.Исправляюсь.)

    • Денис Черников
      Опубликовано: 26.11.2012 Ответить на сообщение

      Пожалуйста, Елена! Заходите!

  • Роман
    Опубликовано: 24.12.2012 Ответить на сообщение

    Огромное спасибо Денис за лаконичную и четкую статью. Сделал и размести икон на ура

    • Денис Черников
      Опубликовано: 24.12.2012 Ответить на сообщение

      Пожалуйста, Роман! Рад, что статья Вам пригодилась!

  • Роман
    Опубликовано: 24.12.2012 Ответить на сообщение

    Денис сейчас заметил, у меня иконка на главной doglive.org.ua есть, а все остальные страницы побоку. В чем засада

    • Денис Черников
      Опубликовано: 24.12.2012 Ответить на сообщение

      Роман, там вариантов не много. Или не корректно (не туда) вставили, или нужно время для отображения (такое бывает). Кэш на всякий случай почистите!

  • Алексей
    Опубликовано: 08.03.2013 Ответить на сообщение

    Денис! Не слышал ли ты чего-нибудь про ошибку 404 — /apple-touch-icon-precomposed.png. Это иконка для мобильников под управлением apple. У меня стало расти количество ошибок. Может у кого -нибудь есть мысли борьбы с этой проблемой?

    • Денис Черников
      Опубликовано: 08.03.2013 Ответить на сообщение

      Вот тут почитайте — http://www.simplemachines.ru/index.php?topic=14839.0

  • Юлия
    Опубликовано: 22.03.2013 Ответить на сообщение

    Спасибо! Очень помогли. Действительно, очень простой и удобный способ. А в фотошопе первый раз фавикон делала (до этого сервисами пользовалась онлайн) — получилось супер!

    • Денис Черников
      Опубликовано: 23.03.2013 Ответить на сообщение

      Рад был помочь, Юлия! Заходите почаще!

  • Евгений
    Опубликовано: 04.04.2013 Ответить на сообщение

    Спасибо!!! Ваша статья очень помогла!!!

    • Денис Черников
      Опубликовано: 04.04.2013 Ответить на сообщение

      Пожалуйста! Заходите!

  • Виталий
    Опубликовано: 13.04.2013 Ответить на сообщение

    Приветствую, Денис!
    А что сделал Артемий Лебедев на своем сайте, его фото вместо фавикона. Можете ответить на электропочту, если что.
    Благодарю!

    • Денис Черников
      Опубликовано: 13.04.2013 Ответить на сообщение

      А в чём проблема то? Сделайте себе фото!

      • Виталий
        Опубликовано: 14.04.2013 Ответить на сообщение

        «Денис Черников 31.07.2012 в 16:26
        Здравствуйте, Руслан!
        Конечно можно, но она будет очень маленькая, Вас видно не будет!»
        Сделать фото — не проблема. Что сделать, чтобы фото отображалось в том месте, где фавикон? Причем достаточно видимое.

        • Денис Черников
          Опубликовано: 14.04.2013 Ответить на сообщение

          Виталий, это специальный ресурс в своё время я тоже с этим сталкивался! Скажу одно — ерундовая затея. Лучше придумайте анимированный фавикон, который будет трансформироваться, как у Шакина.Это будет намного привлекательнее чем еле видное очертание лица.

  • Константин
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

      Найдите похожий код, как в этой статье и перепишите под себя!

  • Константин
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Константин
    Опубликовано: 28.04.2013 Ответить на сообщение

    Темы я как раз в первую очередь поменял, целых три штуки. Попробую что то другое. Спасибо за ответ.

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

      А других вариантов нет, иконка реализовывается из темы!

  • Наталия
    Опубликовано: 01.06.2013 Ответить на сообщение

    Здравствуйте,Денис! Я может не по теме, но не могу найти инфу — почему перед сниппетом не отображается мой фавикон?

    • Денис Черников
      Опубликовано: 01.06.2013 Ответить на сообщение

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

  • Наталия
    Опубликовано: 02.06.2013 Ответить на сообщение

    Я смотрела в Яндексе, а фавикон установила несколько месяцев назад. Буду ждать, когда появится, спасибо!

    • Денис Черников
      Опубликовано: 02.06.2013 Ответить на сообщение

      Пожалуйста! У меня месяца 3-4 фавикон не показывался.

  • Артем
    Опубликовано: 22.07.2013 Ответить на сообщение

    Спасибо! РАБОТАЕТ!

    • Денис Черников
      Опубликовано: 22.07.2013 Ответить на сообщение

      Пожалуйста, заходите!

  • Элона
    Опубликовано: 29.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.07.2013 Ответить на сообщение

      Здравствуйте! Я ничего не понял из сказанного Вами! При чём тут панель быстрого запуска?! Вот это предложении вообще не понял — «А в браузере в панели быстрого запуска также от темы»???!!! Выразитесь, пожалуйста, более понятно!

  • Элона
    Опубликовано: 29.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.07.2013 Ответить на сообщение

      Такое бывает, обычно помогает чистка кэша браузера! Иногда просто должно пройти время!

  • Евгений
    Опубликовано: 27.10.2013 Ответить на сообщение

    Здравствуйте, Денис!
    Все сделал в точности с Вашей инструкцией, причем несколько повторов процедуры сделал, но все тщетно...Фавикон не отображается... Может быть подскажите где капать, в чем может быть причина?

    • Денис Черников
      Опубликовано: 27.10.2013 Ответить на сообщение

      Здравствуйте, Евгений!
      Где не отображается, в браузере или поисковой выдаче! Других кодов нет!

  • Алексей
    Опубликовано: 10.11.2013 Ответить на сообщение

    Денис привет! Прочитал все комментарии, у многих была такая же проблемма как у меня, делал все четко по Вашей инструкции (причем бездумно), повторял все раз пять, но иконки как и не было. Пришлось включить мозг)) Вы у себя в инструкции написали, что ...путь должен быть такой..., ...Следующий код такой...(вообщем все без вариантов и поэтому у многих и не получалось). Меня спасло перечитывание Вашей инструкции на 6 раз))) И в самом начале написано «скопировать в папку с темой сайта», а путь потом у Вас прописан до папки с темами... Вообщем перекопировал картинку именно в папку с темой, Соответственно и код стал не похож на Ваш и вуаляп, иконка на месте! Но все равно спасибо! Осталась проблемка, В админпанели иконка сразу поменялась, но только переходишь на страницу она сразу пропадает. Браузер Chrome, кэш почистил, остается ждать правильно?

    • Денис Черников
      Опубликовано: 10.11.2013 Ответить на сообщение

      Привет, Алексей!
      Да вроде всё написано чётко, просто нужно внимательнее прочитать!
      На счёт браузера, то нужно ждать!

      • Алексей
        Опубликовано: 11.11.2013 Ответить на сообщение

        Еще раз привет Денис, Согласен про внимательность! Да и в таком деле, как создание и работа с сайтами надо постоянно мозг включать, а не как я сразу — «четко по инструкции». А вообще только сейчас посмотрел Вашу библиотеку — Вы молодец, очень много полезного, что пригодится в будущем, уже закладил Вас. И еще один вопрос. А почему я сейчас смотрю на ваш адрес блога, а там фавикона нет?(

        • Денис Черников
          Опубликовано: 11.11.2013 Ответить на сообщение

          Здравствуйте, Алексей!
          На счёт головы Вы правильно подметили, а насчёт инструкции, то делать нужно всё по ней + включать голову и тогда всё будет получаться.
          А фавикон Вы наверное не там смотрите. Он должен быть во вкладке и поисковой выдаче, а Вы наверное глядите адресную строку!

          • Алексей
            Опубликовано: 11.11.2013 Ответить на сообщение

            Ой и правда...) Все понял! Денис, спасибо большое за помощь!

          • Денис Черников
            Опубликовано: 11.11.2013 Ответить на сообщение

            Не за что! Обращайтесь!

  • Евгений
    Опубликовано: 24.05.2014 Ответить на сообщение

    Денис, спасибо Вам большое. Перерыл кучу сайтов, но только с помощью вашей статьи я сделал иконку на свой блог.
    Удачи Вам и ещё раз спасибо.

    • Денис Черников
      Опубликовано: 25.05.2014 Ответить на сообщение

      Пожалуйста, Евгений! Рад что моя статья Вам помогла!

  • Наташа
    Опубликовано: 15.08.2014 Ответить на сообщение

    Ура! Спасибо огромное, Денис! Я вообще боялась лезть куда то в дебри и менять что то... С помощью Ваших статей я уже много чего сделала на своем сайте (скачок на «далее» убрала он меня раздражал; защитила статьи от копирования; картинки оптимизирую(нудно, но нужно)и др.). Вот сегодня сделала иконку, только она появилась во вкладке. А в поисковой выдаче нет. Наверное, нужно какое то время?

    • Денис Черников
      Опубликовано: 15.08.2014 Ответить на сообщение

      Пожалуйста, Наталья!
      Вот было бы таких вот положительных отзывов больше, работать было бы легче! В выдаче Яндекса иконка появляется через 2-6 месяце! А в Гугле их вообще нет!((

  • web-dohodiru
    Опубликовано: 19.12.2014 Ответить на сообщение

    Спасибо получилось первым методом, вставкой ссылки все с первого раза)

    • Денис Черников
      Опубликовано: 21.12.2014 Ответить на сообщение

      Пожалуйста, обращайтесь!

  • николай
    Опубликовано: 17.01.2015 Ответить на сообщение

    Добрый день. Я сделал иконку и отредактировал через генератор tools.dynamicdrive в формате ИСО, лень на английский переходить, далее вставил ШТМЛ код через панель Вордпресс «Внешний вид, Редактор, Заголовок», и после тега вставил. В итоге иконка появилась только в моем браузере, а в поисковике Яндекс не отображается рядом с названием сайта, что делать?

    • Денис Черников
      Опубликовано: 19.01.2015 Ответить на сообщение

      Здравствуйте! Нужно время, оно может 2-4 месяца не отображаться!

  • николай
    Опубликовано: 19.01.2015 Ответить на сообщение

    Это шутка? 2-4 месяца!, но она же отображается в моем браузере, и на странице «инструменты для вебмастеров» в ГУГЛе, вверху справа возле названия сайта. Ладно, подожду.

    • Денис Черников
      Опубликовано: 23.01.2015 Ответить на сообщение

      Это к Яндексу! Он так шутит!

  • Ольга
    Опубликовано: 27.01.2015 Ответить на сообщение

    Здравствуйте! Вроде все делала правильно по первому способу, но иконка не отобразилась.

    • Денис Черников
      Опубликовано: 29.01.2015 Ответить на сообщение

      Здравствуйте! Не отобразилась где именно?

  • Алексей
    Опубликовано: 18.08.2015 Ответить на сообщение

    Спасибо! Все получилось=)

  • Наталья
    Опубликовано: 09.10.2015 Ответить на сообщение

    Добрый день!
    я тоже пыталась вставить иконку. Теперь у меня сайт не отображается. Что делать?

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.