ГлавнаяДизайн блога › Как сделать иконку для сайта на WordPress?


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


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

Привет всем друзьям и читателям — 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 "/>

 

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

На этом всё!

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

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

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




66 комментариевА что думаете Вы?

  1. Ирина

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Руслан ответил:

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

    [Ответить]

  2. Надежда Пинчук

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Svetlana

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Svetlana ответил:

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

    [Ответить]

  4. Руслан Альжанов

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Руслан!

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

    [Ответить]

  5. Елена

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Елена!

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

    [Ответить]

  6. Елена

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Роман

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Роман

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Алексей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Юлия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Евгений

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Виталий

    Приветствую, Денис!

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

    Благодарю!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Виталий ответил:

    «Денис Черников 31.07.2012 в 16:26

    Здравствуйте, Руслан!

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

    Сделать фото — не проблема. Что сделать, чтобы фото отображалось в том месте, где фавикон? Причем достаточно видимое.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  13. Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  15. Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  16. Наталия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  17. Наталия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  18. Артем

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  19. Элона

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  20. Элона

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  21. Евгений

    Здравствуйте, Денис!

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Евгений!

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

    [Ответить]

  22. Алексей

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

    [Ответить]

    Денис Черников ответил:

    Привет, Алексей!

    Да вроде всё написано чётко, просто нужно внимательнее прочитать!

    На счёт браузера, то нужно ждать!

    [Ответить]

    Алексей ответил:

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Алексей!

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

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

    [Ответить]

    Алексей ответил:

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

    Денис Черников ответил:

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

  23. Евгений

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

    Удачи Вам и ещё раз спасибо.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  24. Наташа

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Наталья!

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

    [Ответить]

  25. web-dohodi.ru

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  26. николай

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  27. николай

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  28. Ольга

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  29. Алексей

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

    [Ответить]

  30. Наталья

    Добрый день!

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

    [Ответить]

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

Вверх